The like button alongside the share buttonFacebook 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.
Edit Steps
- 1Go to the "Facebook Developers" page: http://developers.facebook.com/docs/reference/plugins/like.
- 2Set 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.
Set the options you want. - 3Leave the "URL to Like" field blank. You will be replacing that soon.
Leave the "URL to Like" field blank. - 4Click "Get Code". You will see something that looks like this:
Click "Get Code".
<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>
- 5Replace the following text:
src=above with:expr:src='
http%253A%252F%252Fexample.com%252Fpage%252Fto%252Flike&layoutpart with:" + data:post.url + "&layout
light"with:light"'
-- notice the new trailing apostropheheight:pxwith: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.
- 6Go to your Blogger Dashboard.
Go to your Blogger Dashboard. - 7Open your blog's layout and click Edit HTML.
Open your blog's layout and click Edit HTML. - 8Back up your template! Do this by clicking Download Full Template.
Back up your template! Do this by clicking Download Full Template. - 9Check Expand Widget Templates.
Check Expand Widget Templates. - 10Find 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.
- 11Save and check that the button has appeared. Once you can see it, you're done!
Save and check that the button has appeared.
Edit Tips
Edit 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.
Edit Things You'll Need
Edit Related wikiHows
Edit Sources and Citations
- http://c-sharpener.blogspot.com/2010/04/blogger-how-to-add-facebook-like-button.html (Original source — shared with permission)
Articles for You to Write
Here is a list of suggested articles that have not yet been written. You can help by researching and writing one of these articles. To get started writing one of these articles, click on the red link of a title below.
Article Info
Featured Article
Last edited:
August 2, 2011 by Ttrimm
Categories:
Featured Articles | Facebook | Blogger
Recent edits by: Oliver, Jooberman, Jack Herrick (see all)
