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.
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:
- GooglePlus +1
- StumbleUpon
- Buffer
- Viber - Will automatically display in mobile devices
- Whatsapp - Auto displayed in mobile devices
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.
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.
Add Social Media Buttons To Blogger Posts
Follow these easy steps:
- Go To Blogger > Theme > Backup your theme
- Click Edit HTML
- 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%;} - 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'/> -
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> -
Save your template.
Add Social Media Buttons at Top/Bottom Of Every Blog Post
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 == "item"'>
<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='"http://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"http://twitter.com/home?status=" + data:post.title + "-" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"https://plus.google.com/share?url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"http://www.stumbleupon.com/submit?url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); 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='"https://buffer.com/add?url=" + data:post.url + "&picture=" + data:post.thumbnailUrl + "&text=" + data:post.title + "&via=stc_network"' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24J0qLODfMhr8gbOF2tYW-9XpDpi5uUzg1HT0Kgg1pNhsivM2dBzD2fHgAd2jzX44x62lp6v0cE-Pxiku2-5OG6YfdnGb5whWTGN_58OOKP1cxXaT0NjSHkYYU8ZtgkAPNqUY9Q3_99GL/s1600/logo-icon.png'/><span class='label'>Buffer</span></a>
</div>
<div class='mbtcount-o ext'>
<div class='arrow'><s/><i/></div>
<span class='share-btn' data-service='buffer'>
<span class='count anim' id='mbtcount'/></span>
</div>
</div>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- WHATSAPP -->
<div id='MBTshares'>
<div class='mbt-o'>
<a class='mbt-tw whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + 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='"viber://forward?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank' title='Share on viber!'><img class='viberimg' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhxJEjgqSV07ZJPER9lWvi0oMROo7ItjFDCu3mrBCyuxfxYZOgcx4MZUHLS-fvmDtHxoZJE7PU1aPsjSH0i0JDuX8l_a5oqCdNKL-zcIa9cKwTkpYgFtpDSJ67-dDXA26WbeV_x6kbQvj/s1600/Icon_small.png'/><span class='label'>Share</span></a>
</div>
</div>
</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! =)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
8/24/2017
Widgets
Happy for returning to blogger.expecting more posts.
ReplyDeleteThank you Kavi. A lot of fresh widgets and plugins are on its way! :)
DeleteAwesome thing brother..
ReplyDeleteJust a quick question, you removed total count from this, was that increasing the load time?
The new blog I am working on have super simple theme with super fast load time. The only things I am adding is this social media plugin. I also use different compression tools to reduce image sizes.
ReplyDeleteUsually, I add images with quotes and other useful things on it, so I want to add Pinterest plugin which allows readers to Pin images (A plugin that shows Pinterest button on every image). I am unable to find it on your blog, Let me know if its in the pipeline.
As I don't want to increase the load time. Do you recommend adding it?
Thanks :)