Facebook Like / Recommend button for Blogger Blog

Your blogger blog can be more social with Facebook’s set of social plugins. I hope you already using the Facebook fan page and Fan box for your blog to optimise and distribute your blogger content on Facebook. And now along with the Like of you main blog page on facebook, people or your friends can specifically like your every single post. This blog also makes use of the Facebook Like plugin, which you can see at the top of the post or in the demo below.
The Facebook like button will enable your blog readers to easily spread the love of your post among their friends on their facebook wall. And that can be just with one click for your readers. So is it easier for you to implement on your blog, as Facebook says “with just a line of Html”.
Ok so ready to add the button in your blog? Here we go with the detailed instructions. Follow these step by step instructions to add the like button in your blog.
1. Log in to your dashboard–> Navigate to layout –>Edit Html Tab

2. Before you edit your blogger Template, Make sure you backup every time, by clicking on the Download Full Template so that you may restore it if something goes wrong.

3. You need to “expand Widget Templates”. To do that check the box and it will expand itself.

4. Look for

 <data:post.body/> 

in your code, (Press Ctrl + F to find) 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=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>

5. This code will show the Like Button on Post pages only (Single Posts only) . If you want to display it everywhere, then remove the the first (1) and last line (3).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>

Customise the Button

You can change the following parameters in the above code and customise the button according to your need.
# If you want to show friend icons under the button, then you should use the parameter:

show_face=true

#If you want to display only the simple button with count, then you need to use the parameter:

layout=button_count

#If you want a darker color scheme for your button, then you need to use the parameter:

colorscheme=dark

#Width of the frame
see those figures in the code, You can change them to customize the width of the iFrame as you like.
# Font of the Button
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

Make it Recommend Button

Dont like the word, “Like”, You can esily change it to “Recommend and thus have a recommmend Button.

Additional Resources

Facebook Documentation for the Like button
I hope you like this Like Button. Feel free to ask any questions in the comments below.

Related posts:

1. Share Posts from your Blogger NavBar
2. Remove Navbar from your Blogger Blog completely
3. Related Posts Widget for Blogger / Blogspot
4. Changing Templates of Blogger Blogs
5. Adding Adsense Ads in Blogger Posts