Add the new Facebook “Like” Button Widget on your Blogger Blogs
by AJ on April 22, 2010
I’ve promised my family and friends that I would create a Blogger counterpart of the plugin I did last night for WordPress, the Facebook “Like” Button Widget Plugin.
Well, I don’t want to keep you from waiting. Here’s how you do it:
1) Login to Blogger (I preferred Blogger Draft in this example)
2) Click “Layout” on the blog you want to add the Widget
3) Click “Edit HTML”
4) Tick the “Expand Widget Templates” checkbox.
5) Search for the following code (you can use CTRL+F on your browser)
<div class=’post-outer’>
Once you found it, on the next line you should find this code <b:include data=’post’ name=’post’/>. If you found that, it means you are on the right spot.
Copy the code below and paste it right after that <b:include data=’post’ name=’post’/> code (highlighted yellow above).
<script>
fb_like = "http://www.facebook.com/plugins/like.php?href=<b:if cond=’data:blog.url’><data:post.url/></b:if>";
document.write("<iframe scrolling=’no’ frameborder=’0′ allowTransparency=’true’ style=’border:none; margin:10px 0 0 0; overflow:hidden; width:450px; height:auto;’ allowtransparency=’true’ src=’"+ fb_like +"’/>");
</script>
UPDATE: The above code doesn’t seem to work because copying it from here adds some funky characters in the markup. Grab it here instead:
http://snipplr.com/view/32953/facebook-like-button-on-blogger/
Like the highlighted code in the screenshot.
6) Click “Save Template”
7) You’re done! Refresh your main blogger blog now and you should be able to see your new Facebook “Like” Button Widget
Got it working? Post your URL in the comments below. Cool huh?
31 comments
Thanks.
by Suy Keang on October 23, 2011 at 9:07 PM. #
Hi – I can’t find the option to edit HTML on the new layout of Blogger in Draft – please can you help me – where should I go to find this now please ..?
by Sarah on September 17, 2011 at 4:22 AM. #
Is the spacing above the comment box normal? I think it’s a bit taller than before.
by Eve on September 5, 2011 at 1:35 AM. #
hi,
i want a like button for the blog and not for every post. Maybe as a gadget. How can i do this
by bharat on June 28, 2011 at 1:44 AM. #
OMG i finally got this to work with your code!!! thanks!!
Mary Uhles recently posted… Disobedience
by Mary Uhles on June 21, 2011 at 5:54 PM. #
OMG I have been trying to figure out how to do this for AGES!! Seriously have tried at least half a dozen different people’s code and it never worked til now… so thank you… don’t know whats different about this but it works….
by Mary Uhles on June 21, 2011 at 5:53 PM. #
Thanks so much for your help. This is the most useful code that I’ve ever searched on web. But one thing I wanna ask, is it possible to display all profile pics that ppl liked my post? I just saw some of the ppl’s profile displayed. And the others just like ” and 4 more people like this”. What should I do? Trillion thanks!
by Samantha on May 31, 2011 at 12:22 AM. #
Thank’s Bro
fondi recently posted… Love And Other Drugs 2010 DVDrip
by fondi on May 19, 2011 at 12:03 PM. #
Thank’s Bro!
fondi recently posted… Love And Other Drugs 2010 DVDrip
by fondi on May 19, 2011 at 12:02 PM. #
Hi,
Thank you for your useful post. I was able to add a “like” button to my blog on Blogger. Your instruction are very clear and the pictures helped. Your code also worked well. Thanks again. Please visit my blog if you have a moment.
Tstylewatch recently posted… Inspiration on the T
by Tstylewatch on May 16, 2011 at 11:31 AM. #
It worked on http://bloggeroako.blogspot.com/
However I just wanna show it on the post itself not on the main page, how can I do it?
by Bloggero Ako on March 18, 2011 at 3:32 AM. #
Working, suerlike!
by Neha on March 14, 2011 at 10:40 AM. #
Thank you it work in http://www.timebd.com
thank you again
TimeBD.cOm recently posted… Emi Free Download Bangladesh actress and model Emi Photo- Emi hot Wallpapers- Emi sexy Picture- Emi information
by TimeBD.cOm on March 11, 2011 at 12:28 AM. #
works fine on my blog http://www.monalisagonewild.blogspot.com
Thnx for sharing
Monalisa recently posted… Lessons from Egypt
by Monalisa on February 14, 2011 at 11:27 AM. #
i could not find step n0.5 :(
please help me…………
by wannie on February 12, 2011 at 12:04 AM. #
Thanks buddy , i have added Like button but its simply print \2 Like\ it doesn’t print full message e.g. \be first from your friend to like this\ can you please help.
Thanks
Javin
How does FIX Trading Sesison work?
by Javin @ Tibco RV Tutorial on February 6, 2011 at 2:18 AM. #
this is perfectly working
priyaranjan recently posted… comma operator
by priyaranjan on December 27, 2010 at 11:23 PM. #
Very helpful! Thank you!
Not Your Ordinary Agent recently posted… My Top 10 Kitchen Gifts Under 50
by Not Your Ordinary Agent on December 2, 2010 at 8:05 PM. #
I got an error message. It says the application has been disabled.
by Carolina on June 15, 2010 at 5:28 PM. #
I got an error message from FB. It says the application has been disabled.
by Carolina on June 15, 2010 at 5:28 PM. #
Hi it is great, thanks a lot. I’ve founded so many of these codes but this one is the first which is properly working. I just wonder if you know how to modify to dont show the faces and just the names.
Thanksss from Argentina
by bernardo on May 6, 2010 at 6:02 PM. #
it’s perfect, thank you
http://edbiado.blogspot.com/
by Ed on May 3, 2010 at 2:32 AM. #
check out http://www.collins.net.pr/blog
i moved the like so that it now appears ABOVE the post title.
notice also i change the height from auto to 70.
Search for this
and then post this.
fb_like = "http://www.facebook.com/plugins/like.php?href=";
document.write("");
by dean collins on April 28, 2010 at 1:39 PM. #
hi, it’s a bit weird how this works, it appears to be posting it “below” this line eg. check out http://www.colllins.net.pr/blog
so it’s confusing “where” the link is happening
by dean collins on April 28, 2010 at 1:03 PM. #
this was really helpful. thanks. :-)
by ekiM on April 27, 2010 at 4:13 AM. #
great work. thanx. it takes a bit of vertical space tho!
http://www.imisioluwa.blogspot.com
by Imisi on April 24, 2010 at 8:42 AM. #
Thanx a great deal. I love it. Didn’t find the two lines you said I would, but found a place to squeeze it into. It’s very cool. I observed that it takes a lot of vertical space. Still, Kudos!
by Imisi on April 24, 2010 at 8:38 AM. #
[...] Read the original post: Add the new Facebook “Like” Button Widget on your Blogger Blogs … [...]
by Add the new Facebook “Like” Button Widget on your Blogger Blogs … | Aceh Blog Resource on April 23, 2010 at 2:48 PM. #
Hi AJ,
I picked up the code from http://snipplr.com/view/32953/facebook-like-button-on-blogger/ used your instructions and it works like a charm! Thanks for doing this.
by worldofhiglet on April 23, 2010 at 9:51 AM. #
Hi,
I can’t find this code in my blog, this code is not there in my blog, plz let me know if there is another code.
My blog http://www.bollywoodinfozone.com/
by Tanveer on April 23, 2010 at 9:13 AM. #
[...] This post was mentioned on Twitter by Mike Lizun and Alex Sauceda, Mahendra Palsule. Mahendra Palsule said: Blogger Widget & WP Plugin for Facebook Like http://bit.ly/bZvMFe created by @ajbatac [...]
by Tweets that mention Add the new Facebook “Like” Button Widget on your Blogger Blogs | ajb{log} -- Topsy.com on April 23, 2010 at 5:31 AM. #