Facebook introduced the new Like button which enables your blog visitors to share your blog content on their Facebook profiles with one click. After the launch of this button I have seen many bloggers are adapting it and replacing it with Facebook share button. So why not add it to Blogger.

Update: Now Facebook has updated their Like button and added a newSend button along with it. Visitors who like your post will now also be able to send it to their Facebook friends (individually). Currently, this feature is only available to XFBML version. If you have enabled it for the iframe version, better turn it off, read the customization part.

For an example, click the below button to Like this post:

This is a standard button.

Standard Facebook Like Button for Blogger

Step 1: Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.

Step 2: Find <data:post.body/> and immediately after/before it (or both) add the following codes.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>

Like Button with Box Count for Blogger

Follow the first two steps mentioned above and paste the below script:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</b:if>

Facebook Like Button with Button Count

Follow the first two steps and paste the below script:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
</b:if>

Example of XFBML Version

This is an example of XFBML Like button which has the Send button with an auto popup comment box. To get this you can follow the tutorial for XFML Like Button for Blogger.

http://www.facebook.com/plugins/like.php?api_key=271668452879190&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df36ce31a6%26origin%3Dhttp%253A%252F%252Fwww.simplebloggertutorials.com%252Ff2e1dce3e%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&font=arial&href=http%3A%2F%2Fwww.simplebloggertutorials.com%2F2010%2F05%2Fhow-to-add-facebook-like-button-in.html&layout=standard&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=true&width=450

Customizations

Notice the green 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 also change:

  • The color by changing colorscheme=light to colorscheme=dark
  • The width and height (see the above snippets)
  • The “Like” word to “Recommended” by changing action=like toaction= recommend
  • Show faces by changing show_faces=false to show_faces=true.
  • And turn off Send by applying send=true to send=false.

Here is an example after applying the customizations:

 

Points to be noted:

    • If you want some space to be added between the post body and the like button, then warp the Facebook like button codes within div. The code will be:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding:5px;'>
(Like button code goes here...)
</div>
</b:if>
    • Conditional tags are used to show these Facebook Like buttons for homepage and every other page excluding static page. If you want to show it only in post pages then replace the above used conditional tag with:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Like button code goes here...
</b:if>