There is absolutely no way out that over the last few years, social media has completely changed the internet. Actually, it has the whole world and also the world of marketing as well.
When you add social share buttons to your Blogger posts, your visitors can share your posts on Facebook, Twitter, Google+, Pinterest, etc. without leaving your blog. So,
More: 8 Best Social Media Marketing Tips For Your Business
Why social share buttons are important?
Trusted Recommendations
When your contents are shared by your visitors through social share buttons, other people will think that it’s something worth checking out.
Very Easy to Use
When you provide a social share buttons just above and below of your posts.
Your readers can simply share your contents by simply clicking a button and it is incredibly convenient when compared to logging into your social media account and copying the posts URL and pasting on the status box.
Boost Traffic in Search Engine
Social media a major lead generator that constantly brings high volume traffic to your website or blogs and this can help with SEO significantly.
How to Add Social Media Buttons to Blogger Posts
These social media buttons are responsive and will stick to the top or bottom of your every post. It is a very lightweight social sharing gadget and has aligned all major social media platforms inside a horizontal row.
More: 7 Common Mistakes in Social Media Strategy
You can also display this social media buttons below or above the contents of every blog post.
You can toggle the buttons for expanding or even can collapse the number of sharing buttons you want to display.
Following social media platform buttons have been included in the gadget:
StumbleUpon
Buffer
Viber - Will automatically display in mobile devices
Whatsapp - Auto displayed on mobile devices
Print -
I have used the official style sheet for Facebook, Google, Twitter and others and hence these buttons have the exact look and style as the official designs.
Kindly note that the Viber and Whatsapp share buttons will only be displayed on the mobile devices.
So, let’s get started:
Follow these simple and easy steps and you will be done within no time.
Step 1. Paste the below jQuery just above </head> tag.
Note: Skip this step if you have already added the jQuery and Font Awesome earlier in your template.
Code
<script scr = 'https://gleapis.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'/>
Step 2. Login to your Blogger blog and select on Theme and click on Edit HTML.
Step 3. Pressing Ctrl+F search for ]]></b:skin> code and paste the below code just above the ]]></b:skin> code.
Code
#shares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#shares{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 #shares{position:relative;top:-8px; padding-top:20px;}
#shares a:hover{text-decoration:none!important;}
/***Facebook***/
.-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}
.-fb:focus,.-fb:hover,.-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.-fb:hover, .-fb:visited, .-tw:hover,.-tw:visited, .-linkedin:hover ,.-linkedin:visited{color:#fff!important;}
/***Gplus, Pinit, Stumbleupon***/
.-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}
.-gp:hover, .-gp:visited{color:#262626!important;}
#shares .pinit{background:#f9f9f9!important}
#shares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#shares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#shares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.-gp:focus,.-gp:hover,.-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}
.-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}
#shares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
/***LinkedIn***/
.-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) {
.-linkedin{padding:0 5px 0 1px}
}
.-linkedin:focus,.-linkedin:hover,.-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}
.-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**/
.-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}
.-tw:focus,.-tw:hover,.-tw:active{background-color:#0C7ABF}
.-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}
.-o{max-width:100%}
.-o,.count-o,.-fb,.-gp,.-linkedin,.-tw,.label,#count{display:inline-block;vertical-align:top}
.count-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; }
#shares .printme {background-color:#333;}
#shares .printme:focus,#shares .printme:hover,#shares .printme:active{background-color:#000}
#shares .whatsapp{background-color:#73D40B;}
#shares .whatsapp i{font-size:15px!important;}
#shares .whatsapp:focus,#shares .whatsapp:hover,#shares .whatsapp:active{background-color:#65BA09}
#shares .viber{background-color:#7b519d;}
#shares .viber:focus,#shares .viber:hover,#shares .viber:active{background-color:#8558aa}
#shares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }
#count{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#count:hover{text-decoration:none}
#shares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#shares .ext{min-height:18px!important}
#shares .arrow s,#shares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#shares .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}
.switchoff2{display:inline-block;}
.switch2{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}
.switch2:hover{color:#73D40B}
.switch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.switch2 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 #shares {width: 100%;}
Step 4. Now copy and paste the below jQuery script just above the </body> tag.
Code
<script type='text/javascript'>
$(document).ready(function() {
$(".switch").click(function(){$(".switchoff").slideToggle();if($(".switch i").attr("class")==="active"){$(".switch i").removeClass("active").addClass('inactive')}else if($(".switch i").attr("class")==="inactive"){$(".switch i").removeClass("inactive").addClass('active')}});
$(".switch2").click(function(){$(".switchoff2").slideToggle();if($(".switch2 i").attr("class")==="active"){$(".switch2 i").removeClass("active").addClass('inactive')}else if($(".switch2 i").attr("class")==="inactive"){$(".switch2 i").removeClass("inactive").addClass('active')}});
});
//]]></script>
Adding social media buttons to the top or bottom of each blog post.
Step 1. Search for <data:post.body/> code.
Note: You might find this <data:post.body/> code twice, i.e. once for your mobile view and another for desktop view. So, take the code that you will find the second time.
Now, copy the below code and carefully paste the code just:
Above <data:post.body/>: If you want your social share bar buttons to display above your blog posts, and
Below <data:post.body/>: If you want your social media share buttons to display below every blog posts.
Above and below <data:post.body/>: If you want to display both above and below your blog posts then paste the following code once above the <data:post.body/> code and once below the <data:post.body/> code.
Code
1: <b:if cond='data:blog.pageType == "item"'>
2: <div id='shares-wrap'>
3: <!--TOTAL-->
4: <div class='share-btn tcount' data-service='total'>
5: <div class='count h2 anim'/>
6: <div class='h4'>SHARES</div>
7: </div>
8: <span id='horiz'>
9: <!--FACEBOOK-->
10: <div id='shares'>
11: <div class='-o'>
12: <a class='-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>
13: </div>
14: <div class='count-o'>
15: <div class='arrow'><s/><i/></div>
16: <span class='share-btn' data-service='facebook'>
17: <span class='count anim' id='count'/></span>
18: </div>
19: </div>
20: <!--PINTEREST-->
21: <div id='shares'>
22: <div class='-o'>
23: <a class='-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>
24: </div>
25: <div class='count-o ext'>
26: <div class='arrow'><s/><i/></div>
27: <span class='share-btn' data-service='pinterest'>
28: <span class='count anim' id='count'/></span>
29: </div>
30: </div>
31: <!--TWITTER-->
32: <div id='shares'>
33: <div class='-o'>
34: <a class='-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>
35: </div>
36: </div>
37: <!--LINKEDIN-->
38: <div id='shares'>
39: <div class='-o'>
40: <a class='-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>
41: </div>
42: <div class='count-o ext'>
43: <div class='arrow'><s/><i/></div>
44: <span class='share-btn' data-service='linkedin'>
45: <span class='count anim' id='count'/></span>
46: </div>
47: </div>
48: <!--GOOGLE PLUS-->
49: <div id='shares'>
50: <div class='-o'>
51: <a class='-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>
52: </div>
53: <div class='count-o ext'>
54: <div class='arrow'><s/><i/></div>
55: <span class='share-btn' data-service='google'>
56: <span class='count anim' id='count'/></span>
57: </div>
58: </div>
59: <!--STUMBLEUPON-->
60: <div id='shares'>
61: <div class='-o'>
62: <a class='-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>
63: </div>
64: <div class='count-o ext'>
65: <div class='arrow'><s/><i/></div>
66: <span class='share-btn' data-service='stumbleupon'>
67: <span class='count anim' id='count'/></span>
68: </div>
69: </div>
70: <div class='switchoff2' style='display:none;'>
71: <!--BUFFER-->
72: <div id='shares'>
73: <div class='-o'>
74: <a class='-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/AVvXsEgIMwq75mru2LJDpF8dUWXIcPIpvUNFf9AMm245Hxt0v4vMVE2b4vT5CiF-dcjysdoE4aiyU70mC9Q56qUftPmkq6Bi8D2aGDhZ14zoo7OBBUV377etYQ0rCKlYslhgaAf5VGpVe4MhCxo9/s1600/logo-icon.png'/><spanbel'>Buffer</span></a>
75: </div>
76: <div class='count-o ext'>
77: <div class='arrow'><s/><i/></div>
78: <span class='share-btn' data-service='buffer'>
79: <span class='count anim' id='count'/></span>
80: </div>
81: </div>
82: <b:if cond='data:blog.isMobileRequest == "true"'>
83: <!-- WHATSAPP -->
84: <div id='shares'>
85: <div class='-o'>
86: <a class='-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>
87: </div>
88: </div>
89: <!-- VIBER -->
90: <div id='shares'>
91: <div class='-o'>
92: <a class='-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/AVvXsEgDjtGTaDAyUiYkl7X1Cion0nym_wCwOaWqG0Hew815ZvKW_aFNoChoRFX4zQC6g6SJdG4HyknR-_orZ0NoLqV32XjmXBP3l1EAst8PNqXX8-or5nKC265wCiWc_7HvhDejcTBJ0sb1KrPV/s1600/Icon_small.png'/><spanbel'>Share</span></a>
93: </div>
94: </div>
95: </b:if>
96: <!-- PRINT -->
97: <div id='shares'>
98: <div class='-o'>
99: <a class='-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>
100: </div>
101: </div>
102: </div> <!--switchoff-->
103: <span class='switch2'><i class='active'/></span>
104: </span>
105: </div></b:if>
Customization
Replace your buffer handle or profile username or simply your blog title without spaces in place of stc_network at line number 74.
Paste the mobile code if you want to show any social media button on mobile devices only inside the red highlighted tags.
Simply copy and paste its code if you want to add more social buttons inside the purple switch tags.
In order to remove buttons from the switch, you have to simply copy and paste the button’s code above the switch tag.
Conclusion
These social media buttons are responsive hence it will automatically re-size with the width of the device's display.
I hope this tutorial has helped you adding social media share buttons on your Blogger posts, or if you have found any problem adding the codes on any part.
Do leave a comment below, and I will get back to you.
Blogger , Tips and Tricks
