Simple jQuery Plugin For Custom Social Share Buttons - SocialJS

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  for social media icons (OPTIONAL).

<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 and callback functions. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

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

// Container
container: '.socialjs',

// Uses https instead of http
https: true,

// urls to get counts
urls: {
  GooglePlus: 'backend/GooglePlusCall.php',
  Facebook: 'http://graph.facebook.com/',
  Linkedin: 'http://www.linkedin.com/countserv/count/share',
  Reddit: 'http://www.reddit.com/api/info.json'
},

// 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')

Changelog:

2019-09-13

• v2.2.0

---

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