Facebook Social Bookmarking Widget

I hope most of you have downloaded the free Social Media Buttons which are designed just how Facebook Buttons are designed. In today's tutorial we will learn how you can add those buttons to your blogger blogs.

Live Demo

Download Now

Steps To Be Followed

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Check the Expand Widget Templates box
4. Then click Ctrl + F and in the browser search box paste this,
   

data:post.body

    5. Now Just above this code paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'>
<tr>

<td>

<!--Stumbleupon-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='StumbleUpon Button Link'/></a>
</td>

<td>
<!-- Twitter -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='Twitter Button Link '/></a>
</td>

<td>
<!--DIGG-->
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='DIGG Button Link '/></a>
</td>

<td>

<!--Email a Friend-->
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' src='EMAIL Button Link'/>
          </a>

</td>

<td>
<!--Facebook-->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action= like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; margin-top:16px; height:40px;'/>
</td>
</tr>
</table></b:if>

    6.  Finally save your template and you are done! :>

You may also like to check these social bookmarking widgets