Did you ever wish to show off your share counts and encourage more sharing on your websites and blogs? Now you can do both with our Free Jumbo Share Counters (JSC) which is a PHP driven free social sharing plugin with free cloud hosting and stats reporting to help you track likes, shares and tweets in realtime! You can integrate it easily in WordPress, Blogspot and even inside your static HTML5 webpages. JSC is inspired from AddThis Pro's Jumbo Share Counter and Mashable-style share counters. Amazingly our sharing buttons are absolutely free of cost with no $10/month hosting fee or credits links! Lets redraw the slow-loading official social media sharing buttons in a unique custom way. =)
UPDATE: If your facebook share count has stopped working, please use the updated code by clicking here.
Demo: Check the left and bottom of this blog post.
Over the recent two years web design trends have taken a whole new shape. Publishers today prefer big buttons, large photos, and lightweight share counters. I know most of you are tired of slow performing social sharing plugins such as Facebook like button, Twitter tweet/follow buttons, Google +1 button etc. which eats up to 30% of your entire website load time and badly effects user experience. According to Google PageSpeed insights, the code used by these social media networks contains both render-blocking JavaScript and tons of unnecessary HTML for tracking purposes which seriously affects the load time of a website in both mobile and desktop devices. Load time of a webpage is an important search engine ranking factor and Google surely favours sites in SERPs that load faster.
Keeping all these factors in mind we thus created natural look-alike of these official sharing buttons to provide the best free sharing solution.
The following features make "Jumbo Share Counters" the most advanced sharing plugin:
- Mobile responsive,
- SEO friendly,
- Lightweight,
- Animated number counter,
- Lightening fast,
- Natural in design
- Customizable
- 2 Themes - Floating bar & Horizontal bar
- Supports top 13 sharing buttons
- Eye catching and engaging
- Expand/Collapse option
- Hosted on cloud servers
- Free of cost!
Let me introduce to you our free Jumbo Share Counters that uses the open source share count API provided by Donreach.
How Do "Jumbo Share Counters" Plugin work?
JSC uses Donreach's free open source PHP script called ShareCount to fetch the count of social shares and output it as JSON, JSONP or XML data with the option to cache the results using memcache, APC or file cache. We optimized this script by removing the cache and cookies code to make it load more faster. We have also removed the Twitter API from the list because Twitter has recently depreciated their share count API, therefore we can no longer display the tweet counts.
We uploaded the ShareCount API on two free cloud servers provided by redhat and herokuapp which is much faster compared to shared hosting.
Jumbo Share Counters API URL is hosted on: (use the working link only)
http://mbtr-counters.rhcloud.com/Working!https://social-shares.herokuapp.com/Facebook not working!http://share-counters.rhcloud.com/Facebook not working!https://count.donreach.com/Too Slow!
and it supports the following parameters:
| Parameter | Default | Description |
|---|---|---|
| url (required) | none | The URL of the page you want to fetch the social shares for. |
| format (optional) | json | The format of the output. Can be either json, jsonp or xml. |
To see share count stats for a specified URL, all you need to do is run this query inside your browser address bar:
http://mbtr-counters.rhcloud.com/?url=http://www.google.comYou can replace the Google URL with any URL of your choice. The default format is set to JSONP so the output to the above query will return the following share counts for Google:
MBTshares({
"url":"http:\/\/www.google.com","shares":{
"total":16943080,
"facebook":16589903,
"google":1,
"linkedin":13356,
"pinterest":75108,
"stumbleupon":255416,
"delicious":0,
"reddit":0,
"buffer":9018,
"vk":278
}})
We have further optimized and enhanced the shareCount API by including support for additional buttons. Jumbo Share Counters Plugin is thus the most advanced sharing plugin with support for up to 13 popular share buttons:
- GooglePlus +1
- Twitter - Will not display the tweet count because twitter abandoned their counts API
- StumbleUpon
- Delicious
- Buffer
- vk
- Viber - Will automatically display in mobile devices
- Whatsapp - Auto displayed in mobile devices
Different Themes for Mobile and Desktop Screens
We have designed two different themes for JSC keeping the popular design trends in mind.
1. JSC Floating Social Sharing Bar
UPDATE:
- BLOGGER :- Install Floating Sharing Bar
- WORDPRESS :- Install Floating Sharing Bar
It is suitable only for Desktop and Tablet screens. By default it is programmed to displayed only in desktop screens and auto hide itself in mobile devices.
2. JSC Horizontal Social Sharing Bar
This design model for sharing buttons works best just below post title or at the bottom of post i.e post footer. You can add it in both these locations without sacrificing load time.
UPDATE:
- BLOGGER :- Install JSC Horizontal Sharing Bar
- WORDPRESS :- Install JSC Horizontal Sharing Bar
It is suitable for all devices whether Desktop, Tablets or Smartphones. To keep things simple, the viber and whatsapp share buttons will be automatically displayed only in mobile devices. They wont display for desktop screens but you can surely change the settings to display them in all devices if you want.
Installation Instructions
We will first help you add the necessary JavaScript code to your websites, in our next post we will share separate tutorials to add "Jumbo Share Counters" in blogger templates and WordPress themes.
The steps below are standard and are same for all CMS platforms:
1 Paste the following code just above </head> inside your template:
(OPTIONAL STEP) Skip this step if you have already added JQuery and FontAwesome libraries inside your templates.
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
2 Paste the following JS code just above </body> tag of your template
UPDATE: Facebook has deprecated its REST API, as a result of which the facebook share count could not be fetched using our old files. I have updated the code with facebook Graph API and everything works just fine now. Please update the URL link below inside your template. Modified code is highlighted as yellow.
<script type='text/javascript'>
//<![CDATA[
/* ##### FREE JUMBO SHARE COUNTERS #######
Developed by: www.MyBloggerTricks.com
Dual licensed under the MIT license and GPL license.
Copyright (c) 2015-2016 STCnetwork.org
###### PHP script ########################
Developed by http://donreach.com/,
Optimized by STCnetwork.org
####### Animation ########################
Supported by: waypoints.js and Counterup.js
Customized by STCnetwork.org
Source: https://github.com/bfintal/Counter-Up
#######################################*/
ADD CODE HERE
/*##########Plugin Settings#############*/
$(document).ready(function() {
var shareUrl=$("link[rel=canonical]").attr("href");
$.getJSON('http://mbtr-counters.rhcloud.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?",function(data){shares=data.shares;$(".count").each(function(index,el){service=$(el).parents(".share-btn").attr("data-service");count=shares[service];$(el).text(count)});
});
/*#########Animation Settings###########*/
$(window).load(function() {
$('.anim').counterUp({
delay:20, //Smaller value gives more frames
time: 1000 //Higher value slows down animation
});
});
});
//]]></script>
Customization:
- If you have uploaded the scripts yourself then you can replace
https://count.donreach.comwith your API URL - To increase the frames of the rotating numbers, reduce value of delay
- To slow down the animation speed, increase the value (in milli seconds) of time
3 In the above code replace the line "ADD CODE HERE" with this code
4 Save your template and all done!
Follow the coming tutorials to add JSC stylesheet and HTML to your sites.
Upload ShareCount Script Yourself - (Optional)
If you want even faster performance and wish to upload the shareCount API yourself on your webhost then you can surely do that. To upload files over a cloud server you need a SSH client such as PuTTY for windows. These days, SSH (Secure Shell) is used to log into and execute code on remote hosts and transfer files. Unlike FTP, use of SSH is a little more techy.
To upload the PHP scripts on your webhost or on a free cloud server, follow these steps to get started:
Download the ShareCount script and upload it on a free cloud server using SSH Client like PuTTY. You can use herokuapp or Redhat's OpenShift cloud servers.
If you are not comfortable working on a cloud environment then you can also upload the scripts on a shared hosting such as Hostgator using FTP client like Fileziila. Don't forget to tell your webhost to whitelist MOD security of your page. Read this Github thread where my discussion with Adam Bouqdib (developer of ShareCount API) could help you.
Credits & License:
© Copyright 2015-2016 STCnetwork.org
Beta Version: 1.0 (29 Feb, 2016)
Jumbo Share Counters Plugin by STCnetwork is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. JSC Plugin is dual licensed under the MIT license and GPL license. You are most welcomed to share the plugin with your audience as long as you attach credit links back to this webpage. Kindly avoid selling the plugin in a commercial product or service. Its use is restricted to individuals alone.
We have to thank a lot of people here for helping us in the Plugin development:
Adam Bouqdib who personally helped me in troubleshooting some of the errors.
Donreach for open sourcing their social share count API.
Herokuapp or Redhat OpenShift cloud servers for providing free hosting.
STCnetwork's senior developer, Ahmed Nasir for giving a helping hand.
A special thanks to developers of waypoints.js and counterup.js for providing the animation effect.
Need Help?
Coding this plugin required great effort and a lot of time. We did all this for the love of knowledge. We just hope you like it. =)
"Jumbo Share Counters" plugin will tremendously help you boost your social shares and referral traffic. It will surely improve your social media optimization strategy and will positively affect your search ranking thanks to its lightweight and better performance.
Do let me know if you need any help with regard to any part of this introductory tutorial. We are always open to constructive feedback to further improve and keep developing JSC plugin. Peace and blessings buddies!
No comments:
Post a Comment