How to Add Social Media Counter buttons in Blogger

Earlier at MyBloggerLab, we have already showed you how to add a floating social media bar in Blogger, but that may not be a perfect choice for all of our users because of its floating or scrolling functionality. As time passes and web gets mature we are more likely to see more simplified version of social media buttons that includes Facebook like button, Twitter retweet button, Google+ +1 button and more. In this article, we will show you how to add social media counter buttons in blogger.

Why to use Social Media Counter Buttons?

There is no way you can live without logging into your Facebook account to check new updates, or to check you ex’s relationship status or etc. When people can’t come to your site, you can reach them using Social media websites like Facebook, Twitter, Google+, Reddit,Pinterest and etc.

Not only that, but nowadays social media also 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. Go to Blogger >> Template >> Edit HTML >>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/AVvXsEjg4YiAxlZusML_Fen36AUL3CqDdT3ZrRVtm1XubKuLE6iyQWpkL_iIJKke1SNDEcxfHyo827QROS3_y4Lo83Jx4wlLDcBO2jnZ_MOBSqJnO2mgqTqw0YbNA_VG7VYzDweU7-VUa8WPBjca/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;
}

Once you are done with adding the CSS code, simply search for <data:post.body/> tag in your template and just below it past the following code. TIP: If there are multiple <data:post.body/> tags then paste it the following code after each tag.

<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>

When you are done adding the codes in their respective places as we have mentioned above, save the template by pressing "Save Template" button and you have successfully added social media counter buttons in blogger.

We hope this tutorial may 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 then which social buttons do you prefer? Let us have a nice and informative conversation in the comments below.\

Autor : Mian Fx

Tuesday, 7 October 2014