Facebook Like / Recommend Button For Blogger

Facebook has come up with  a new set of Social plugins which enable you to provide engaging social experiences to your users 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 readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post . Here is a little Demo of what you will see

If you are already having the like button on your blog, and wish to upgrade to the newer design of the like button, the read the Upgrade Instructions

How to Add the Facebook Like Button Below every Post

1. Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”
2. Look for <data:post.body/> and immediately after that place the following code.

<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=button_count&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>

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. Save the template and you should see the Like Button Below each of your posts.

Optional Customisations

a)  Now try changing action=like to action=recommend  in the code and you will see something like .

b) Try changing layout=button_count to layout=standard and you will get the older version of the like button

c) Try changing colorscheme=light to colorscheme=dark or colorscheme=evil
d) You can change the font by editing the font=arial parameter. You can change it to any of

1. font=lucida+grande
2. font=segoe+ui
3. font=tahoma
4. font=trebuchet+ms
5. font=verdana

Upgrading the Old Like Button to the Newer Design?

If you are trying to upgrade your Facebook Like button to the newer design, then Go to Design > Edit HTML and Expand your Widget Templates. Look for layout=standard in the Facebook iframe code. and change it to layout=button_count , save the template and you are done :)
Also Check out :

1. Facebook Share Count Buttons For Blogger
2. Create Facebook Fan Page for your Blog

If you liked this post, then consider “Like” ing it :)
Permalink : Facebook Like / Recommend Button For Blogger

Share this Article

• Share on Facebook
• RT @bloggerplugins Facebook Like / Recommend Button For Blogger ~Share on Twitter
• Share on Delicious
• Share on Digg
• Share on StumbleUpon