WordPress: Jumbo Share Counters Plugin

This tutorial will help you install Jumbo Share Counters Plugin on your WordPress sites and blogs. Jumbo Share Counters  (JSC) as you all know is a free cloud hosted social sharing plugin, which is the best alternative to official social media buttons. JSC buttons are mobile responsive, lightening fast, looks original in design and can be installed on all CMS platforms. Our plugin is free of cost and contains no copyrights backlinks. We are distributing it for free for the love of knowledge and community care.

JumboShare Counters Plugin For WordPress

Before we begin, kindly first install the necessary code which makes JSC plugin function by reading the tutorial below:

DEMO (Scroll to the bottom of post)

Before Expanding:

JumboShare Counter Plugin

After Expanding:

JumboShare Counters Plugin

Adding sharing buttons below post titles or at post footer are best locations to increase your social shares and social media referral traffic. You can now easily add branded sharing buttons in your wordPress themes at the bottom of blog posts without paying a penny. It is far more advanced than AddThis's Jumbo Share Counter plugin which costs $10/month!

JSC Horizontal Sharing Bar by default includes the following 10 popular share buttons:

  1. Facebook
  2. GooglePlus +1
  3. Twitter
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Buffer
  8. Viber
  9. Whatsapp
  10. Print

The following features makes it the most advanced sharing plugin:

  • Mobile responsive,
  • SEO friendly,
  • Lightweight & Lightening fast,
  • Animated number counter on scroll,
  • Natural in design
  • Customizable
  • Expand/Collapse option
  • Hosted on cloud servers 
  • No copyright links
  • Free of cost!

We have both Horizontal and Vertical Sharing bars in stake. Today we will learn how to install the Horizontal Jumbo Sharing bar in your Wordpress themes and later in our next tutorial we will also discuss how to install the vertical jumbo sharing bar in WordPress.

Lets get to work now!

Install Horizontal Jumbo Sharing bar in WordPress

Adding plugins in WordPress themes often require the use of hooks i.e. Actions and Filters. If you are using Genesis or Thesis frameworks then you can easily add the JSC plugin in any location you want but to make sure we keep the installation steps as simple as possible, I will share a standard method that will work on all frameworks.

NOTE:
Please Keep your FileZilla FTP connected, you may need it to restore function.php file if in case something goes wrong.

1. Go to your WordPress Dashboard > Appearance > Editor

2. Choose the stylesheet file i.e. style.css and paste the following CSS code at the bottom of style.css


/* ##### FREE JUMBO SHARE COUNTERS ####### */
#MBTshares-wrap{margin:20px 0px;overflow:hidden; border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;}
#MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em!important;}
#horiz{position:relative; padding:0; margin:0;}
#horiz #MBTshares{position:relative;top:-8px; padding-top:20px;}
#MBTshares a:hover{text-decoration:none!important;}


/***Facebook***/
.mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
.mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;}

/***Gplus, Pinit, Stumbleupon***/
.mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);background-color:#FFF;background-image:none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap}
.mbt-gp:hover, .mbt-gp:visited{color:#262626!important;}
#MBTshares .pinit{background:#f9f9f9!important}
#MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}
.mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}
#MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }


/***LinkedIn***/
.mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.mbt-linkedin{padding:0 5px 0 1px}
}

.mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}
.mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px}

/**Twtter, Print, Whatsapp, viber**/
.mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF!important;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box}
.mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF}
.mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}
.mbt-o{max-width:100%}
.mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top}
.label {margin-left: -1px !important;}
.mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:5px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px; }
#MBTshares .printme {background-color:#333;}
#MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000}
#MBTshares .whatsapp{background-color:#73D40B;}
#MBTshares .whatsapp i{font-size:15px!important;}
#MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09}
#MBTshares .viber{background-color:#7b519d;}
#MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa}
#MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }

#mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#mbtcount:hover{text-decoration:none}
#MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#MBTshares .ext{min-height:18px!important}
#MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
.share-btn{position:relative;display:inline-block}
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;}
.share-btn .h4{font-size:12px;font-family:arial}

/*#########Floating Counter Styles###########*/
.mbt-vertical{max-width:60px!important;margin:0 0 0 -83px!important;border:1px solid #f3f3f3!important;padding:3px 6px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px solid #fff!important;}
.mbt-vertical #MBTshares{display:block;width:60px;margin:7px 0!important}
.tcount{margin:0 10px 0 0;text-align:center;min-width:60px;border-right:3px solid #73D40B;padding:0 15px 0 10px}
.mbt-vertical .tcount{border-right:0;padding:0;text-align:center;height:auto}
.tcount .h2{font-size:29px;padding-bottom:5px}
.tcount .h4,.mbt-vertical .tcount .h4{font-size:12px;padding-bottom:5px;border-radius:0}
.mbt-vertical .tcount .h4{border-bottom:3px solid #73D40B}
.mbt-vertical .mbt-o,.mbt-vertical .mbtcount-o,.mbt-vertical .mbt-fb,.mbt-vertical .mbt-gp,.mbt-vertical .mbt-tw,.mbt-vertical #mbtcount{display:block}
.mbt-vertical .mbtcount-o{margin-bottom:7px;margin-left:0;height:30px}
.mbt-vertical #mbtcount{padding:7px 0 0;font-size:15px;color:#666}
.arrow-v{bottom:-8px;height:7px;left:25px;position:absolute;width:0;z-index:2}
.arrow-v s,.arrow-v i{border-color:#e7e7e7 transparent transparent;border-style:solid;border-width:5px;display:block;position:relative}
.arrow-v i{border-top-color:#FFF;left:0;top:-12px}

/*#########Vertical Counter Switch###########*/
.switchoff{display:none}
.mbtswitch{padding:0 16px;margin:0 0 5px;display:block;max-width:60px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch:hover{color:#73D40B}
.mbtswitch i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}


/*#########Horizontal Counter Switch###########*/
.switchoff2{display:inline-block;}
.mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch2:hover{color:#73D40B}
.mbtswitch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch2 i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}
@media only screen and (max-width:230px) {
.tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;}
#horiz #MBTshares {width: 100%;}
}

The stylesheet above can easily be customized if you wish. To change the green font color of the JumboShare count kindly edit #73D40B

3. Click Update file

4. Choose "Theme Functions" file also known as functions.php

5. At the bottom of this file, paste the following Code:

//Jumbo Share Counters Plugin
function jumbo_shares_after_post($content){
if (is_single()) {   
    $content .= '
<div id="MBTshares-wrap">

<!--TOTAL-->
<div class="share-btn tcount" data-service="total">
        <div class="count h2 anim"></div>
        <div class="h4">SHARES</div>
</div>
<span id="horiz">
<!--FACEBOOK -->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="http://www.facebook.com/sharer.php?u='.get_permalink( $post->ID).'&amp;t='.get_the_title( $post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" target="_blank" title="Share on Facebook!" class="mbt-fb"><i class="fa fa-facebook"></i><span class="label">Share</span></a>
</div>
<div class="mbtcount-o" >
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="facebook">
<span id="mbtcount" class="count anim"></span></span>
</div>
</div>

<!--GOOGLE PLUS-->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="https://plus.google.com/share?url='.get_permalink( $post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" target="_blank" title="Share on Google Plus!" class="mbt-gp"><i class="fa fa-google-plus"></i><span class="label">Share</span></a>
</div>
<div class="mbtcount-o ext" >
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="google">
<span id="mbtcount" class="count anim"></span></span>
</div>
</div>

<!--TWITTER-->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="http://twitter.com/home/?status='.get_the_title( $post->ID).' - '.get_permalink( $post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" target="_blank" title="Share on Twitter!" class="mbt-tw"><i class="fa fa-twitter"></i><span class="label">Tweet</span></a>
</div>
</div>

<!--PINTEREST-->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="http://pinterest.com/pin/create/button/?url='.get_permalink( $post->ID).'&media='.wp_get_attachment_url( get_post_thumbnail_id($post->ID) ).'&description='.get_the_title($post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;"  target="_blank" title="Pin it!" class="mbt-gp pinit"><i class="fa fa-pinterest"></i><span class="label">Pin it</span></a>
</div>
<div class="mbtcount-o ext" >
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="pinterest">
<span id="mbtcount" class="count anim"></span></span>
</div>
</div>
<div style="display:none;" class="switchoff2">
<!--STUMBLEUPON-->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url='.get_permalink( $post->ID).'&amp;title='.get_the_title( $post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" target="_blank" title="Stumble it!" class="mbt-gp stumb"><i class="fa fa-stumbleupon"></i><span class="label">Share</span></a>
</div>
<div class="mbtcount-o ext" >
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="stumbleupon">
<span id="mbtcount" class="count anim"></span></span>
</div>
</div>

<!--LINKEDIN-->
<div id="MBTshares"  >
<div class="mbt-o" >
<a rel="nofollow" href="http://www.linkedin.com/shareArticle?mini=true&amp;title='.get_the_title( $post->ID).'&amp;url='.get_permalink( $post->ID).'" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" target="_blank" title="Share on Linkedin!" class="mbt-linkedin"><span class="ibg"><i class="fa fa-linkedin"></i></span><span class="label">Share</span></a>
</div>
<div class="mbtcount-o ext" >
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="linkedin">
<span id="mbtcount" class="count anim"></span></span>
</div>
</div>

<!--BUFFER-->
<div id="MBTshares">
<div class="mbt-o">
<a class="mbt-gp" href="https://buffer.com/add?url='.get_permalink( $post->ID).'&picture='.wp_get_attachment_url( get_post_thumbnail_id($post->ID) ).'&text='.get_the_title( $post->ID).'&via=stc_network" onclick="window.open(this.href, \'sharer\', \'toolbar=0, scrollbars,status=0,  width=626,height=436\');  return false;" rel="nofollow" target="_blank" title="Share on Buffer!"><img class="bufferimg" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24J0qLODfMhr8gbOF2tYW-9XpDpi5uUzg1HT0Kgg1pNhsivM2dBzD2fHgAd2jzX44x62lp6v0cE-Pxiku2-5OG6YfdnGb5whWTGN_58OOKP1cxXaT0NjSHkYYU8ZtgkAPNqUY9Q3_99GL/s1600/logo-icon.png"/><span class="label">Buffer</span></a>
</div>
<div class="mbtcount-o ext">
<div class="arrow"><s></s><i></i></div>
<span class="share-btn" data-service="buffer">
<span class="count anim" id="mbtcount"></span></span>
</div>
</div>


<!-- VIBER -->
  <div id="MBTshares">
    <div class="mbt-o">
      <a class="mbt-tw viber" href="viber://forward?text='.get_the_title( $post->ID).' >> '.get_permalink( $post->ID).'"  rel="nofollow" target="_blank" title="Share on viber!"><img class="viberimg"       src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhxJEjgqSV07ZJPER9lWvi0oMROo7ItjFDCu3mrBCyuxfxYZOgcx4MZUHLS-fvmDtHxoZJE7PU1aPsjSH0i0JDuX8l_a5oqCdNKL-zcIa9cKwTkpYgFtpDSJ67-dDXA26WbeV_x6kbQvj/s1600/Icon_small.png"/><span       class="label">Share</span></a>
    </div>
  </div>

<!-- WHATSAPP -->
  <div id="MBTshares">
    <div class="mbt-o">
      <a class="mbt-tw whatsapp" href="whatsapp://send?text='.get_the_title( $post->ID).' >> '.get_permalink( $post->ID).'"  rel="nofollow" target="_blank" title="Share on whatsapp!"><i class="fa fa-whatsapp"></i>      <span class="label">SMS</span></a>
    </div>
  </div>
  <!-- PRINT -->
  <div id="MBTshares">
    <div class="mbt-o">
      <a class="mbt-tw printme" href="javascript:window.print()" rel="nofollow" target="_blank" title="Print this page!">
      <i class="fa fa-print"></i><span class="label">Print</span></a>
    </div>
  </div>

</div> <!--switchoff-->

<span class="mbtswitch2"><i class="active"></i></span>
</span>
</div>';
}
    return $content;
}

add_filter( "the_content", "jumbo_shares_after_post" );

Replace stc_network with your twitter handle/username.

6. Click Update File to save all your settings. All done! =)

You have now successfully placed the Jumbo Share Counters at the bottom of your blog posts only. The sharing bar will not display on your homepage, archives or pages but will display only on your blog posts. Visit your blog to see it working just fine. You can now safely remove any slow-loading social media plugin that you may be using because JSC is all that you need now.

If you are looking for a BlogSpot Widget for this plugin, please read the following tutorial:

Have questions on WordPress Jumbo Share Counters?

Feel free to ask for any help needed. I would love to answer all your queries. If you wish to locate the sharing bar below WordPress post titles or on any other location, feel confident to post your queries. In our coming tutorials we will publish tutorials on how to add vertical Jumbo Sharing bar in WordPress and BlogSpot blogs. I just hope this plugin may engage your visitors more on your site and help you with a major boost in referral traffic. Peace and blessings buddies! =)

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 »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. nice post.......mera ek sawal h app sy kia google adsense bnaty wqt payee name cnic k mutabiq na likho short lik do lekin pta baad mn chle k name to pora likhna tha kia ab pin issue s phle or 10 dollar s phle payee name change kr skta hu in pakistan???abhe pin issue nhe hoa aur 10 dollar bhe poray nhe hoay hn..mgr name short likha gea h pta nhe tha kia change kr skta hu???mtlb complete name likh skta hun?

    ReplyDelete
    Replies
    1. Of course you can change your name anytime you want in AdSense Settings. Your name must match the name on your national Id card.

      Delete
  2. Assalam-O-Alaikum!
    It's a nice plugin indeed. I want to ask you that how do I install the jquery part just above </body> in Genesis Child Theme. I have added it using Genesis' Theme Settings but unfortunately it's not working (Counter and Animation effects are not working). Waiting for your reply.
    Regards
    Usama Fayyaz.

    ReplyDelete
    Replies
    1. W.salam buddy

      For Gensis install the simple hooks plugin buddy. It will give easy access to different locations/filters of your blog.

      Delete
    2. @Mohammad
      I have also tried using Simple hooks plugin but still the widget was not working. I don't know what's the problem but I have figured out the solution.
      Firstly,in jQuery code I replaced all '$' sign with 'jQuery' and made a separate .js file. Then I imported that file using wp_enqueue_script function. I added rest of the jQuery (Plugin settings and Animation Setting) in genesis theme settings under footer scripts. Followed rest of the tutorial and widget started working. Thanks for this brilliant widget.

      Delete
    3. For Wordpress user's i convert this in to wp plugin just install and activate :-) Download plugin

      plugin repository - https://github.com/mskian/MBT-Horizontal-Jumbo-Share-Counters-Plugin-for-Wordpress

      Delete
  3. AoA Mustafa Bhai :)
    Thank you so much Mustafa Bhai :)

    ReplyDelete
    Replies
    1. W.salam abid!

      Buddy do install this plugin and let me know. =)

      About your blog post, buddy please remind me on monday by shooting me an email.

      Delete
    2. Mustafa Bhai Social Share count is not working :(
      please check :)

      Delete
    3. Mustafa Bhai Social Share count is not working :(
      please check :)

      Delete
    4. Now Working Perfectly Check :) >>
      http://acupofblog.com
      No Doubt Best social sharing plugin for wordpress (y)

      Delete
  4. Lookin cool widget i have installed it on my blog https://aoablogger.blogspot.com

    ReplyDelete
  5. it supports site specific plugin ??

    ReplyDelete
  6. hello Mustafa bro. jab ma akhri code functions.php ma add krta houn tu bottons posts ma shown nhi hota oor logo ka uppar show hota ha,Plz Help i am waiting for reply...

    ReplyDelete
  7. For Wordpress user's i convert this in to wp plugin just install and activate :-) Download plugin

    plugin repository - https://github.com/mskian/MBT-Horizontal-Jumbo-Share-Counters-Plugin-for-Wordpress

    thanks to Mohammad Mustafa Ahmedzai
    Santhoshveer Allwebtuts.com

    ReplyDelete