Social Share Counter For jQuery - sharecount.js

File Size: 3.51 KB
Views Total: 2271
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Social Share Counter For jQuery - sharecount.js

sharecount.js is a dead simple jQuery plugin that retrieves and displays the number of social shares for a specific URL. Currently supports Facebook, Twitter, Google Plus, Pinterest, and LinkedIn.

How to use it:

1. Create a list of social media links.

<ul>
  <li><a href="" class="facebook">Facebook</a></li>
  <li><a href="" class="tw">Twitter</a></li>
  <li><a href="" class="linked">LinkdIn</a></li>
  <li><a href="" class="pin">Pinterest</a></li>
  <li><a href="" class="gg">Google Plus</a></li>
</ul>

2. Include the JavaScript file jquery.sharecount.js after jQuery library.

<script src="jquery.min.js"></script>
<script src="jquery.sharecount.js"></script>

3. Initialize the plugin to display the social shares of the current page.

$('ul').shareCount({
  facebook:'.facebook',
  pinterest:'.pin',
  linkedin:'.linked',
  twitter:'.tw',
  google:'.gg',
})

4. The plugin will generate social share counts appending to the end of the social links as these:

<ul>
  <li><a href="" class="facebook">facebook<span class="share-number">198520872</span></a></li>
  <li><a href="" class="tw">twitter<span class="share-number">2424</span></a></li>
  <li><a href="" class="linked">linkdin<span class="share-number">7123</span></a></li>
  <li><a href="" class="pin">pinterest<span class="share-number">4315</span></a></li>
  <li><a href="" class="gg">google<span class="share-number">132117</span></a></li>
</ul>

5. Style the social share counts in the CSS:

.share-number { ... }

6. You can also specify the URL you'd like to get the social shares in the JavaScript as this:

// facebook
var url = 'http://facebook.com';

// current page
var url = window.location.href;

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