Thursday, March 31, 2016

WordPress Floating Sharing Bar With Animation

WordPress Floating Sharing Bar With Animation

Link to My Blogger Tricks

WordPress Floating Sharing Bar With Animation

Posted: 31 Mar 2016 06:41 AM PDT

Today we will discuss how to install Jumbo Share Counters [Floating Sharing bar] in WordPress themes. We already discussed the installation steps of floating sharing bar for BlogSpot Blogs and today we will share the PHP script for WordPress blogs that will help you display animated sharing counters for popular social media networks. The sharing bar can easily be aligned to the left or right of your blog posts. It will show only when the user scrolls down the page and will disappear the moment user scrolls to comment section of your blog. This technique immensely increases user engagement  and social shares of your content thus leading to a much better referral traffic. The plugin loads extremely fast and is built with Pure CSS, HTML and JavaScript with slight support for PHP to fetch the JSON share counts through Donreach sharing count API.

Floating Sharing Bar For WordPress themes

Before we could begin, you must first install JSC plugin in your WordPress blogs by following the steps mentioned in this tutorial:

DEMO (Scroll down for bar to appear)

JSC WordPress plugin by default includes the following 8 popular share buttons:

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

The viber and whatsapp share buttons will display only in mobile devices such as smartphones inside Horizontal sharing bar and not inside Floating sharing bar. These two buttons allow users to share your blog posts with their viber and whatsapp contacts, therefore they make sense only for mobile devices and not for desktop users.

Before Expanding:

WordPress Floating Sharing Bar - Collapsed

Make sure you add both the horizontal and floating sharing bars for maximum social share impact. By default the Horizontal counter will display on both desktop and mobile devices but the floating counters will display only in desktop screens. This is a standard way to display sharing bars.

JSC Floating Sharing Bar is the most advanced PHP driven FREE sharing plugin built for Blogger templates, WordPress themes (and other platforms) that works perfectly with all CMS platforms. You can now easily add branded sharing buttons in your wordPress themes without paying a penny. It is far more advanced than AddThis's Jumbo Share Counter plugin which costs $10/month!

After Expanding:

WordPress Floating Sharing Bar - Expanded

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!

Lets get straight to work!

Install Floating Jumbo Sharing bar in WordPress

Follow these easy steps:

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

(PS: If you have already added Horizontal Sharing bar inside your themes then please update that CSS code with this updated one)

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

/* ##### 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 -98px!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%;}
}

@media only screen and (max-width:500px) {
.mbt-vertical{display:none;} }

Customization:

  • If you wish to float the sharing bar to the right side of your blog post then simply replace float: left; with float: right;
  • To adjust the position of the sharing bar play with its margin values by editing margin:0 0 0 -98px
  • To decide at what position (how high/up) you wish to locate the widget from the base of the browser then edit bottom: 7%;
  • To change the green font color of the Jumbo Share 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_floating($content){

if (is_single()) {   

    $content .= '
<div class="mbt-vertical" id="MBTshares-wrap" style="display:none;">

<!--TOTAL-->

<div class="share-btn tcount" data-service="total">
<div class="count h2 anim"></div>
<div class="h4">SHARES</div>
</div>

<!--FACEBOOK -->

<div id="MBTshares"  >
<div class="mbtcount-o" >
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="facebook">
<span id="mbtcount" class="count anim"></span></span>
</div>
<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>

<!--GOOGLE PLUS-->

<div id="MBTshares"  >
<div class="mbtcount-o" >
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="google">
<span id="mbtcount" class="count anim"></span></span>
</div>
<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>

<!--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="mbtcount-o" >
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="pinterest">
<span id="mbtcount" class="count anim"></span></span>
</div>
<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>

<div style="display:none;" class="switchoff">

<!--STUMBLEUPON-->

<div id="MBTshares"  >
<div class="mbtcount-o" >
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="stumbleupon">
<span id="mbtcount" class="count anim"></span></span>
</div>
<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>

<!--LINKEDIN-->

<div id="MBTshares"  >
<div class="mbtcount-o" >
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="linkedin">
<span id="mbtcount" class="count anim"></span></span>
</div>
<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>

<!--BUFFER-->

<div id="MBTshares">
<div class="mbtcount-o">
<div class="arrow-v"><s></s><i></i></div>
<span class="share-btn" data-service="buffer">
<span class="count anim" id="mbtcount"></span></span>
</div>
<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/AVvXsEjmx9CnsDCCoCECm0znvN4iqYTyBlrsAceIcujSXdkuaua6diaXy9K-7B1c7GWniLkSNstRjkZ4a8EWnc0RBEsRRR49NjQ4OkgHrkNGMQe-oXyjzadLbimTOU9aE2vx6qUNTVXrOB9_4xMs/s1600/logo-icon.png"/><span class="label">Buffer</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="mbtswitch"><i class="active"></i></span>
</div>';
}
    return $content;
}

add_filter( "the_content", "jumbo_shares_floating" );

Customization Guide:

  • All button locations are labeled for easy readability. You can easily change/swap the locations of button within the widget.
  • Replace stc_network with your twitter username/handle
  • All buttons inside the purple highlighted tags will remain hidden when page loads and will be displayed only when the user clicks the +/- switch button. Buttons will display using this toggle button which we named the switch.
  • If you wish to add more buttons inside the switch then simply copy its code and paste it inside the purple switch tags.
  • To remove buttons from inside the switch, simply copy the button's code and paste it above the switch tag i.e. <div style="display:none;" class='switchoff'>

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

Note: You wont be able to see the widget working without the steps discussed below. So you must also add the code shared below.

Fade In and Fade Out the Sharing bar

The floating sharing bar is invisible when a user lands on any of your page. It is displayed only when the user scrolls down, it will be shown as long as the user does not reach the comment section. In short the widget will be visible only next to the post content and not below it. This gives a professional touch to the plugin that is often adopted by leading corporate blogs.

7Add the code below just above </head> inside your theme:

<script type='text/javascript'>
// <![CDATA[
// Show hide Jumbo Share Counter
$(document).ready(function () {
var stickElement = $('.mbt-vertical'),
hideTrigger = $('#comments'),
top = stickElement.offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = hideTrigger.offset().top;
if (y < maxY) {
$('.mbt-vertical').fadeIn();
} else {
$('.mbt-vertical').fadeOut();
}});});
// ]]>
</script>
</b:if>
</b:if>

Make these changes if needed:

  • WordPress comment section contains this ID: #comments
  • The Sharing bar will fade out as soon as it reaches this section. You can use any class or ID you want before which you wish the sharing bar to disappear.

8 Save your settings and you are all done! =)

Need Help?

Feel free to post your queries below, I would love to help as soon as time allows. Jumbo Share counters have really increased our blog speed and referral traffic. I wish it helps you out as well and multiplies your traffic threefold. Peace and blessings buddies. =)

Tuesday, March 22, 2016

Jumbo Share Counters - Floating Social Sharing Bar

Jumbo Share Counters - Floating Social Sharing Bar

Link to My Blogger Tricks

Jumbo Share Counters - Floating Social Sharing Bar

Posted: 21 Mar 2016 12:03 PM PDT

Displaying a Vertical Floating Social Sharing Bar on your websites and blogs is the best way to increase social shares on desktop screens and increase your referral traffic from social media networks. Official social sharing buttons are extremely slow in loading and really effects webpage load time. Thanks to  "Jumbo Share Counters (JSC)" Plugin, now you can create both Horizontal and Vertical sharing bars without compromising the load time. The floating bar will display only when you user scrolls down the page and will disappear the moment user scrolls to comment section of the blog. This technique significantly increases user engagement in your content. If you wish you can surely display the sharing bar even next to the comment section. In todays' tutorial we will discuss how to install JSC plugin in Blogger blogs, in our next tutorial we will share the scripts for WordPress blogs.

Floating Sharing Bar For Blogger blogs

Before we could begin, you must first install JSC plugin in your BlogSpot blogs by following the steps mentioned in this tutorial:

JSC blogger widget by default includes the following 8 popular share buttons:

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

The viber and whatsapp share buttons will display only in mobile devices such as smartphones inside Horizontal sharing bar and not inside Floating sharing bar. These two buttons allow users to share your blog posts with their viber and whatsapp contacts, therefore they make sense only for mobile devices and not for desktop users. I have therefore not added these buttons inside the Floating sharing bar which will display only in Desktop devices and tablets. But in case you want to display viber and whatsapp sharing buttons in desktop screens also then you can request me by posting your comments, I will make the necessary edits in the code below.

Floating Social Sharing Bar Collapsed

We are using IsMobileRequest condition to allow this sharing bar to display only Desktop devices and tablets unlike CSS display:none which only disappears the HTML DOM but does not prevent the script from loading. IsMobileRequest Condition will prevent the widget from loading at server side thus increasing your blog load time in mobile devices. For mobile devices only "Horizontal sharing bar" will display. Make sure you add both the horizontal and floating sharing bars for maximum social share impact.

JSC Floating Sharing Bar is the most advanced PHP driven FREE sharing plugin built for Blogspot templates, WordPress themes (and other platforms) that works perfectly in both custom templates and responsive blogger templates.

Floating Social Sharing Bar Expanded

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 
  • Free of cost!

Lets get straight to coding!

Add JSC Floating Sharing bar in Blogger Template

Follow these easy steps:

1 Go To Blogger > Templates > Backup your template

2 Click Edit HTML

3Search for ]]></b:skin> and paste the following CSS code just above ]]></b:skin>

Note:
Skip adding this step if you have already added Horizontal Sharing bar in your templates. This code is the same that we shared earlier in step#3 of Horizontal Sharing bar plugin tutorial.

/* ##### FREE JUMBO SHARE COUNTERS ####### */
#MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;
padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#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:2px;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%;}
}

Customization:

  • If you wish to float the sharing bar to the right side of your blog post then simply replace float: left; with float: right;
  • To adjust the position of the widget play with its margin values by editing margin:0 0 0 -83px
  • To decide at what position (how high/up) you wish to locate the widget from the base of the browser then edit bottom: 7%;
  • To change the green font color of the Jumbo Share count kindly edit #73D40B

4 Next search for  <b:includable id='post' var='post'> 

Just below this code paste the following HTML code:     

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='mbt-vertical' id='MBTshares-wrap' style='display:none;'>
<!--TOTAL-->
<div class='share-btn tcount' data-service='total'>
<div class='count h2 anim'/>
<span class='prefix'/>
<div class='h4'>SHARES</div></div>
<!--FACEBOOK-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='facebook'>
<span class='count anim' id='mbtcount'/></span>
<div class='arrow-v'><s/><i/></div></div>
<div class='mbt-o'>
<a class='mbt-fb' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,scrollbars, width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'>
<i class='fa fa-facebook'/><span class='label'>Share</span></a></div></div>
<!--GOOGLE PLUS-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='google'>
<span class='count anim' id='mbtcount'/><span class='prefix'/></span>
<div class='arrow-v'><s/><i/></div></div>
<div class='mbt-o'><a class='mbt-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,scrollbars,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'>
<i class='fa fa-google-plus'/><span class='label'>Share</span></a></div></div>
<!--TWITTER-->
<div id='MBTshares'><div class='mbt-o'>
<a class='mbt-tw' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'>
<i class='fa fa-twitter'/><span class='label'>Tweet</span></a></div></div>

<div class='switchoff'>
<!--STUMBLEUPON-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='stumbleupon'>
<span class='count anim' id='mbtcount'/><span class='prefix'/></span>
<div class='arrow-v'><s/><i/></div></div>
<div class='mbt-o'>
<a class='mbt-gp stumb' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,scrollbars,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Stumble it!'>
<i class='fa fa-stumbleupon'/><span class='label'>Share</span></a></div></div>
<!--LINKEDIN-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='linkedin'>
<span class='count anim' id='mbtcount'/><span class='prefix'/></span>
<div class='arrow-v'><s/><i/></div></div>
<div class='mbt-o'>
<a class='mbt-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,scrollbars,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'>
<span class='ibg'><i class='fa fa-linkedin'/></span>
<span class='label'>Share</span></a></div></div>
<!--PINTEREST-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='pinterest'>
<span class='count anim' id='mbtcount'/><span class='prefix'/></span><div class='arrow-v'>
<s/><i/></div></div>
<div class='mbt-o'>
<a class='mbt-gp pinit' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,scrollbars,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Pin it!'>
<i class='fa fa-pinterest'/>
<span class='label'>Pin it</span></a></div></div>
<!--BUFFER-->
<div id='MBTshares'>
<div class='mbtcount-o'>
<span class='share-btn' data-service='buffer'>
<span class='count anim' id='mbtcount'/><span class='prefix'/></span>
<div class='arrow-v'><s/><i/></div></div>
<div class='mbt-o'>
<a class='mbt-gp' expr:href='&quot;https://buffer.com/add?url=&quot; + data:post.url + &quot;&amp;picture=&quot; + data:post.thumbnailUrl + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=stc_network&quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmx9CnsDCCoCECm0znvN4iqYTyBlrsAceIcujSXdkuaua6diaXy9K-7B1c7GWniLkSNstRjkZ4a8EWnc0RBEsRRR49NjQ4OkgHrkNGMQe-oXyjzadLbimTOU9aE2vx6qUNTVXrOB9_4xMs/s1600/logo-icon.png'/><span class='label'>Buffer</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'/><span class='label'>Print</span></a>
</div></div></div><!--switchoff-->
<span class='mbtswitch'><i class='active'/></span>
</div>
</b:if>
</b:if>
</b:if>
                

Customization Guide:

  • All button locations are labeled for easy readability. You can easily change/swap the locations of button within the widget.
  • Replace stc_network with your twitter username/handle
  • All buttons inside the purple highlighted tags will remain hidden when page loads and will be displayed only when the user clicks the +/- switch button. Buttons will display using this toggle button which we named the switch.
  • If you wish to add more buttons inside the switch then simply copy its code and paste it inside the purple switch tags.
  • To remove buttons from inside the switch, simply copy the button's code and paste it above the switch tag i.e. <div class='switchoff'>

5 Save your template and you are almost done!

Note: You wont be able to see the widget working without the step discussed below. So you must also add the code shared below.

Fade In and Fade Out the Sharing bar

If you observe carefully, you will notice that the sharing bar is invisible when a user lands on any of your page. It is displayed the moment user scrolls down, it will be shown as long as the user does not reach the comment section. In short the widget will be visible only next to the post content and not above or below it. This gives a professional touch to the widget that is often adopted by leading corporate blogs. We implemented the same technique in blogger.

6Add the code below just above </head> inside your template:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// <![CDATA[
// Show hide Jumbo Share Counter
$(document).ready(function () {
var stickElement = $('.mbt-vertical'),
hideTrigger = $('.post-footer'),
top = stickElement.offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = hideTrigger.offset().top;
if (y < maxY) {
$('.mbt-vertical').fadeIn();
} else {
$('.mbt-vertical').fadeOut();
}});});
// ]]>
</script>
</b:if>
</b:if>

Make these changes if needed:

  • In most blogger templates the blog post bottom section contains this class: .post-footer
  • The Sharing bar will fade out as soon as it reaches this class. You can use any class you want before which you wish the sharing bar to disappear.
  • If your template does not contain this class and you can not find one then inform me by commenting below, I will review your template and pick an alternative class that may work in your case.

7 Save your template and you are all done! =)

Need Help?

Let me know if you need any help. Feel free to post your queries below, I would love to help as soon as time allows. Jumbo Share counters have really increased our blog speed and referral traffic. I wish it helps you out as well and multiplies your traffic threefold. What ones cost $10/mon is now available for free, so don't delay trying it out. Peace and blessings buddies. =)

Wednesday, March 16, 2016

WordPress: Jumbo Share Counters Plugin

WordPress: Jumbo Share Counters Plugin

Link to My Blogger Tricks

WordPress: Jumbo Share Counters Plugin

Posted: 16 Mar 2016 04:49 AM PDT

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:4px;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}
.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{display:none; 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/AVvXsEjmx9CnsDCCoCECm0znvN4iqYTyBlrsAceIcujSXdkuaua6diaXy9K-7B1c7GWniLkSNstRjkZ4a8EWnc0RBEsRRR49NjQ4OkgHrkNGMQe-oXyjzadLbimTOU9aE2vx6qUNTVXrOB9_4xMs/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/AVvXsEg0BiuLS1sazdwuOAsKZlFIpBnz-wZ_nMc7NWUI_fLOaX-VtaZ-JJBvzwsJYc3tmXq_FSHZj4a0TvqBYfW7QEch20PYB0gL_SIs46cjjwTsuZalpJbpfdyofaAtwYnZtVaL8bxL-IPzsg_N/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! =)