How to Add Facebook Like to Blogger

Facebook has recently added the ability for its users to "Like" just about any content on the web and have that activity posted to the user's wall. This facility lets you share content more readily and also gives you an idea of how some of your readership traffic is responding to your content.


This article provides step-by-step instructions on how to add the "Like" button to your Blogger (BlogSpot) blog, one of the more commonly used blogging services.

Steps

  1. Image titled Add Facebook Like to Blogger Step 1
    1
    Go to the "Facebook Developers" page: http://developers.facebook.com/docs/reference/plugins/like.
  2. Image titled Add Facebook Like to Blogger Step 2
    2
    Set the options you want. Specifically, select whether you want a "Like" or a "Recommend" button. The sample button on the page will automatically update to reflect your selections.
  3. Image titled Add Facebook Like to Blogger Step 3
    3
    Leave the "URL to Like" field blank. You will be replacing that soon.
  4. Image titled Add Facebook Like to Blogger Step 4
    4
    Click "Get Code". You will see something that looks like this:


     <iframe src="../http://www.facebook.com/plugins/like.php?href= 

     http%253a%252f%252fexample.com%252fpage%252fto%252flike&layout=standard& 

     show_faces=false&width=450&action=like&colorscheme=light" 

     scrolling="no" frameborder="0" allowTransparency="true" style="border:none; 

     overflow:hidden; width:450px; height:px"></iframe> 
  5. Image titled Add Facebook Like to Blogger Step 5
    5
    Replace the following text:
    • src= above with:
       expr:src=' 
    • http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layout part with:
       " + data:post.url + "&layout 
    • light" with:
       light"' 
      -- notice the new trailing apostrophe
    • height:px with:
       height:35px 
      -- otherwise, Firefox will make the iframe really big.
    • Leave a copy of the final code somewhere accessible for you to transfer to Blogger.
  6. Image titled Add Facebook Like to Blogger Step 6
    6
    Go to your Blogger Dashboard.
  7. Image titled Add Facebook Like to Blogger Step 7
    7
    Open your blog's layout and click Edit HTML.
  8. Image titled Add Facebook Like to Blogger Step 8
    8
    Find a place to put the Facebook "Like" code into your HTML layout. A good location is directly after or below:
     <div class='post-footer'> 
    • Use the browser "Find" mechanism to help you locate it.
  9. Image titled Add Facebook Like to Blogger Step 9
    9
    Save and check that the button has appeared. Once you can see it, you're done!

Tips

  • As of May 16, 2010 this feature is only available in the English language.

Warnings

  • Always back up your blog's template before making changes to its layout!
  • It is recommended that you keep "Show Faces" unchecked and use the "button_count" layout. Otherwise, less-savvy users who did not configure their privacy settings properly may be turned off by their profiles appearing on your blog after "Liking" it.

Things You'll Need

  • Blogger account
  • Facebook account

Article Info

Featured Article

Categories: Featured Articles | Blogger | Facebook