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.
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.
02 |
< div class = "social__item" > |
03 |
< span class = "fa fa-facebook" data-count = "..." data-social = "fb" ></ span > |
05 |
< div class = "social__item" > |
06 |
< span class = "fa fa-vk" data-count = "..." data-social = "vk" ></ span > |
08 |
< div class = "social__item" > |
11 |
< div class = "social__item" > |
12 |
< span class = "fa fa-linkedin" data-count = "..." data-social = "ln" ></ span > |
14 |
< div class = "social__item" > |
15 |
< span class = "fa fa-pinterest" data-count = "..." data-social = "pt" ></ span > |
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({ |
This awesome jQuery plugin is developed by Belyash. For more Advanced Usages, please check the demo page or visit the official website.