How to Install a Facebook Like Button on a Blogger Blog

The Facebook "Like" button is a way to encourage your readers to share your Blogger blog content with their friends and families. You can easily install the Facebook "Like" button on your blog entries or in your Blogger sidebar by editing the basic design of your Blogger template. If you install the "Like" button in your sidebar, it will enable your readers to share your blog homepage. If you install the button within entries, readers will be able to share individual blog entries with their Facebook networks.

Instructions

Like Button in Sidebar

1. Navigate to developers.facebook.com and click "Add Facebook to My Website."

2. Click the "Like Button" link in the top paragraph.

3. Enter the address of your Blogger blog in the "URL to Like" text box.

4. Click the options, such as "Layout Style" and "Color Scheme" to customize the look and feel of the "Like" button and then click "Get Code."

5. Copy the "Like" button HTML code to your clipboard.

6. Navigate to blogger.com and sign in to your account.

7. Click "Design."

8. Click "Add Gadget" in the sidebar location where you want the Facebook "Like" button to appear.

9. Click the "+" button to add an HTML/JavaScript gadget.

10. Type a title for the sidebar section containing the Facebook "Like" button and paste the HTML code for the Facebook like button in the Content text box. Click the "Save" button to add the gadget to your sidebar.

11. Click "Save" to update your blog template. The Facebook "Like" button is displayed in the sidebar of your blog.

Like Button in Entries

1. Navigate to blogger.com and sign in to your account.

2. Click "Design."

3. Click "Edit HTML."

4. Click the check box beside "Expand Widgets Template."

5. Copy and paste the following HTML code immediately after "<div class='post-header-line-1'/>" to add the Facebook "Like" button to each individual entry on your blog:

   <b:if cond='data:blog.pageType == "item"'>

   <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.URL + "&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

   </b:if>

6. Click "Save Template" to update your Blogger design.

References

• Facebook: Developers
• All Facebook; How to Optimize the Facebook Like Button; Nick O'Neill; May 2011