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?
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:
Facebook
Twitter
LinkedIn
Pinterest
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 tag.
Note: Skip this step if you have already added the jQuery and Font Awesome earlier in your template.
Note: Skip this step if you have already added the jQuery and Font Awesome earlier in your template.
Step 2. Login to your Blogger blog and select on Theme and click on Edit HTML.
Step 3. Pressing Ctrl+F search for ]]> code and paste the below code just above the ]]> 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
tag.
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')}});
});
//]]>
Adding social media buttons to the top or bottom of each blog post.
Step 1. Search for
Note: You might find this
Now, copy the below code and carefully paste the code just:
Above
Below
Above and below
Customization
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.
1:
2:
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.
Enjoy the shares !
