Add Facebook Like button to Blogger

This tutorial will show you how to add a Facebook Like button to each blog post in Blogger. Clicking this button will like the containing post. It should work on all pages -home page, individual/post page or any other pages.

The Like button lets your reader share your content with his/her friends on Facebook. When clicked, a story appears in his/her friends' News Feed with a link back to your blog.

facebook like button

Now let us proceed:

  1. Go to Template > Edit HTML.
  2. Back up your template.
  3. Tick the Expand Widget Templates checkbox on top right corner of the HTML code window.
  4. Find the following code in your HTML, this is the code for your post content:
     <data:post.body/>
  5. Paste the Facebook button code immediately below (after) it:
    <!-- Facebook Like button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='float:left;padding:5px 5px 5px 0;'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/>
    </div>
    </b:if>
    <!-- Facebook Like button End -->
  6. Configure button

    Choose the type of button and set the appropriate width and height by changing the values of query parameters in line 4.

    Like button type

    Query

    Value

    Width & Height

     standard like button layout standard

    W: 450px

    H: 35px (80px w photos)

    facebook like button count button_count

    W: 90px

    H: 20px

    facebook like box count box_count

    W:55px

    H: 65px

    standard like button dark colorscheme dark

    n.a.

    standard like button recommend action recommend

    n.a.

  7. Button repositioning
    The steps above positioned the button on bottom left of each post. You can change the position if you wish:
    • Position it on top of post
      Place the button code before <data:post.body/>, instead of after.
    • Position it on the right
      Change the float in line 3 from left to right.
    • To display the button on static pages, remove the conditional tag -code line 2 and 6.
  8. Preview, you should see the button appear in each post.
  9. Click Save if you like what you see.

Enjoy!

165 comments to "Add Facebook Like button to Blogger"

michkhoo July 30, 2010 at 9:15 PM    

These sharing buttons would be just great if they can detect facebook cookie and be shown only to facebook users.

Werner von Wallenrod July 31, 2010 at 12:33 AM    

Thanks! I used this. 8)

Greenlava July 31, 2010 at 11:37 AM    

@michkhoo
I need to learn some more before I can do that.

@Werner von Wallenrod
My pleasure

7ths August 15, 2010 at 3:07 AM    

why my like button is BELOW 'LinkWithin' gadget?O,o

where yours is ABOVE?did i miss something?

thanks

Greenlava August 15, 2010 at 11:44 PM    

@7ths
No you did not. To place Like button above LinkWithin, refer to Install LinkWithin Related Posts with Thumbnails.

Allycat August 26, 2010 at 6:16 PM    

Thanks so much, it worked!

Kimberly Finkel Davis August 31, 2010 at 5:25 AM    

Thank you, I tried probably 6 other html codes and yours was the only one that worked. Merci Boucoup!

Greenlava August 31, 2010 at 3:46 PM    

@Allycat
You're welcome

@Kimberly Finkel Davis
You can be rest assured all codes in this blog work. I personally tested them before publishing :)

synical September 13, 2010 at 3:28 PM    

This was the only set of instructions that worked for me - thanks! :)

The Front room September 21, 2010 at 6:54 PM    

i didnt understand what code to remove if you didnt want it to apply on the main static page, could you be a little more specific thank you

Greenlava September 22, 2010 at 11:03 PM    

@The Front room
What do you mean by "main static page"?

David McKinnon 727-831-2002 September 25, 2010 at 2:44 PM    

I am lost-where do I place this code? The above place to post does not appear in my paragraph????

Greenlava September 25, 2010 at 11:26 PM    

@Wendy
Follow step 1 to 3 and then press Ctrl+F keys to activate search. Type in "data:post.body" and press Enter key. Your browser will take you there.

Leonel Marjavaara September 26, 2010 at 8:31 PM    

I get an xml-error message...

"The element type "div" must be terminated by the matching end-tag ""

Greenlava September 27, 2010 at 5:14 PM    

@Leonel Marjavaara
Seems like you left out code line 5.

SHaRKFiQ SSM September 27, 2010 at 6:49 PM    

thanks for the info~

Greenlava September 27, 2010 at 9:38 PM    

@HiGHNeSS FiQ
You're welcome. Do come back :)

Unknown October 3, 2010 at 9:39 AM    

I added the code on my site, www.skinnytaste.com but when I "like" my post for pumpkin spiced crepes with butter, and look on facebook, it looks like this...

Gina likes Gina\ on skinnytaste.com.
Why isn't it showing the name of the post?

When I like your post, it appears correctly...
Gina recommends Add Facebook Like button to Blogger | Blogger/blogspot tips on bloggersentral.com.

Greenlava October 3, 2010 at 10:33 AM    

@Gina @ Skinnytaste
The same thing happened when I tried your Facebook share button.
My guess is it has something to do with your page title. (Page title is the text you see on top left of your browser). The correct title should be:
Gina's Skinny Recipes: Pumpkin Spiced Crepes with Pumpkin Butter.
The problem is probably with the apostrophe. Maybe Facebook doesn't like apostrophes :)
Why don't you try SEO (Search engine optimization) friendly Blogger page title.
It will put the apostrophe toward's the end of page title, and it's good for SEO too.

Unknown October 4, 2010 at 11:16 PM    

Hi, it's me again. I made a new fan page, deleted the old. Now it says skinnytaste when I like. But it still doesnt place the name of the post. Is there something missing in my code that doesn't show the headline? Maybe I did something wrong.

Greenlava October 4, 2010 at 11:32 PM    

@Gina @ Skinnytaste
I only works on your latest post. Previous posts remain the same.
It says Skinnytaste maybe because of the meta tag
[meta content='Skinnytaste' name='title'/].
This meta tag creates a second title tag, in conflict with the [title]...[/title]tag.
Try deleting it (meta tag).

Unknown October 5, 2010 at 10:05 AM    

That worked!! Except on posts that have already been liked, but new posts display correctly. Thank you so much! I will be bookmarking you, and following, and I just stumbled you!

One more thing, Directly below the like button, I had a print the post button. Now that I have the like button, it's cut in half and placed weird, how do I fix that?

Greenlava October 5, 2010 at 7:45 PM    

@Gina @ Skinnytaste
Looks like you've fixed the print button :)

p.s. great food blog you got there. Made me drool every time :)

Hans Ismail October 5, 2010 at 10:23 PM    

this the only tutorial that work to my blog!!!
thanks alot...

nisachik October 6, 2010 at 8:26 AM    

thanx!~
its really workin~

Sarah,  October 7, 2010 at 5:34 AM    

Hello! I really appreciate your time and explainations. Could you tell me if it's simply easier to keep adding certain badges to my blog or should I use something like you have here, the left side badge bar with the fb, retweet etc.? And if so, where may I get that code? I'velooked but could not find. Thank you!

Unknown October 7, 2010 at 7:21 AM    

Thanks, lol! Actually print button or sometimes type gets weird. Here's an example on the type, I guess it does the same thing with the print button... http://www.skinnytaste.com/2008/06/baked-sweet-potato-fries.html

By the way, yes, I went to several blogs before yours and yours was the only one that worked and you were very helpful!

Greenlava October 7, 2010 at 10:17 AM    

@Sarah
It's much easier with the bar, provided the buttons fit the bar. Click "Get this" link at the bottom it.
BTW Facebook Share and Like button are two different things. You want them both :)

Greenlava October 7, 2010 at 10:59 AM    

@Gina @ Skinnytaste
That's easy. Just add a line break [br/] before the button (before code line 3).

Wayne October 8, 2010 at 4:31 AM    

Hey G,

Looks like my 'tags' section has become aligned with the like / share buttons (see here ----> http://www.1forthepeople.com/2010/10/new-single-mystery-jets.html)

Do you know how i can place the 'tags' footer below them as normal?????? As always, Thanks!

Greenlava October 8, 2010 at 8:22 AM    

@Wayne
Go to Design > Edit HTML and find this:
.post-footer {
margin: .75em 0;
color:#3f3f3f;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

insert this code:
clear:both;
before the closing curly bracket.

denaihati October 8, 2010 at 9:32 AM    

Tips yg bagus dah bagus kalau pasang kat blog utk marketing

Wayne October 8, 2010 at 2:58 PM    

@G

Fantastic. Best blogger hello guide on the net, skills!!

Thanks again.

Greenlava October 8, 2010 at 6:54 PM    

@denaihati
I have to agree. It's a definitely a must-have for a marketing blog.

@Wayne
Thanks. Spread the news and do come back :)

PreDo November 7, 2010 at 8:32 AM    

a very very helpful site. thank you.

shindosai November 10, 2010 at 9:21 AM    

hi. i have this error:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute "cond" associated with an element type "null" must not contain the '<' character.

Greenlava November 10, 2010 at 10:35 PM    

@shindosai
Make sure you copy the complete code.

Unknown November 17, 2010 at 10:12 PM    

i can find in my edit html section
how?
can you give me suggestion?

Greenlava November 18, 2010 at 11:32 AM    

@elmyra
I see the button now live on your blog. You must've figured it out already :)

bookspersonally November 20, 2010 at 1:49 AM    

This worked out great- is there a way to see who "likes" a post- it shows the first one or two people (facebook friends) and then "+ number of others" - Thanks for all the help

Greenlava November 20, 2010 at 4:43 PM    

@your sort-of-domestic-not-quite-demi-goddess
Set show_faces to true and heights (at both locations) to 60 and 60px respectively.

johnny November 24, 2010 at 9:38 PM    

how to put this like button in the post where i have after the jump button?

Greenlava November 24, 2010 at 11:08 PM    

@johnny
By placing the code in the post footer.
Find this line of code in your template:
[div class='post-footer']
and place the button code right after it.

Tom December 6, 2010 at 11:23 PM    

I installed the code and it works great. But when someone clicks like it shows up on Facebook as "Tom likes Cleveland sports torture: this a test post on clevelandsportstorture.com" is there a way to remove the part before the colon when it posts on Facebook? So it says Tom like test post on clevelandsportstorture.com.

The site I have it on is http://www.clevelandsportstorture.com

Thanks.

Greenlava December 7, 2010 at 12:44 AM    

@Tom
Face Like button (and Share button too) uses your page title. To understand what is a page title and how to change it, read SEO friendly Blogger page title

DorleeM December 12, 2010 at 10:54 PM    

Thanks so much for your help! I managed to insert the recommend button :)

I'm just wondering how I can get rid of the "be the first of your friends to recommend part?"

Greenlava December 13, 2010 at 1:55 PM    

@DorleeM
Choose "button_count" as layout (see step 6).

Khairi Mohd December 15, 2010 at 12:03 PM    

GL,

Which one is better:

Like button, OR

Share button?

TQ.

Greenlava December 16, 2010 at 11:36 AM    

@Khairi
I like (no pun intended) the Share button. It posts your post on the sharer's wall, making it visible in his/her friends' news feed as well.
A Like will only mentions the Liker likes your post, on his/her wall. Friends won't see it unless they view his/her wall.
However, Liking requires less effort because it is a one-click process whereas Sharing requires two clicks to complete.

CarlyB December 19, 2010 at 8:56 AM    

how do you add some more space between the actual post you have written and the like button? It ends up being too close to the content I posted...thanks!

Greenlava December 19, 2010 at 10:02 AM    

@CarlyB
Increase the top padding in code line 3 -padding:5px 5px 5px 0. The top padding is the first of the four values.

Mike Wood December 21, 2010 at 12:39 PM    

My problem seems to be that it is placing it in the body of the post. Equal to the last line and pushing my name to the right instead of left.

It also appears above the line I have for the Jump cuts which is not very useful. Your html seems to be the only one that works so far - even partially, for me.

http://mikewoodphotography.blogspot.com/2010/12/soccer-field-in-winter-2.html

How can it be on the "Links to this post" line on the right of the Share buttons?

Mike Wood December 21, 2010 at 2:01 PM    

regarding my previously posted comment, I actually I figured it out. Was able to place it after the div class='post-footer' and after experimenting moved it down to an acceptable position. :)

Tom December 23, 2010 at 12:47 AM    

I've added the like button to my blog. it works fine in chrome and IE, but when I place it above my post it pushes images to the right in firefox.

Here's an example
http://www.clevelandsportstorture.com/2010/10/knowing-is-half-battle.html

any help to fix the formatting error would be appreciated

Greenlava December 24, 2010 at 4:07 PM    

@Tom
Try removing the float (float:left;) in line 3.

Sara January 12, 2011 at 9:35 AM    

thanks! awesome job!

Mel January 13, 2011 at 10:53 AM    

OHMYGOSH...I have worked on getting this button on melsboxofchocolates.com for almost four days now. I have tried a million codes and THIS ONE WORKED!! I can actually now see the like button on my main page as well as individual posts. THANK YOU and thanks to @skinnytaste for pointing me this way. AWESOME!!!!

Mel January 13, 2011 at 11:23 AM    

The code worked fine and is showing up everywhere I wanted it to, but I noticed when people like the post it says soandso "likes Mel/ on melsboxofchocolates.com". I thought it was supposed to have the title. Can you help??? I read in previous comments it could have something to do with title of my blog Mel's Box of Chocolates having apostrophe. Any advice?

Greenlava January 13, 2011 at 5:09 PM    

@Mel
Have you removed the apostrophe?
If you have, try Liking a post that haven't been liked yet. The title should display correctly.
For the posts that've been Liked, they will (hopefully) get fixed after 24 hours.

Mel January 13, 2011 at 9:16 PM    

I followed through your comments and other posts and tried it this morning and it worked!!!! The post title,blog title, and link all work fine. You rock! Thank you so much for the time you spend to help people like me. I'm spreading the word about your awesomeness.

Operation Write Home January 14, 2011 at 3:14 AM    

My code doesnt have the in it....I keep trying to add it in different places (one at a time) near the post settings, but it just won't work. Any clues?

http://www.owhstarsandstamps.org

Greenlava January 14, 2011 at 4:37 PM    

@Operation Write Home
"data:post.body" equals your post content, so it must be there. Make sure you tick "Expand Widget Templates" checkbox (located on top right corner of your template code's window). Then press Ctrl+f on your keyboard and enter "data:post.body" (without the quotation marks) in the search box to find it.
I see you've put the code in the CSS section of your template. Don't forget to remove it from there.

Operation Write Home January 14, 2011 at 11:20 PM    

Expand Widget Template! You are a WIZARD!!! Much awesomeness - thank you!!! It works!

Operation Write Home January 15, 2011 at 12:21 AM    

Well, I still have a small issue....not sure what's up. It's at the bottom of the post, and hangs out the left margin. You can still like it but it's way offscreen. Any ideas how to fix that?

http://www.owhstarsandstamps.org

It worked fine on my other two blogs....

Greenlava January 15, 2011 at 12:59 AM    

@Operation Write Home
The blog's post area width is set at 410px, smaller than the Like button width of 450px.
Change the widths (at 2 places) in line 4 to 400.

Operation Write Home January 15, 2011 at 1:10 AM    

That seems to be moving it even further left.....

Greenlava January 15, 2011 at 2:06 AM    

@Operation Write Home
You've changed the widths of the wrong code, the one that I asked you to remove in reply #62.

Operation Write Home January 15, 2011 at 2:29 AM    

I am such an html idiot! Thanks for your patience. I did have two copies of it in there, I just never realised it. Works perfectly now! On my other blogs I added it in the right place, so those worked fine - it was just this one that made me crazy.

*happy sigh*

Thank you!

Kim T. Hamer January 16, 2011 at 2:56 PM    

This was so helpful! I am not a techy and yet it was easy to follow and it worked quickly. Thank you for the clear, precised directions!

Loki January 19, 2011 at 1:06 AM    

Lots of thanks, you make it so pretty cool and easy :)

Anonymous,  January 20, 2011 at 2:59 AM    

i have down everything you said and it still won't show up at the bottom of the post!

bookspersonally January 21, 2011 at 4:18 AM    

I suspect there is sometimes a delay between people clicking the FB like button and the "likes" actually showing up on the blog (will go for a long time with no likes, then suddenly show up with a bunch). Anyone else experience this? Thanks as always for the advice.

Greenlava January 21, 2011 at 6:37 PM    

@Jovone
Where did you place the code? I can't find it in your source code.

Greenlava January 21, 2011 at 10:34 PM    

@your sort-of-domestic-not-quite-demi-goddess
I've always thought the count shows up almost immediately.
However, I did read somewhere saying that there is a 60 second delay.

WADIE January 23, 2011 at 8:14 AM    

Hi, good article, thanks a lot. i tried already. it's work..

Jamie January 24, 2011 at 10:27 AM    

Thank you so much for the code. However, the Facebook like button only appears on my post pages and not on the main homepage too. Any suggestions why?

Greenlava January 25, 2011 at 12:36 PM    

@I'm Jamie or JJ!!
It must be due to the read more.
Try move the code to ABOVE this line:
[div class='post-footer']
The button will change position though, but it should appear on homepage.

Daminho January 28, 2011 at 4:51 PM    

thanks it worked on my blog, please ow can i change the font color of the "be the first of your friends to like this"? thanks

Greenlava January 28, 2011 at 8:47 PM    

@Daminho
You can't change the font color, because it's in an iframe.

Deborah Younglao, Silk Painter January 31, 2011 at 9:18 AM    

I have been trying for hours to get the like button on my blog, following so many different instructions. Yours is the first one that finally WORKED! Thank you so much!

Unknown February 6, 2011 at 11:16 PM    

Greenlava: As usual, your instructions are great!

My husband was diagnosed with cancer, in October, so I now have another "serious" blog, and am so happy to have this info.

Greenlava February 7, 2011 at 9:25 PM    

@Sarah
Truly sorry to hear that :(
Hopefully blogging about it will help you cope somehow.

Sujatha February 10, 2011 at 5:39 AM    

Thank you so much. The code worked great

Whimsical Wendy February 17, 2011 at 3:59 AM    

Wow - I managed to fix the error myself! Trust me, no-one is more surprised than me ;-)
Sorry to bother you & thanks for the great instructions.

Anonymous,  February 23, 2011 at 5:05 PM    

is there any possibility to get notifications on may facebook that somebody liked my post on blogger?

and whet my freinds like my post i have : "A.Z and three other like it" - haw can i know who these 'three other' are? i cannot see their names..

waitin for help :)

Greenlava February 23, 2011 at 8:59 PM    

@Anonymous
You can see the thumbnails of those 'three other' if they are your friends.
To do that you want to set the layout=standard, show_faces=true and the heights to 80px or higher.
The thumbnails of your friends will appear below the button. Only one row will be shown.

Anonymous,  February 23, 2011 at 9:36 PM    

hmm but i have "layout=standard, show_faces=true" and higher px. it shows me names and photos of two first persons and not the rest/the other who liked. and i;m sure that these three people are may friends on facebook but i can't check who exactly they are [names]..

Chris Rae February 26, 2011 at 7:32 AM    

Hi I Wonder if you can help...
I'm having real issues with face book like buttons on my blog. some like buttons on post are working and othere link to the home page. could you have a look if possible,

http://www.1moretune.co.uk/

any help would be much appreciated

Thanks again

Greenlava February 26, 2011 at 12:18 PM    

@Chris Rae
All buttons work.
The problem is with the title that appears when you click the Like button. On some posts it shows you liked the homepage (One More Tune) instead of the title of the posts.
However if you were to check your Facebook, the title does appear correctly (under Recent activity).
This has something to do with the way Facebook extracts the title.
To fix it, run the troubled post URLs through Facebook URL Linter.
To ensure Facebook picks up the correct title for future posts, once a post is published you want to either:
1. Like the post from the post page (not from homepage).
2. Run the post URL through the URL linter.

Hmm...maybe I should write a tutorial for this. What do you think?

Chris Rae February 26, 2011 at 8:44 PM    

Its seems to be working now with all NEW posts, but the OLD ones with the issue eg. http://www.1moretune.co.uk/2011/02/axel-bauer-lanford-feat-stephen-pickup.html
i cant get to fix. fdoes this mean i have to delete them and add them again as a new post ??

Also just to mention,
Thank you for taking the time out to look at my issue!!
it is greatly appreciated!!.

Greenlava February 27, 2011 at 12:07 PM    

@Chris Rae
I ran a couple of your post URLs through the linter and it did fix the title, but a few others just refused to change (eventhough all of the titles dispayed correctly on linter page) :(
Delete and republish? Hmm...maybe you want to test it on one post first. See if that works.

MyHeart March 1, 2011 at 2:43 PM    

So Great! Thank you so much...
Its really work! I've trying so much tutorial to learn bout this thing most of them just make a headache! Not work out at all!
Thank you so much again!

himalaia March 4, 2011 at 12:38 PM    

Works beautifully, thanks.

One thing... This part is kind of confusing:
"To also display the button in static pages, remove the conditional tag -code line 1 and 6."

Actually you have to remove line 2 and 6, not line 1 and 6.

Greenlava March 4, 2011 at 5:36 PM    

@himalaia
Correction done. Thank you for pointing that out.

Things We Adore March 14, 2011 at 4:20 AM    

Could anyone clarify if the instructions above will allow the like box for the facebook page to be added. I tried a couple of different things and either get blank space or the facebook logo with the url to facebook.

Let me know

kamikaze.gr March 14, 2011 at 7:49 AM    

Hello. Thank you for that helpful post from Greece. I put it in my blog but i have a problem. I would like the button to be shown only after pressing the "read more" button in my blog (not in the main page). Where should i copy the code?

Greenlava March 14, 2011 at 6:47 PM    

@kamikazi
Replace line 2 with a post page conditional tag:
[b:if cond='data:blog.pageType == "item"']

if you want to know more about conditional tags, read Targeting specific pages/URLs with conditional tags

Greenlava March 16, 2011 at 5:58 PM    

@Luvmysibes
Open the page in Posting > Edit Pages. Switch to Edit HTML and paste in this code:
[iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/furbabybracelets&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=80' style='border:none; overflow:hidden; width:450px; height:25px;'/]

Jade March 17, 2011 at 7:45 AM    

it worked great. one question - is there any way i can have it go below the "read more..." link? if you need to see what i'm talking about, please visit www.yourfirstlove.co and look at one of the condensed posts. thank you so much for your help!

Greenlava March 17, 2011 at 8:26 PM    

@Jade
Find this line:
[div class='post-footer']
Put the Like button code right ABOVE it.

Jade March 18, 2011 at 12:04 AM    

Thank you so much!

FilmReaper March 23, 2011 at 12:08 AM    

Thank you very very much

The Diva April 5, 2011 at 8:16 AM    

I love you right about now.

Marco Pino April 9, 2011 at 3:25 PM    

Hi I'm a bit confused about the difference between  a share and like button.  You said: "I like the Share button. It posts your post on the sharer's wall, making it visible in his/her friends' news feed as well. A Like will only mentions the Liker likes your post, on his/her wall. Friends won't see it unless they view his/her wall."

But at the beginning of this post you said:

"The Like button lets your reader share your content with his/her friends on Facebook. When clicked, a story appears in his/her friends' News Feed with a link back to your blog."

So is this Like button of this tutorial going to share  our blog on the friends news feed?

Thanks for such a great and useful blog

Xtina April 15, 2011 at 7:26 AM    

Hi! Thank you for your post. How can I put the like button under the labels bar on blogspot?

Candy April 16, 2011 at 12:04 AM    

nice working on my blog... thanks.

Stefan April 16, 2011 at 1:35 AM    

Hi
I have use your instruction, but i have a probleme
Whean some one use the like button it shows my blog description instead of the post content. Only the post title and image its right, but no post content
Can u pls tell me what i shold do?

Greenlava April 16, 2011 at 4:26 PM    

@Xtina
Where is this "labels bar"?

@Candy
You're welcome

@Stefan
Try this: Facebook share showing wrong description –solved!

zoimoie April 20, 2011 at 11:21 AM    

I should have come to this site first.It worked on the first try.

datastage April 24, 2011 at 11:55 PM    

Thanks for sharing such a nice code to increase traffic in my blog.

Robert C. Binyon May 13, 2011 at 2:48 AM    

Is there a way to fix it so that it doesn't say "John Doe likes "The L.A. Minute" every time? Instead having it show that the person likes whatever the title of the post was?

Shailesh Tripathi May 17, 2011 at 9:34 AM    

I loved your article again as it has no competent. Further I'm waiting more articles like this.

Labyrinth Design and Build May 17, 2011 at 9:40 PM    

surely i'm gonna check for your updates regularly
very helpful and easy-to-use tricks
thanks..

Unknown May 24, 2011 at 10:12 PM    

This is fantastic, exactly what I've been looking for. I just added it to my blog http://moraimaphoto.blogspot.com/ now will just wait and see how it works, I'm so excited.
I have one question though. Is it possible to show the "like" button without the count? should I just change the layout value to 'button' only or it won't work? You do have the option without the count for the "share" and the "tweet", but no mention of that on this one. Thanks in advance!

Greenlava May 26, 2011 at 10:10 AM    

@moraima (mo-RYE-mah)
For Like and Share buttons, set layout to "standard".
For Tweet button, set data-count to "none.

Asterisk Boutique Administrator May 27, 2011 at 2:37 PM    

Thank u very much *(^_^)*
It's very helpful.

SACRED TEMPLE OF DIVINE June 17, 2011 at 3:38 PM    

WORKS! wonderful... thanks

thecrowsofshadows June 18, 2011 at 4:20 AM    

/like

husna June 28, 2011 at 3:45 PM    

thanks and yes it works!

Rachana Gandhi June 29, 2011 at 2:54 AM    

Hi,

I am adding a facebook like button to my webpage using the XFBML implementation of the like button. So with standard layout and show_faces=false, I see the names of the friends who have liked the webpage when I click like. Is there a limit on the number of names that can appear in that list? If no, then does it dynamically create a new row when therow is filled up with friends?
Can you also tell me the limits when the show_faces is set to true?

Thanks!

Greenlava June 30, 2011 at 1:59 AM    

@Rachana Gandhi
If I remembered correctly, I think it shows only one row's worth of friend faces. I'm not sure how many faces fit in a row.

Catalina Cadena July 7, 2011 at 12:48 AM    

I added the 3 buttons (like, tweet and google +) but I cant make them appear only in one line. how can I do that?

Bimalpreet Singh July 8, 2011 at 7:17 PM    

Thanks it start working... :)

symposio August 17, 2011 at 5:14 PM    

The Like button shows up OK on the individual posts on the home page, but doesn't show up when I go to an individual post by itself.

I've just noticed this since I changed template - before that the button showed up. As I get a lot of people coming direct to individual posts from search engines, this is quite important to me - for example for Baclava I had lots of Likes before the button disappeared.

Thanks for your help!

http://realgreekrecipes.blogspot.com

Career Mom Online August 21, 2011 at 10:38 PM    

Just wanted to let you know that this is working like a charm. When I first tried this, nothing. It just wouldn't work. And then I realized, I had 4
codes in my template. I did the steps above to all 4, and then it worked. So thanks for a great post.

Anonymous,  August 22, 2011 at 10:25 AM    

Thank you, just added this to our blog

Greenlava August 23, 2011 at 12:45 PM    

@symposio
I guess your button is wrapped in a post page conditional tag, like this:

[b:if cond='data:blog.pageType != "item"']
LIKE BUTTON CODE
[/b:if]

This is just a guess, because conditional tags are not visible from source codes.

Jayesh Prajapati August 27, 2011 at 12:46 PM    

Thanks you dude it is working now, but i want to add more button like twitter, google+ so, how can add it?

Greenlava August 31, 2011 at 10:15 PM    

@SEO Expert
You can find more button tutorials here:
http://www.bloggersentral.com/search/label/social%20media

Green Tea September 24, 2011 at 10:01 PM    

Is there any other easier way for this?
Something a newbie like me can do perhaps?
Thanks.

Greenlava September 26, 2011 at 6:57 AM    

@Green Tea
This is the easiest.

Ritas' Delicious Delights December 17, 2011 at 3:32 AM    

Hi, I am really in need of some help. I was able to put a share button on my blog but cannot seem to be able to add the like button. I joined the Wibiya to get the toolbar and it says it automatically adds it for you but that did not happen. I really want a like button. I have been working on this since OCT. and am SO ready to get it going. Any help would be appreciated. Thanks!

Greenlava December 17, 2011 at 11:23 PM    

@Ritas' Delicious Delights
I don't see the code in your template. Have you added it to your template?
Anyway there is a Like button on your Wibiya toolbar. I tested it...works fine.

Jen January 9, 2012 at 3:00 PM    

This was great, thanks so much! This was the ONLY post I found where the HTML code actually worked. I have a question though, I am trying to get a Twitter and Facebook button at the bottom of every post and now they are not lined up. Any way to get them to line up on the bottom? Here's the code:

[data:post.body/]
[!-- Facebook Like button Start --]
[b:if cond='data:blog.pageType != "static_page"']
[div style='float:left;padding:5px 5px 5px 0;']
[iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/]
[/div]
[/b:if]
[!-- Facebook Like button End --]
[a class='twitter-share-button' data-via='jenohlman' href='https://twitter.com/share']Tweet[/a]
[script]!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script]
[div style='float: left;'/] [!-- clear for photos floats --]
[/div]

Greenlava January 13, 2012 at 10:51 PM    

@Jen
Replace the Facebook's div inline styling with this:
[div style='float:left;padding:0 5px 0 0;']

Low Oil Level Switch February 8, 2012 at 4:40 PM    

Hi,
I came to your blog and have been reading along your posts. I decided I will leave my first comment.

kemon baca February 14, 2012 at 2:14 PM    

Today, when I try this method, I can't see anything on my blog.
I was follow steps like you that.
But, the button can't see.

Greenlava February 17, 2012 at 1:00 PM    

@kemon baca
Looks fine from here.

Jen @ frazzled 5 February 29, 2012 at 2:20 AM    

Greenlava, I cannot seem to find an Edit HTML when clicked on Design. Is it different in New Blogger Interface?

Greenlava February 29, 2012 at 9:02 AM    

@Frazzled Mom of Five
For new UI it's Template > Edit HTML.

GTA San Andreas March 20, 2012 at 11:45 PM    

By follow your 2 articles, I have created a Like Box for my site!
Than yoU!

Aakash (AK) April 9, 2012 at 10:05 PM    

@Greenlava
Please can you help me, I am new in this blogging thing
My Like button is half shown, I can't click on it

And Where do i have to paste the link of my facebook page in the code provided?? O.o
please help

Greenlava April 10, 2012 at 2:52 AM    

@Gods from Outer Space
If you want the button to like your FB page, replace
&quot; + data:post.url + &quot;
with the FB page's URL

Christie April 19, 2012 at 11:49 AM    

FINALLY...someone who posted simple, easy-to-follow instructions. Before I found yours, I can't tell you how often I'd just banged my head down on the keyboard over installing the Facebook Like Button.

On the facebook site, they let you generate the HTML code quite easily........but then they had ZERO instructions on how or where to put it on your blog.

I am a brand new blogger (http://www.actualtimesmayvary.com just launched Monday), and guess what? According to stats, Facebook has sent me the most traffic thus far. So glad I was able to get the button running for the big day...thanks to you!

Unknown May 2, 2012 at 10:47 PM    

This worked beautifully! Thank you so much.

Johnlyn May 8, 2012 at 1:40 AM    

Thank you so much for your clear directions! Works great.

Unknown May 26, 2012 at 8:58 PM    

I just want the FB like button on my main page, not every post. I have been banging my head against the wall trying to make this work. I have tried everything suggested here, and I have the code from FB, but I can't make it work. Someone please, help me!

Greenlava May 28, 2012 at 2:48 PM    

@Mal Duke
Copy the code below and paste it in a HTML/Javascript widget:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like send="false" width="450" show_faces="true"></fb:like>

Anonymous,  June 13, 2012 at 2:50 AM    

any way to center it directly under post?

Greenlava June 13, 2012 at 11:24 PM    

@Anonymous
For best result choose either button_count or box_count layout.
Then replace float:left; in line 3 with margin:auto;
and change the widths (2 places) in line 4 to 90px.

Shazy June 14, 2012 at 5:19 AM    

After see many post i find this post Thanx you For solve My problem keep Blogging :)

Yateendra sahu June 16, 2012 at 12:37 AM    

you have disabled copy past here ..so how i can copy this code<

Greenlava June 16, 2012 at 8:30 PM    

@Yateendra Sahu
Just click the "<>" icon.

H I July 1, 2012 at 1:39 AM    

thank you!

Geo Tv September 8, 2012 at 6:22 PM    

Totally agree with your suggestion... Very nice post and good information here... Thanks for posting that....

Dinesh October 6, 2012 at 8:21 AM    

I would love to visit this blog quite often ..... thats a great post ......

Food Taste and Recipe December 1, 2012 at 1:08 PM    

Thanks, I successfully placed it to my blog.

Anonymous,  January 8, 2013 at 1:26 PM    

Thanks you so much.

Wardrobe Resurrection January 11, 2013 at 9:56 PM    

Easy step by step, I've been trying to get this right for ages and you guys actually know how to teach someone to do it, Thanks :)

Alistair McGuinness January 16, 2013 at 5:53 PM    

Thanks for the info....so cool when you find something that works. Will it work immediately?

Greenlava January 18, 2013 at 6:06 PM    

@Alistair McGuinness
Yes the button should appear once you refresh your page.

FreeFBLike February 9, 2013 at 9:42 AM    

Thank you very much to share this easy step to add facebook like button

Jntu World March 30, 2013 at 2:47 AM    

It was good to see this blog with my requred code. But I have one doubt. Can I use this code as a widget in blogger. I would like to dis play this code in the home page also.

Unknown April 24, 2013 at 12:08 PM    

Thnks man...I am grateful

Yaso May 31, 2013 at 1:01 PM    

thanks, details step by step configuration,
Its useful for begineers,,,

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.