How to Add Social Share Buttons (with count) to Top of Post in Blogger

I really enjoy doing all these blogger tutorials and I hope you guys are finding them useful. Today I'm bringing you another tutorial and this one will show you how to add social media buttons to the tops of your posts. The buttons also count how many times your content has been shared. They include Facebook, Twitter, Stumble Upon and Digg.

 



 

So let us get down to the nitty gritty.

First of all navigate to Dashboard-Template-Edit HTML-Proceed and tick on the box at the top called Expand Widget template.

 

Find the following line of code:

]]></b:skin>

Paste the code below above that line.

.social-bar { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social-bar .social_button {float: left; display: inline; overflow: hidden; height:22px; }
.social-bar .social_button.dg { margin: 0px 0 0 20px ; padding-top: 2px;}
.social-bar .social_button.tm { margin: 0px 0 0 20px; padding-top: 4px;}
.social-bar .social_button.fb { margin: 0 0 0 20px; padding-top:3px;}
.social-bar .social_button.su { margin: 0px 0 0 20px; padding-top: 2px;}
.social-bar .social_button.buzz { margin-left:20px ; padding-top: 3px;}

Now find the following line of code:

<div class='post-header'>

Paste this code underneath it:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='social-bar'>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<div style='float:right;width:90px;height:25px'>
<a class='twitter-share-button' data-count='horizontal' data-via='technowit' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
<div class='social_button fb'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:27px;'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button buzz'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div></div></b:if>

Hit Save. You should now have social media share buttons at the top of your posts :)