Introducing "Jumbo Share Counters" Plugin

Posted: 29 Feb 2016 09:57 AM PST

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. =)

Jumbo Share Counters

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

https://social-shares.herokuapp.com/
http://share-counters.rhcloud.com/

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://share-counters.rhcloud.com/?url=http://www.google.com

You 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:

Facebook
GooglePlus +1
Twitter - Will not display the tweet count because twitter abandoned their counts API
LinkedIn
Pinterest
StumbleUpon
Delicious
Reddit
Buffer
vk
Viber - Will automatically display in mobile devices
Whatsapp - Auto displayed in mobile devices
Print

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

Floating Social Sharing Bar This widget floats to the left or right of your blog posts thus grabbing maximum reader attention to promote more likes, tweets and shares. It has a maximum CTR and visitors on our blog tend to share more using this design model for share buttons.

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

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.

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.

Horizontal Sharing Bar in Mobile view

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 JS code just above </body> tag of your template

<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://share-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 "http://share-counters.rhcloud.com" with 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

2 In the above code replace the line "ADD CODE HERE" with this code

3 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:

Creative Commons License

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. Source: https://github.com/bfintal/Counter-Up

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!