How to Add Social Media Counter Buttons For Blogger

Social media counter buttons are buttons that you can install or add to your blog to enable you share your blog post directly to your friends and loved ones in your various social networks like Facebook, Twitter, Google+, Reddit, Pinterest, etc. It’s also an avenue for your blog readers to be able to share your posts to their friends and loved.

Adding social media counter button in your blog is a way of socializing your blog post. When people can’t come to your site, you can reach them using Social media websites like Facebook, Twitter, Google+, Reddit, Pinterest, etc. In this article, we will learn how to add social media counter buttons in blogger.

Nowadays social media plays a significant role in providing you a good position in search engine. The more viral your post would get, the more higher you will see in the Search engine.

How to add Social Media Counter buttons in blogger:

This tutorial is based on two steps, in the first step you have to add the CSS coding of social media buttons in your template and in the second step we will be installing the social media button widget in your blogger blog.

1. Login to your Blogger >> Click on Template >> Click Edit HTML

2. Back up your blog using Download Full Template as a precaution in case you accidentally overwrite some code and are not able to retrieve it.

3. Use CTRL F to Search for ]]></b:skin> tag and just above it paste the following code:

#mblSocialFloat {
clear: both;
padding: 6px 0;
display: block;
background: #FFFFFF;
}
#mblSocialFloat td {
padding: 4px;
margin: 0;
border: none;
}
#mblSocialFloat td iframe {
max-width: 82px;
width: 82px !important;
}
.horizontalsocial {
width: 100%;
border-top: 1px solid #d2d2d2;
float: left;
max-height: 50px !important;
background: #ffffff;
padding-bottom: 6px!important;
padding-top: 2px!important;
border-bottom: 1px solid #d2d2d2;
margin-bottom: 15px;
margin-left: -5px;
}
.horizontalsocial .sharertitle {
float: left;
border-right: 1px solid #d2d2d2;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #b1a9a5;
text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}
.horizontalsocial .fb-like {
width: 100px;
float: left;
border-right: 1px solid #d2d2d2;
padding: 3px 0 2px;
height: 25px;
}
.horizontalsocial .sharertwitter {
float: left;
width: 115px;
border-right: 1px solid #d2d2d2;
margin: 0 15px 0 0;
padding: 3px 0 2px;
height: 25px;
}
.horizontalsocial .sharergplus {
float: left;
width: 90px;
margin: 0 15px 0 15px;
padding: 3px 0 2px;
border-right: 1px solid #d2d2d2;
height: 25px;
}
.horizontalsocial .sharerbubble {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWcad5fUGA8-xhKa7S0RdjRq8eQUQ4-Campi3o4L4EydZ1utro2eB9As282rs7dR6uvohyphenhyphenZsUgzyLO_2zvdITk4UNn5ezHdfnFKNL1xcFPDRv7wGkFxjsfQA5Osx4Zekr5ybUUTZZBOhp/s1600/Commentz.png) no-repeat;
height: 25px;
min-width: 25px;
float: left;
margin: 7px 0 0;
line-height: 18px;
vertical-align: top;
}
.horizontalsocial .sharerbubble a {
color: #2d2520;
padding: 0px 0 0px 30px;
font-size: 18px !important;
font-family: 'Lora', Arial, Helvetica, san-serif !important;
}
.horizontalsocial.fixed {
position: fixed;
top: -2px;
z-index: 99999;
}
.social-buttons a {
color: #666;
text-decoration: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

4. Once you are done with adding the CSS code, again use CTRL F to search for <data:post.body/> tag in your template and just below it past the following code.

Note: If there are multiple <data:post.body/> tags then paste it the following code under second <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</div> </td>
<td>
<div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</td>
<td>
<div class='fb-like'><iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
</td>
<td>
<div class='sharergplus'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</td>
<td>
<div class='sharerbubble'><span class='thecomments'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>0</b:if><b:if cond='data:post.numComments == 1'>1</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/></b:if></a></b:if></span></div>
</td>
</tr>
</table>
</div></div>
</b:if>

5. When you are done adding the codes in the right place as i have said above, save the template by pressing "Save Template" button and you have successfully added social media counter buttons in blogger.

6. View one of your blog post to see social media counter buttons under your blog post, if you wish to display the social media counter buttons after your post title, then paste the code in step 3 above just before <data:post.body/> (i.e on top of <data:post.body/>)

I hope this tutorial have helped you in learning a effective way of adding social media counter buttons in blogger. Do share your opinions about adding social counter buttons in your website and if you are already using them and which social buttons you prefer. Did you found any of methods or processes above confusing, no need to worry, that’s why we have the comment box below for you. Also, please feel free to ask any questions, if any. Let us have a nice and informative conversation in the comments box below.

If you liked this guide, please share it with your friends and family.