1. Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.
2. Find <data:post.body/> and immediately after it add the following script.
Standard Facebook Like Button
This is a standard button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>
Facebook Like Button with Box Count
This is a box count button.<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=65"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</b:if>
Facebook Like Button with Button Count
This is a button count button.
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</b:if>
3. Save your template, DONE
Notice the bold codes, here you can make some changes to give your buttons a different styles. If you want to change the font, then find “font=arial” and change it to any one shown below:
font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana
You can change the color by changing “colorscheme=light” to“colorscheme=dark” and also can change the width and height. You can also change the “Like” word to “Recommended” by changing “action=like” to “action= recommend”.
Here is an example:
If you want Like button to be seen within posts, in right-top-corner, then you will have to add the script just before <data:post.body/>:
<b:if cond='data:blog.pageType == "item"'>
<div style="padding:4px; float: right;">
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>
</b:if>
That conditional tags are used to show these Facebook Like buttons only for post pages. If you want to show it even in home or archive pages remove these tags marked in red.
