Custom jQuery Social Share Buttons with Counters - Download Custom jQuery Social Share Buttons with Counters

Download Custom jQuery Social Share Buttons with Counters

Posted on

This time I will share jQuery Plugin and tutorial about Custom jQuery Social Share Buttons with Counters, hope it will help you in programming stack.

Custom jQuery Social Share Buttons with Counters - Download Custom jQuery Social Share Buttons with Counters
File Size: 6.51 KB
Views Total: 6325
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery custom social share button plugin which uses Font Awesome 4 for social icons and shows the count that your URL has been shared on social networking sites. Currently works with Facebook, Twitter, Linkedin, Pinterest and VK.

How to use it:

1. Include Font Awesome 4 and the jQuery Social Button plugin’s CSS in the head section.

1 <link rel="stylesheet" href="path/to/font-awesome.min.css">
2 <link rel="stylesheet" href="path/to/jquery.social-buttons.css">

2. Add custom social share buttons with counters to your web page.

01 <div class="social">
02   <div class="social__item">
03       <span class="fa fa-facebook" data-count="..." data-social="fb"></span>
04   </div>
05   <div class="social__item">
06       <span class="fa fa-vk" data-count="..." data-social="vk"></span>
07   </div>
08   <div class="social__item">
09       <span class="fa fa-<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a>" data-count="..." data-social="tw"></span>
10   </div>
11   <div class="social__item">
12       <span class="fa fa-linkedin" data-count="..." data-social="ln"></span>
13   </div>
14   <div class="social__item">
15       <span class="fa fa-pinterest" data-count="..." data-social="pt"></span>
16   </div>
17 </div>

3. Include jQuery library and the jQuery Social Button plugin at the bottom of your webpage.

1 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
2 <script src="path/to/jquery.social-buttons.js"></script>

4. Initialize the plugin and done.

1 $('[data-social]').socialButtons();

5. Specify the URL you want to share.

1 $('[data-social]').socialShares({
3 });

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

source : jqueryscript.net