Ads 468x60px

Monday, August 8, 2011

Facebook Social Bookmarking Widget

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



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.  Simply Replace the blue bolded text with button links.

No comments:

Post a Comment