jQuery Plugin To Create Custom Share Buttons With Counts - csbuttons

jQuery Plugin To Create Custom Share Buttons With Counts - csbuttons
File Size: 16.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

csbuttons is a cross-browser jQuery plugin which has the ability to help create your own custom social share buttons/links with share counts. Supported services: Facebook, Twitter, Google+, LinkedIn and Pinterest.

How to use it:

1. Just put the main JavaScript file jquery.csbuttons.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.csbuttons.js"></script>

2. Create the social share buttons/links using the following data attributes:

  • data-url: url to share
  • data-type: facebook, twitter, google, linkedin, pinterest
  • data-txt: Text to share
  • data-via: Your twitter account name
  • data-count: set to false will disable the social count
  • count_position: right, left
  • data-apikey: for google plus
  • data-media: image path
  • data-lang: language
<a href="#" class="csbuttons" data-type="facebook"><i class="fa fa-facebook fa-4x"></i></a>
<a href="#" class="csbuttons" data-type="twitter" data-txt="Text To Share" data-via="jQueryScript"><i class="fa fa-twitter fa-4x"></i></a>
<a href="#" class="csbuttons" data-type="google" data-lang="en"><i class="fa fa-google-plus fa-4x"></i></a>
<a href="#" class="csbuttons" data-type="linkedin"><i class="fa fa-linkedin fa-4x"></i></a>
<a href="#" class="csbuttons" data-type="pinterest" data-txt="Text To Share"><i class="fa fa-pinterest fa-4x"></i></a>

3. Create a container to display the total share counts.

<span id="total"></span>

4. Initialize the plugin and done.

$('.csbuttons').cSButtons({
  total : "#total"
});

5. The plugin also allows you to pass the settings via JavaScript as follows:

$('.csbuttons').cSButtons({
  "url"   : null,
  "type"  : 'facebook',
  "txt" : null,
  "via" : null,
  "count" : false,
  "count_position" : 'right',
  "apikey": null,
  "media" : null,
  "lang"  : null,
  "total" : null,
});

Change log:

2016-12-14

  • Fix share_count is not defined and update infos

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