How to Add Facebook Like BOX 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 users' walls. 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.

Ads by Google

Create a Free Slideshow

Create a free stunning slideshow from your travel photos. Start now!
tripwow.tripadvisor.com/slideshow

Edit Steps

1. 1
   Go to the "Facebook Developers" page: http://developers.facebook.com/docs/reference/plugins/like.
   
   
   

   Go to the "Facebook Developers" page: http://developers.
   Ads by Google

   Create a Free Slideshow

   Create a free stunning slideshow from your travel photos. Start now!
   tripwow.tripadvisor.com/slideshow
2. 2
   

   Set the options you want.
   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. 3
   

   Leave the "URL to Like" field blank.
   Leave the "URL to Like" field blank. You will be replacing that soon.
4. 4
   

   Click "Get Code".
   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. 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. 6
   

   Go to your Blogger Dashboard.
   Go to your Blogger Dashboard.
7. 7
   Open your blog's layout and click Edit HTML.
   
   
   

   Open your blog's layout and click Edit HTML.
8. 8
   Back up your template! Do this by clicking Download Full Template.
   
   
   

   Back up your template! Do this by clicking Download Full Template.
9. 9
   Check Expand Widget Templates.
   
   
   

   Check Expand Widget Templates.
10. 10
    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.
11. 11
    Save and check that the button has appeared. Once you can see it, you're done!
    
    
    

    Save and check that the button has appeared.