Simple method Install WordPress Jumbo Share Counters Plugin on your wordpress website


#1

Plugin script installation - http://www.mybloggertricks.com/2016/02/jumbo-share-counters-plugin.html

Wordpress Horizontal share buttons http://www.mybloggertricks.com/2016/03/wordpress-jumbo-share-counters-plugin.html

Plugin requrd for this installation

before that open the orginal tuts in new page

Complete code will look like this

<?php
/*
Plugin Name: Jumbo Share Counters Plugin
Description: Light weighted responsive share buttons
*/
/* Start Adding Functions Below this Line */
//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://3.bp.blogspot.com/-eYyUk4KGuBg/Vs-oFm656VI/AAAAAAAAQfE/maUNyJ9PWqE/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://2.bp.blogspot.com/-Q4pj1x7tFUA/VtIrtKRuDPI/AAAAAAAAQfY/pYMexHW1HqY/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" );

/* Stop Adding Functions Below this Line */
?>

after that compressed into zip file and upload to the wordpress plugin directory that’s all successfully you install the Jumbo share buttons :grinning:

Now check your wordpress posts

100% tested Note it’s on;y for Horizontal share buttons http://www.mybloggertricks.com/2016/03/wordpress-jumbo-share-counters-plugin.html

@Mohammad


#2

Can You make a Simple Zip File Of This plugin Bcoz Its too Difficult For Follow All This Guides and The Plugins also not working properly.

i hv try all your steps but the counter looks something like this : http://prntscr.com/aqrcv5


#3

Install plugin code properly - http://www.mybloggertricks.com/2016/02/jumbo-share-counters-plugin.html

Plugin File

<?php
/*
Plugin Name: Jumbo Share Counters Plugin
Description: Light weighted responsive share buttons
*/
/* Start Adding Functions Below this Line */
//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://3.bp.blogspot.com/-eYyUk4KGuBg/Vs-oFm656VI/AAAAAAAAQfE/maUNyJ9PWqE/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://2.bp.blogspot.com/-Q4pj1x7tFUA/VtIrtKRuDPI/AAAAAAAAQfY/pYMexHW1HqY/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" );

/* Stop Adding Functions Below this Line */
?>

In Buffer button Replace stc_network with your twitter handle/username.

just copy th above plugin code and paste it on text editor save as jumbo.php after that convert this to compressed zip file now in Wordpress dashboard click add new plugin no You found the upload plugin option just upload the zip file and activate the plugin that’s all finally you install the jumbo share button on your WordPress site :slight_smile:


#4

@Mohammad little bug in the google + share counting in my Wordpress site for 1 google+ share it shows the 11 counting’s :confused: (In Wordpress site)


#5

Can we change social media icons with our own? How many external files it downloads during loading? Are social media icons in sprites or individual files?