jQuery Plugin For Custom Social Share Buttons - csButtons

csButtons is a lightweight jQuery plugin which allows you to replace the default social share buttons with any social icons. You can find and download more than 280+ social icon sets here and here.

Social networks supported:

• Facebook
• Twitter
• Google Plus
• Linkedin
• Pinterest

How to use it:

1. Download and include the jquery.csbuttons.js after the jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.csbuttons.js"></script>

2. Add social share links with custom social icons & counters following the Html structure like this:

<a href="#" class="csbuttons" data-type="facebook" data-count="true">
  <img src="images/fb.png" alt="">
</a>

<a href="#" class="csbuttons" data-type="twitter" data-txt="Free jQuery Plugins" data-via="jqueryscript" data-count="true">
  <img src="images/tw.png" alt="">
</a>

<a href="#" class="csbuttons" data-type="google" data-lang="en" data-count="true">
  <img src="images/gp.png" alt="">
</a>

<a href="#" class="csbuttons" data-type="linkedin" data-count="true">
  <img src="images/in.png" alt="">
</a>

<a href="#" class="csbuttons" data-type="pinterest" data-txt="Free jQuery Plugins" data-media="https://www.jqueryscript.net/images/logo.png" data-count="true">
  <img src="images/pin.png" alt="">
</a>

3. Optionally, you can create an inline element to output the total number of social shares.

<span>Total share : <span id="total"></span></span>

4. Initialize the plugin with default options.

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

5. Full default options.

$('.csbuttons').cSButtons({

// URL of the page to share
"url" : null,

// facebook, twitter, google, linkedin, pinterest
"type" : 'facebook',

// Text to share
"txt": null,

// Twitter username
"via": null,

// Displays counters
"count": false,

// Right of left
"count_position" : 'right',

// Google Plus API Key
"apikey": null,

// Image to share on Pinterest
"media" : null,

// Language
"lang": null,

// CSS id or class of the container element
"total": null,

});

---

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