How to Add a Facebook Like/Recommend Button To Your Blogger Posts

As the saying goes, every day is a new day. And to make it more interesting, many social bookmarking sites as well as a lot of well known social networking sites offer their users icons and widgets to make surfing and sharing easier. Not long ago, Facebook came up with a new set of Social plugins which enable you to provide engaging social experiences to visitors of your site with just a line of HTML. The Facebook Like Button is one of them. You can see a demo of the like button on this page. The Facebook Like Button will allow your visitors to quickly share your posts with all of their Facebook Friends. It will also let you konw how many people liked your blog post.

Unlike most of the other sharing options, the Like button only requires your visitors to click on it. They will not be bothered by any annoying pop ups or login requests or what not.

There are a number of options for the Like Button, like including the names and profile pictures of the user's friends who have liked the page, changing the colors, the button types and the size and transforming it into a Recommend Button.

The following guide will walk you through the necessary steps to install the Facebook Like/Recommend Button to your Blogger blog:

1. Login to your Blogger account and go to Design --> Edit HTML and click on the check box where it says „Expand Widget Templates”.

2. Look for <data:post.body/> (Ctrl + F). If you want the Like Button to appear below your posts insert the following code directly after the above line:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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; height:40px;'/>
</b:if>

If you want the button to appear at the top of your blog posts insert the code before <data:post.body/> or after <div class='post-header-line-1'/>.

This code will show the Like Button on Post pages only. If you want to display it everywhere, then remove the two lines of code in red.

3. If you want, you can now make some changes to the Like Button. Here are a few of the adjustments you can make:

layout = standard / button_count   [choose layout]

show_faces = true / false              [show picture]

action = like / recommend             [option : Like or Recommended button]

colorscheme = light / dark             [color]

height: 60px                                 [adjust height]

widht: 60px                                  [adjust width]