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

In this tutorial you will learn how to add social sharing buttons to each of your blogger posts . These responsive social sharing buttons wi...

In this tutorial you will learn how to add social sharing buttons to each of your blogger posts. These responsive social sharing buttons will stick to the top or bottom of every blog post. It helps your blog visitors to share your content on social media networks without leaving your blog page.



add social media buttons to blogger posts



This sharing gadget for blogspot blogs is a lightweight version of JumboShare Counter. I will thus call it JumboShare Simplified. It loads faster and takes up negligible load time. Load time is a major SEO factor and Google will rank you higher in SERPs only if your webpage loads faster and provides a user friendly interface.




I have created this lightweight sharing gadget by aligning all major social media buttons inside a horizontal row. Users can toggle the gadget to expand or collapse the number of sharing buttons displayed.    



This gadget includes the following social media buttons:




  1. Facebook


  2. GooglePlus +1


  3. Twitter


  4. LinkedIn


  5. Pinterest


  6. StumbleUpon


  7. Buffer


  8. Viber - Will automatically display in mobile devices


  9. Whatsapp - Auto displayed in mobile devices


  10. Print



These buttons have the exact same look and style as their official counterparts. It uses the official stylesheet for Facebook, Google, Twitter and the rest.



social sharing buttons for blogspot blogs



The viber and whatsapp share buttons will display only in mobile devices such as smartphones. Your visitors can now share your blog posts with their viber contacts and whatsapp friends. I am using IsMobileRequest condition to allow these buttons to display only smartphones instead of using CSS display:none.



You can choose to display this social sharing gadget just below blog post title or you can display it at the bottom of every blog post. Lets get straight to work.



Note: If you are using Jumboshare counters plugin, then you will need to remove them first.


Add Social Media Buttons To Blogger Posts



Follow these easy steps:




  1. Go To Blogger > Theme > Backup your theme


  2. Click Edit HTML


  3. Search for ]]></b:skin> and paste the following CSS code just above ]]></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 solid 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 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;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;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 solid #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 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%;}





  4. Paste the following code just above </head> inside your template:

    (OPTIONAL STEP) Skip this step if you have already added JQuery and FontAwesome libraries inside your templates.




    <script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>






  5. Next add the follow jQuery script just above </body> tag




    <script type='text/javascript'>

            //<![CDATA[


            /* ##### FREE JUMBOSHARE SIMPLIFIED #######


    Developed by: www.MyBloggerTricks.com


    Dual licensed under the MIT license and 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 in blogger



Follow these easy steps to add sharing buttons just below every blog post title or the post footer:



Inside your theme, search for  <data:post.body/> . This code is located twice, once for mobile view and once for desktop view. Therefore consider the second appearance of <data:post.body/> only.



Note: If you want to show this horizontal sharing bar below post titles, then paste the following HTML code just above <data:post.body/>   but if you wish to display the sharing bar at bottom of each blog post then paste the following HTML code just below <data:post.body/>



If you want to display the sharing buttons both at top and bottom of each blog post, then paste the following HTML code once above <data:post.body/> and once 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;); return 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;); return 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;); return 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;); 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 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;); 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 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;); return 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;); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGGuOHt18eFqkfCaduChaiIUtAEKYF6n3yv1HEulI8qTdvmYOb8GmBiKoc7-lBTMtYrMDQ6y_hik2SPyCgXrePlKswsJhwXH4hX4072ruVamqOqTtoBqwytZtAoAG6DKire7w3ZvMfIC4A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c2XM-GjkMSvf67kVlcfK61wCAZMJlMSEKT7V0AhoFXp4CsV_eLOYW1pSs1cToEaBrSoXVhUstMXT23RzESbs6wtVoobej0wKdQKvpcK5hEqH9WeUC-5yz2hbwXHwvvI5lRJgnUdMsu2L/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 button locations are labeled for easy readability. You can easily change/swap the locations of button within the widget.


  • Replace stc_network  with your buffer handle or profile username or simply your blog title without spaces.


  • If you wish to display a social media button in mobile devices only then paste its code inside the yellow highlighted tags.


  • All buttons inside the purple highlighted tags will remain hidden when page loads and will be displayed only when the user clicks the +/- toggle 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='switchoff2' style='display:none;'>



Save your template and you are all done!



Need Help in Add Sharing buttons in Blogger?



Let me know if you have any queries. I would love to answer all your questions. More interesting tutorials on its way because I am back to blogging. Peace buddies! =)



COMMENTS

Name

Business,1,Designs,1,How To,4,JSON Feeds,11,Marketing,1,Reviews,1,SEO,30,Settings,1,Technology,49,Web Designing,1,Web Development,1,Widgets,28,Word Press,5,
ltr
item
Tekno Consolas, Technology Knowledge, Business Creation and Development: How to Add Social Media Buttons to Blogger Posts? - Top/Bottom Location
How to Add Social Media Buttons to Blogger Posts? - Top/Bottom Location
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqF3RuCCTlqaGj0MbbaY838VQXR3XYQH6rxeGXxYgSGJkDOK1kgciipMNuiqNVylLvOVwWK8EYNR5yH5XNV5QdGrwWhdO5oUkwzdRJILUMZ_yyk8ZI2di595A200QBbL0gjUPNb6zffUg/s1600/add-social-media-button-blogspot-blogs.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqF3RuCCTlqaGj0MbbaY838VQXR3XYQH6rxeGXxYgSGJkDOK1kgciipMNuiqNVylLvOVwWK8EYNR5yH5XNV5QdGrwWhdO5oUkwzdRJILUMZ_yyk8ZI2di595A200QBbL0gjUPNb6zffUg/s72-c/add-social-media-button-blogspot-blogs.jpg
Tekno Consolas, Technology Knowledge, Business Creation and Development
https://www.teknoconsolas.info/2017/08/how-to-add-social-media-buttons-to.html
https://www.teknoconsolas.info/
https://www.teknoconsolas.info/
https://www.teknoconsolas.info/2017/08/how-to-add-social-media-buttons-to.html
true
7568988610797598027
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content