Introducing "Jumbo Share Counters" Plugin


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.

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: (use the working link only)

  1. http://new-counters.rhcloud.com/   Working!
  2. https://social-shares.herokuapp.com/  Facebook not working!
  3. http://share-counters.rhcloud.com/  Facebook not working!
  4. 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://new-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:

  1. Facebook
  2. GooglePlus +1
  3. Twitter - Will not display the tweet count because twitter abandoned their counts API
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Delicious
  8. Reddit
  9. Buffer
  10. vk
  11. Viber - Will automatically display in mobile devices
  12. Whatsapp - Auto displayed in mobile devices
  13. 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 BarThis 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.

UPDATE:

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.

UPDATE:

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 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://new-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.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

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:

  1. 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.
  2. 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 

© 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!

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

17 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Wow....really nice plugin brother. Especially the that, when the floating widget hide after the post scrolled. I have seen this in WordPress but not on Blogger.

    Thanks a lot. :)

    ReplyDelete
    Replies
    1. Thank you dear shivansh for the kind feedback. I will share the script which we wrote for this widget. It helps you to stick a div section upon mouse scroll. It is indeed a helpful script which will display the floating bar at your specified locations only.

      You are most welcome! =)

      Delete
  2. Great One Mohammad. Looking forward to use it.

    Thanks!

    ReplyDelete
    Replies
    1. I will make sure I publish the HTML within next 24 hours. Thank you for finding it useful dear Devang =)

      Delete
  3. AoA Mustafa Bhai =),
    First of All Congratulations (y) and Thank You for creating and sharing this amazing widget =) even i was searching from last 1 or may be from 2 months for free social widget but unfortunately didn't find... and finally i found it on MBT =D
    Thank You Thank You Sooooo Much Mustafa Bhai :)
    Love, Respect and Hug for you Bhai :)
    God Bless you

    ReplyDelete
    Replies
    1. W.salam dear Abid!

      Thank you for this precious comment. Surely I have no words to thank you enough. That is the sole reason of our motivation. Thank you for finding it so useful buddy.

      The coming tutorials will be even more helpful. =)

      Delete
  4. Wow ! Really Nice Plugin Brother, Thanks for Sharing.

    ReplyDelete
  5. Hi,

    Brother can you please share tutorial on how to add the new WebPage Structered data or Blogposting structured data you have on your blog please I hve been searching whole google cant find a tutorial on blogger.

    I will appreciate it a lot please thanks.

    ReplyDelete
    Replies
    1. I will surely write a detailed tutorial on schema tags buddy where all rich snippets tags will be discussed including blog posting mircodata tags.

      Thank you for reminding =)

      Delete
  6. You are awesome as ussual, Brother.. Alhamdulillaah

    ReplyDelete
  7. Sorry but I do not understand, how to install JSC Floating Social Sharing Bar;

    ReplyDelete
  8. Good work,I just want to enquire that are they hosted on paid storage at openshift by red hat or otherwise they will truncate the service if traffic is high or processing in this case.

    Thanks for developing these.

    ReplyDelete
  9. salam mohammad
    ca marche bien pour moi merci juste une question comment je peut afficher ce plugin dans les pages blogger est non les article, et comment avoire les deux floating et horizontal comme votre blogg bon courage

    ReplyDelete
  10. Mohammad, I want your help, i installed with success the Jumbo Share Counters but not working the animation effects with the count like I see on your website.


    thanks

    ReplyDelete
  11. bro i installed everything correctly... in fact it was working fine till yesterday... but it's not showing the shared count now... for cross checking i shared my post but then too it didn't added up share count. Please check out what's the issue...??

    Blog URL: http://www.cafe4everyone.com/

    ReplyDelete
    Replies
    1. Bro i changed the hosted address and it started working. BDW thanks for approving the comments.

      BDW i have posted another issue on your forum but no one responded till yet. Hope u'll help me out there.

      Posting the url of tha post in ur forum...!!

      http://ask.mybloggertricks.com/t/how-to-fix-duplicate-meta-tags-and-title-tags/5932

      n i have dedicated a post for ur website in my website... hope u'll like it...!!

      http://www.cafe4everyone.com/2016/07/appreciate-good-work-my-blogger-tricks.html

      Delete