How to Add Social Media Buttons to Blogger Posts? – Top/Bottom Location

In this tutorial you lot volition larn how to add social sharing buttons to each of your blogger posts. These responsive social sharing buttons volition stick to the top or bottom of every weblog post. It helps your weblog visitors to portion your content on social media networks without leaving your weblog page.

add social media buttons to blogger posts

This sharing gadget for blogspot blogs is a lightweight version of JumboShare Counter. I volition thence telephone telephone it JumboShare Simplified. It loads faster in addition to takes upward negligible charge time. Load fourth dimension is a major SEO constituent in addition to Google volition orbit you lot higher inward SERPs exclusively if your webpage loads faster in addition to provides a user friendly interface.

I direct keep created this lightweight sharing gadget past times aligning all major social media buttons within a horizontal row. Users tin give the sack toggle the gadget to expand or collapse the position out of sharing buttons displayed.    

This gadget includes the next social media buttons:

  1. Facebook
  2. GooglePlus +1
  3. Twitter
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Buffer
  8. ViberWill automatically display inward mobile devices
  9. WhatsappAuto displayed inward mobile devices
  10. Print

These buttons direct keep the exact same expect in addition to manner every bit their official counterparts. It uses the official stylesheet for Facebook, Google, Twitter in addition to the rest.

social sharing buttons for blogspot blogs

The viber in addition to whatsapp portion buttons volition display exclusively inward mobile devices such every bit smartphones. Your visitors tin give the sack instantly portion your weblog posts amongst their viber contacts in addition to whatsapp friends. I am using IsMobileRequest condition to permit these buttons to display exclusively smartphones instead of using CSS display:none.

You tin give the sack select to display this social sharing gadget exactly below weblog postal service title or you lot tin give the sack display it at the bottom of every weblog post. Lets acquire direct to work.

Note: If you lot are using Jumboshare counters plugin, in addition to then you lot volition ask to take them first.

Add Social Media Buttons To Blogger Posts

Follow these tardily steps:

  1. Go To Blogger > Theme > Backup your topic
  2. Click Edit HTML
  3. Search for ]]></b:skin> and glue the next CSS code exactly to a higher identify ]]></b:skin>

    /* ##### JumboShare Simplified ####### */
    #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;}
    #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;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;text-shadow:0 -1px 0 #354C8C;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);transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#FFF;background-image:none;border:medium none;border-radius:2px;border:1px company rgba(0,0,0,0.17);color:#262626;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 company #cde3ea}
    #MBTshares .stumb:hover{border:1px company #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 company 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 company #066094;color:#fff;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap}
    @media shroud in addition to (-webkit-min-device-pixel-ratio:0) {
    .mbt-linkedin{padding:0 5px 0 1px}
    }
    .mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px company #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 company #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;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}
    .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 company #e7e7e7;border-radius:2px;display:none!important; }
    #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; display:none!important;}
    .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}

    /*#########Horizontal 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 company #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 exclusively shroud in addition to (max-width:230px) {
    .tcount{border-bottom: 2px company #74D50C; border-right:none; min-width:100%;}
    #horiz #MBTshares {width: 100%;}

  4. Paste the next code exactly to a higher identify </head> within your template:

    (OPTIONAL STEP) Skip this mensuration if you lot direct keep already added JQuery in addition to FontAwesome libraries within your templates.

    <script async=” src=’https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’></script>
    <link href=’http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css’ rel=’stylesheet’/>

  5. Next add together the follow jQuery script exactly to a higher identify </body> tag

    <script type=’text/javascript’>
            //<![CDATA[
            /* ##### FREE JUMBOSHARE SIMPLIFIED #######
    Developed by: www..com
    Dual licensed nether the MIT license in addition to GPL license.
    Copyright (c) 2015-2016 STCnetwork.org
    */
    $(document).ready(function() {
    $(".mbtswitch").click(function(){$(".switchoff").slideToggle();if($(".mbtswitch i").attr("class")==="active"){$(".mbtswitch i").removeClass("active").addClass(‘inactive’)}else if($(".mbtswitch i").attr("class")==="inactive"){$(".mbtswitch i").removeClass("inactive").addClass(‘active’)}});

    $(".mbtswitch2").click(function(){$(".switchoff2").slideToggle();if($(".mbtswitch2 i").attr("class")==="active"){$(".mbtswitch2 i").removeClass("active").addClass(‘inactive’)}else if($(".mbtswitch2 i").attr("class")==="inactive"){$(".mbtswitch2 i").removeClass("inactive").addClass(‘active’)}});
    });
    //]]></script>

  6. Save your template.

Add Social Media Buttons at Top/Bottom Of Every Blog Post

add sharing buttons inward blogger

Follow these tardily steps to add together sharing buttons exactly below every weblog postal service championship or the postal service footer:

Inside your theme, search for  <data:post.body/> . This code is located twice, in i lawsuit for mobile stance in addition to in i lawsuit for desktop view. Therefore take in the minute appearance of <data:post.body/> only.

Note: If you lot desire to present this horizontal sharing bar below postal service titles, in addition to then glue the next HTML code exactly above <data:post.body/>   but if you lot wishing to display the sharing bar at bottom of each weblog postal service then glue the next HTML code exactly below <data:post.body/>

If you lot desire to display the sharing buttons both at transcend in addition to bottom of each weblog post, in addition to then glue the next HTML code in i lawsuit to a higher identify <data:post.body/> in addition to in i lawsuit below <data:post.body/>.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<div id=’MBTshares-wrap’>

<!–TOTAL–>
<div class=’share-btn tcount’ data-service=’total’>
        <div class=’count h2 anim’/>
        <div class=’h4′>SHARES</div>
</div>
<span id=’horiz’>

<!–FACEBOOK–>
<div id=’MBTshares’>
<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,scrollbars,status=0,width=626,height=436&apos;); render false;’ rel=’nofollow’ target=’_blank’ title=’Share on Facebook!’><i class=’fa fa-facebook’/><span class=’label’>Share</span></a>
</div>
<div class=’mbtcount-o’>
<div class=’arrow’><s/><i/></div>
<span class=’share-btn’ data-service=’facebook’>
<span class=’count anim’ id=’mbtcount’/></span>
</div>
</div>

<!–PINTEREST–>
<div id=’MBTshares’>
<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,scrollbars,status=0,width=626,height=436&apos;); render false;’ rel=’nofollow’ target=’_blank’ title=’Pin it!’><i class=’fa fa-pinterest’/><span class=’label’>Pin it</span></a>
</div>
<div class=’mbtcount-o ext’>
<div class=’arrow’><s/><i/></div>
<span class=’share-btn’ data-service=’pinterest’>
<span class=’count anim’ id=’mbtcount’/></span>
</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;); render false;’ rel=’nofollow’ target=’_blank’ title=’Share on Twitter!’><i class=’fa fa-twitter’/><span class=’label’>Tweet</span></a>
</div>
</div>

<!–LINKEDIN–>
<div id=’MBTshares’>
<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,scrollbars,status=0,width=626,height=436&apos;); render 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 class=’mbtcount-o ext’>
<div class=’arrow’><s/><i/></div>
<span class=’share-btn’ data-service=’linkedin’>
<span class=’count anim’ id=’mbtcount’/></span>
</div>
</div>

<!–GOOGLE PLUS–>
<div id=’MBTshares’>
<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,scrollbars,status=0,width=626,height=436&apos;); render false;’ rel=’nofollow’ target=’_blank’ title=’Share on Google Plus!’><i class=’fa fa-google-plus’/><span class=’label’>Share</span></a>
</div>
<div class=’mbtcount-o ext’>
<div class=’arrow’><s/><i/></div>
<span class=’share-btn’ data-service=’google’>
<span class=’count anim’ id=’mbtcount’/></span>
</div>
</div>

<!–STUMBLEUPON–>
<div id=’MBTshares’>
<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,scrollbars,status=0,width=626,height=436&apos;); render false;’ rel=’nofollow’ target=’_blank’ title=’Stumble it!’><i class=’fa fa-stumbleupon’/><span class=’label’>Share</span></a>
</div>
<div class=’mbtcount-o ext’>
<div class=’arrow’><s/><i/></div>
<span class=’share-btn’ data-service=’stumbleupon’>
<span class=’count anim’ id=’mbtcount’/></span>
</div>
</div>

<div class=’switchoff2′ style=’display:none;’>

<!–BUFFER–>
<div id=’MBTshares’>
<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;); render 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/><i/></div>
<span class=’share-btn’ data-service=’buffer’>
<span class=’count anim’ id=’mbtcount’/></span>
</div>
</div>
<b:if cond=’data:blog.isMobileRequest == &quot;true&quot;’>
<!– WHATSAPP –>

  <div id=’MBTshares’>
    <div class=’mbt-o’>
      <a class=’mbt-tw whatsapp’ expr:href=’&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url’ rel=’nofollow’ target=’_blank’ title=’Share on whatsapp!’><i class=’fa fa-whatsapp’/><span class=’label’>SMS</span></a>
    </div>
  </div>

<!– VIBER –>
  <div id=’MBTshares’>
    <div class=’mbt-o’>
      <a class=’mbt-tw viber’ expr:href=’&quot;viber://forward?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url’ 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>
</b:if>

<!– 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=’mbtswitch2′><i class=’active’/></span>
</span>
</div></b:if>

Customization Guide:

  • All push clit locations are labeled for tardily readability. You tin give the sack easily change/swap the locations of push clit within the widget.
  • Replace stc_network  amongst your buffer handle or profile username or but your weblog championship without spaces.
  • If you lot wishing to display a social media push clit inward mobile devices exclusively in addition to then glue its code within the yellow highlighted tags.
  • All buttons within the purple highlighted tags volition rest hidden when page loads in addition to volition survive displayed exclusively when the user clicks the +/- toggle button. Buttons volition display using this toggle push clit which nosotros named the switch.
  • If you lot wishing to add together to a greater extent than buttons within the switch in addition to then but re-create its code in addition to glue it within the majestic switch tags.
  • To take buttons from within the switch, but re-create the button’s code in addition to glue it to a higher identify the switch tag i.e. <div class='switchoff2' style='display:none;'>

Save your template in addition to you lot are all done!

Need Help inward Add Sharing buttons inward Blogger?

Let me know if you lot direct keep whatever queries. I would dear to respond all your questions. More interesting tutorials on its agency because I am dorsum to blogging. Peace buddies! =)