Try Advanced Blogger Templates Search >> Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.
few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.
and you’ll learn how to customize
- change the verb, like or recommend.
- change it’s color.
- change it’s font.
The button code,
<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>
where to add it ?
Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code
<div class='post-header-line-1'/>
And after it, paste your button code
What, If you didn’t find the code above in your template, The try to find the following,
<data:post.body/>
And paste the button code Before it.
click Save Template and you are done.
in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,
in the above code change the following parts,
- like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
- arial this part controls the font type, keep it or change it to one of the following,
lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana - light this part controls your button color theme, and you have three options, light, evil, or dark
- Update, How to make it appear on your home page.
in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,
<b:if cond='data:blog.pageType == "item"'>
</b:if>
I wish you all like it and please leave your comments if you need any help, to see demo for it please click here.
Related Tricks & Tutorials
About The Author
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here
thanks nice
Yep, really nice. I just put the code after the “” so Facebook “like” button will appear at the end of the post. People usually decide do they like the post after they read it…:)
Is there any way that like button apear in the bottom of the post?
Hi Zeljko, sure, you put it’s code below, a code that similar to
and just paste your code after the end of the line,
Thanks for the customization of this like button! Its easy nw, its one click easy, i have an increasd no. of fans since Like started as compared to previous fan button! hoope this hels more!
I pasted the the code given according to the instructions, But the ‘like’ button didn’t appear.
hi Racheal
this is because you preview your blog home page or index page, your like button will appear in the post page,( inside it )
i hope it’ll work for you,
I found out that the ‘like’ button could only be seen in one post, but not the home page of my blog. I thought it appear in every post in the main page. Can you help to fix this? Thank you so much, a reply would be really appreciated
hi Racheal again, i’ll update the tutorial to teach you how to make it appear in your home page too.
hye there..
thank you so much for making this so easy.. i hv tried it and it works!
great! thank you..
hope u could make tutorials about the other fb’s social plug in also..
in addition, i just realize that this like button could only be seen by people who’s in the friend list. if my visitor is not in the friendlist with the other that liked my post. they cannot see who liked it. tq. or is this only happen to me?
hi fleur vinca, thanks for commenting, i’m working on it right now.
not working
hi, please visit the post page itself. and you’ll see it inside.
Thanks so much for this great tutorial. I had tried some tutorials on this subject from other sites last week, and none of them worked correctly. This one worked like a charm, and I love how you gave instructions on putting the like button below the post title instead of just below the post. Awesome!
hi betsy and max,
i dont know whether this only happen to me, but i realize that the like button can onli be liked by two person. if third person liked the post, then they only show 2person only and eliminating the other person. can u confirm that to me?
hi fleur, this working great and perfectly, please test it again.
any chance i could get some help?? i’m struggling and can’t find any of those codes. =(
thanks so much
hi dee, please make sure to check expand template widgets box before searching.
thanks Betsy, your words are great and this encourage me for adding more and more tuts.
owh.. i have to change template first.. my previous template not working
how can i ad this to blogger pages?
hi zsolt, you’ll have to add the code to your page content itself.
waiting for facebook comments plugin. i know facebook also release comment plugin but i dont know how to implement. so please…
hi thalhah, i’m already working on it now a days.
fantastic!
thank you for this!
works perfectly on my photography blog, for sure!
Great now works!
Thanks!! You’re awesome!
Thanks!!!!!
amazing!!!
HUGE hugs for sharing this!!!
It doesn’t look like the “Like” button on facebook.
It only show a checkbox.
I think size for width of the frame can make long distance…450 <–
It works! Thanks for the explanation. One question: the Like button pops up at the top of my posts. How do I get the button to show up at the bottom of the posts?
hi samuel, to add it in this location, you have to paste your button code after the following part,
thanks, this is a good post…
very informative and worked like a charm..
thanks for sharing..
I followed your directions to a tee and it worked perfectly; better than what’s on the FB Developers social plug-ins page, thanks a lot!!
thanks russell, this is an honor for me.
Thank you for your very well worded instructions. I followed them and it worked perfectly. I was wondering, however, if you can suggest placement for the code if I want the “like” button to be for the entire blog and not just for each post?
And, any way to tweak it so it shows WHO likes the post?
oh, nevermind, I just figured out it that it only shows names of your FB friends.
yes kathryn, this is it, i’m glad coz you figured it out.
Your Comment Here …. * Thanks for your reply Max. I’m still trying to figure out how to make the “like” button be for the entire blog. Any idea where that would go in the html code? And, would that even work?
nice mann.. it work…
fantastic!
thank you for this!
IS there any way to add this to an OLD blogger template?
Saludos
l3utterfish
hi l3utterfish
sorry but i’m not familiar with the old blogger blogs.
After someone Likes it, the names disappear. It seems like they become white and won’t show up against my blog. (I moved it to the footer of my post, rather than the header; didn’t want to be presumptuous putting it before someone has a chance to read it!)
Thanks for sharing the info. You made it so easy!
Hi all readers and visitors,
thanks all for your great comments and i promise you all to post more and more great tutorials.
so nice and a lot with info tq max…
Because of great Blogger resource blogs like yours, we’re all fortunate to stay informed about the latest hacks we can perform for better usability for our readers. Thank you!
thanks carlo for your great words, its really inspiring me to add more and more tutorials and templates to the site.
I got it to work…but rather then linking to the post…it’s linking to the blog and pulling in my profile picture the wording beneath it and sometimes additional images…any ideas – I included the URL if you want to see?
hi rita, i visited your blog but i don’t see the button in your blog.
hi rita, i visited your blog but i don’t see the button there.
Hi there,
All working great. Disabled it from homepage and separate pages with the code provided. However: I have a blog with one post per day. Is there a way to show it on the homepage (and not on the blogger pages) in a way that when you press “like”, you post a direct link to the latest post to facebook? I mean, if I enable it for the homepage, people that like my post of that specific day will always post my general url to facebook, not the link to the post.
Hope you understand what I mean
. Thanks for your thoughts.
hi Dennis, yes you can, in your blogger account, go to dashboard >> layout >> edit html >> and click addnew gadget, and paste the button code there. but in the above code change " + data:post.url + "
with your blog url, and click save then change it’s place to your favorite place.
Hi!
I get an error message when I click like…Please can you help me to fix this problem as soon it is posssible!
Thank you very much!
hi jehona, do you still getting this problem.
Hi Max,
I want to know can I insert a Fixed bar in the blogger page like as in Facebook.
If yes how…
do you mean the bar in facebook button, please show me any sample.
This is awesome. Thanks!!!!
Thanks for make it so clear.
i can’t find the two codes
<data:post.body/
is there any chioce that i could fine in my template??..
hi sarah, please check expand post widget before you search for the code.
Hi i succesfully pasted the coding and it appeared…. but when i click the button like, it appears Kanishen Balakrishnan likes this link and then this appears Be the first of your friends to like this. · Admin Page · Error
I’m also having this problem. Sometimes the ‘like’ button works, sometimes I get this message.
Also, sometimes when it has worked correctly, it doesn’t show up on my friends’ feeds.
Max
please help me , when i add this booton it work right but when i click i like a poste , in facebook i show the title of my blog not the title of the post liked !!! please help me
below your blog title, you’ll see the post title, please check it.
This worked great & was easy to do! Thanks so much!
I tried everywhere to find a way to make this tool work on my blogger. This is the first one of many that gave a great tutorial. Thanks for all of your help!
thanks sabrina, it’s pleasure for me to make you happy.
Fantastic work, absolutey amazing. I have a small problem. At first all worked well, but now when I click ‘like’ on a post sometimes (more often than it doesn’t) I get an ‘error’ message. Can you help? Thank you!
hi Andrew, this problem happened some time, and it comes from facebook. it’s not about how you added the button or how i told you to add it, i wish facebook developers will fix this soon.
Thank you Max, very kind of you to take the time get back to me. I should have guessed it was a problem with Facebook.
Since I left the message here the problem seems to have been resolved, but when people ‘like’ posts on my blog they are not appearing on their Facebook news feeds- is this also Facebook’s problem?
Thanks again Max, this is a brilliant idea and SO helpful.
Thanks so much ^^
Hi, this is working perfectly except when I put the code in, I get blank space between the Facebook button and the “Posted by” line. I’m not using any line breaks in the template. Any idea how I could solve this? Thanks.
hi yellow, please show me your blog so i can help.
Here’s how it looks without the Like button: http://img717.imageshack.us/i/14893086.png/
And with: http://img444.imageshack.us/i/79712168.png/
Great tutorial. Up and running in like 30 seconds. Excellent!
-Carlo.
mAX, why this code dosn’t work in my blog, when i preview,its okke, but then its nothing .huhu
I see how it’s added (I actually moved mine to after the time-stamp instead) and now I see “2 people have “recommended” (the word I chose).”
So that’s cool, but are statistics gathered anywhere? How do I find out who liked/recommended the article?
hmmm can’t find the code to begin with, to put the like button code after it =(
or
what do i do? is it because i don’t use the default template from blogger?
thank you for your tips! it’s really a big help to us
thanks so much!! just a question, how do you get it to appear on your homepage of blogger?
Your Comment He
More than one widget was found with id: HTML4. Widget IDs should be unique.re …. *
this is what happens always with my minima template..always. i cant even add a comment box beacause of this same error.. can anyone help me please??
okay at first it seem to difficult to follow but when you really pay attention.. everything will be as easy as pie.. thank a lot!
your post is very usefull… thanks…
Thanks a lot!! This is really useful!!
Is there a way to show more than 12 faces/pics??
Hey Max, been trying to get the code right for a while. Now its telling me I have 9 likes and I just put the code up. Tried Facebook’s Developer instructions and the same thing pretty much. When I preview the post, it shows and says 9 likes on a post with no content. Strange, maybe you can help.
same problem here. i would love it if you could help me out with this. thanks a lot!
Hi..
I’ve done what you said.My page’s appearance changed.How can make this button and my theme work together?
http://www.1pix.org/multi/images/6tcttbn3scbz7u3g1oq.png
Here is a picture of how it looks.My writings moved right.
not working in my blog…. can you help me??? maybe i need to change template?? but when i try using template designer AWESOME, INC. it works but the expandable posts is not working… can you help me… thanks
thanx alot for this i did step by step how u said and got positive results….
I did as you mentioned above in both cases but still nothing to appear…take a look
http://justimaginnow.blogspot.com/
can you solve my problem…
Hi,thanks for sharing this! It all worked out well for me but I have the same question as Andrew, about when people ‘like’ posts on my blog they are not appearing on the Facebook news feeds. Is there something to do about it?
Hi Max,Can You Please Explain How To Add The Facebook Like Button On The Right Side Or Left Side Of The Post.Just Like You Mentioned In Your Post About “How To Add Retweet Button”
Please I Need Your Feedback
Thanks For Your Help.
hi. i try following ur instruction but it seems i cant. no “like” button appears. can u help me out w/ this? thanks and more power..
Thanks a lot!! This is really useful
great. it’s easy and working.
Thank you for the tutorial and I’ve got the button on my blog. However I need to know who are the “others” in the list. Can you please help me with that since it is not clickable. Thank you very much!
thx,,
i’ll try it
Free Download Film
Dear Max,
I made a Like vs. Not-Like Button for Facebook – no download or other requiremets.
Could you check it and if you like share it with your readers?
http://apps.facebook.com/Not-Like
G’day, I just wanted to say thanks heaps for your hard work
I did both of the ways so many time…but it still cannot works..can some body help me???
CPM AND CPC AD NETWORK
WEBSITE OWNERS EARN MONEY
http://WWW.ADSWORLD.TK
* Go from signup to embed code in seconds.
* Generate revenue from website or app ads, and get paid for every clickand more supported.
* Text and image ads in standard sizes.
* Live statistics on clicks, impressions, CTR and more.
* Join over 17,500 satisfied websites.
INSTANT PAYMENT WOULD BE MADE BY PAYPAL
Super! Thnx. It works perfectly. With your help I feel almost like a genius now
Thanks for the great like tip:-) I added in my blog already and would like to share to other on your good job…Keep it up!!!
does this work for blogger classic template?
how to use like button for separate posts in blogger ?
THx for lesson!!! love it some much!!
Hi. Thanks for the lesson! I’m just wondering if it’s possible to see who has clicked the like button? All I see is a counter like “one other person…”
Did you get an answer? How can you see who has clicked the “Like” button? All I see is the tally.
It works! thank you
it’s something new for me, i will try it
Thanks for your tutorial, but it didn’t work to my blog. Can you please check it out for me? Cos I couldn’t find “template”, there’s only “design” and the HTML codes are very different. Thank you so much I really appreciate it
Hey is there a way you can SEE who “liked” your posts on blogger? I can’t figure it out!!!! Thanks!
Thank you dude nice info thanks.
Thanks…very well explained and helpful tutorial.
Ben
hey i complete both the above step sucessfully but facebook share button is not working but same the retwwet button is working help me please
i would like a “like” button for the full page not for each post….do you have the code?
thanks this working
i would like a “like” button for the full page not for each post….
the same .
do you have the code?
Hi mould, the best way to do it is to add it to your home page by using the java / html gadget.
Thanks for sharing this.
I was looking for this for a long time.
And am really learning a lot from your site.
thanks
you are welcome hatim and i’m glad you found it useful.
Can you remove the blog title from the post title
Thanks so much for these tutorials, I’m blogging in style now!
Just change the van to fan in ur description..
IT says u r a van of blogging.. change it to fan
thanks budy, i’ll do it.
And thx for the FAcebook Like button help.. really helped
Hi guys.
Does anyone know why if anyone click on LIKE, the post doesn’t appear directly on facebook, but there is to click again on CONFIRM? =S
Thk!
i also have the same problem here…why should “confirm” after like the articles
sorry but this is a facebook side part, it’s not about blogger or the tutorial.
I followed the directions and I am not finding the like button on any of my posts can you please have a look and see if you can help me. I would like to figure this out I have spent way to many hours trying to get this to work.
Let me make a useful clarification: The “LIKE” button will NOT appear in your main page (where you see your recent blog posts). You have to click on a post’s title which takes you to a new page, in which you see the whole post alone. In THAT page you should be able to see the “Like” button.
This worked for me and I am very much NOT computer-savy. Thanks for the easy tutorial!
Hi….
I tried everything, but I can’t find or the other one.
I have only this: div class=’clear’
What should I do???
Thanks alot…
Thank you so much for this! <3
I used addthis.com they do it all for you if you like any of the options they provide
Sure, this service is great.
thank you i will try it
Hey there thank you for the instructions. It was very helpful. I wanna ask you if there is a way to show it also under each and every post on your homepage , just as the other social bookmarkings appear.
hi alex, please read the tutorial and comments carefully and you’ll find your question already answered.
Thanks a lot for your post, it really helps.
God Bless you
I keep copying the code in my templet but there is no change and i dont see the “like” button,
can anybody help me with that?
your teaching language is very clear n simple.
just tested in my test bolg.
used it at two places, just after post title & at the end of post.
working nice. very very very thanks for this great help.
now applying in my main blog http://xpoxpo.blogspot.com
you are requested to visit my blog and suggest the modifications.
regards
Candy
Thank u fore the simple instructions, I followed it n it worked right
thanks , very helpful.
i did it. after a few errors. thanks!!! good tutorial.
Does the comments and like both work at the samr time??
Thank you, thank you, THANK you! So many widgets and html code changes either don’t work for me or do squirrelly things, but this one worked perfectly right away!
I agree with earlier posts that your instructions are clear, concise and easy to follow. Thanks for sharing!
Didnt work for me until I went to another blog who advised me to take off and then it worked on EACH of my posting. To anyone wanting this to appear on EACH of their posting, try this. Nevertheless, thanks!
Um, I just added the LIKE button on my blog.
But the problem is, even if you like an individual post, It automatically likes all the posts!
I hope you are getting me.
Even if you like one post, it likes all the post all by itself.
How to fix that?
Please help ASAP!
Thanks.
I hav not this codes: , and haw i can??