Simple jQuery Plugin For Custom Social Share Buttons - SocialJS

Simple jQuery Plugin For Custom Social Share Buttons - SocialJS
File Size: 510 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SocialJS is a simple lightweight jQuery plugin to generate custom social buttons with share counts for sharing your webpage over 5 major social networking sites: Twitter, Facebook, Linkedin, Google Plus, and Reddit.

How to use it:

1. Load the stylesheet socialjs.css in the head section for default social button styles.

<link href="dist/socialjs.css" rel="stylesheet">

2. Load the Font Awesome 4 for social media icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create a list of social share buttons and use data- attribute to setup the sharing options.

  • data-sharetype: twitter, facebook, linkedin, googleplus, reddit
  • data-basecount: Base count
  • data-text: If not specified the plugin will take the title of the page as text.
  • data-via: For Twitter
  • data-related: For Twitter
<div class="socialjs">
  <ul>
    <li>
      <a class="sharebutton facebook" 
         data-basecount="0" 
         data-sharetype="facebook" 
         data-text="Text to share" 
         title="Title to share" 
         href="#">
         <i class=" fa fa-facebook"></i> 
         <span class="count"></span>
      </a>
    </li>
  </ul>
</div>

4. Call the plugin on the top element.

$('.socialjs').socialjs();

5. Available options. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

// $('#el').socialjs({OPTIONS});
// OR $('#el').socialjs('option', 'key', value);

// Path to server side google plus client
GooglePlusAPIProvider: 'backend/GooglePlusCall.php',

// Show total by k or M when number is to big.
shortCount: true,

// Fetch share count
fetchCounts: true,

// Callback functions.
onInit: function () {},
onLoad: function () {},
onDestroy: function () {},
onClick: function(){},

6. Public methods.

// destroy the plugin
$('#el').socialjs('destroy')

// Get total count
$('#el').socialjs('getTotalCount')

// Get Facebook count
$('#el').socialjs('getFacebookCount')

// Get Google Plus count
$('#el').socialjs('getGoolgePlusCount')

// Get Twitter count
$('#el').socialjs('getTwitterCount')

// Get Reddit count
$('#el').socialjs('getRedditCount')

// Get LinkedIn count
$('#el').socialjs('getLinkedinCount')

This awesome jQuery plugin is developed by SubZane. For more Advanced Usages, please check the demo page or visit the official website.