Loading...

Blog

How to add a ‘Like’ Button to your Facebook Static FBML Tab

Almost anybody who uses the internet today has seen and clicked on a Facebook ‘Like’ button, they are on almost every website in one form or another. For a long time Facebook users have wanted to add a ‘Like’ button to their custom Static FBML tabs but until now have been unable to. I’m sure that many of you have searched all over the web looking for a solution only to find everyone telling you that it’s just not possible, well now there’s finally a solution! This tutorial will teach you in two easy steps how to add a Facebook ‘Like’ button to your Static FBML tab.

Step 1: Get the Facebook FBML Comment Code

So what does Facebook’s FBML comment code have to do with adding a ‘Like’ button to your Static FBML tab? Well, up until now Facebook had removed the ‘Like’ button from the Static FBML version of the comment plugin. Add the following code below to your Static FBML tab but remember to change the ‘xid’ # with your fan page ID number and replace the ‘returnurl’ with your fan page URL or the URL you want fans to like. Now we finally have our much sought after ‘Like’ button but along with an unneeded comment system, in Step 2 we will teach you how to get rid of everything but the ‘Like’ button.

<fb:comments xid="34572893685" returnurl="http://www.facebook.com/wordpressdesign" simple="1"></fb:comments>

Step 2: Using CSS to Get Rid of Everything but the ‘Like’ Button

Since Facebook has finally decided to add the ‘Like’ button to the Static FBML version of the comment plugin, we can use a little CSS magic to get rid of the actual comment system leaving us with only the desired ‘Like’ button. By adding the two lines of CSS code below you should now no longer see the comment system and only the ‘Like’ button should be visible. It’s that simple!

.connect_widget_sample_connections { display:none; }
.comment_body { display:none; }

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible.

Leave a Comment

36 comments
Marti
Marti

I really need to make the effort to say thank you for this. I've been googling for this info and your hit was the first one, but on page 5 of google, so I was giving up. Brilliant! thanks

marie
marie

your tutorials is good . but i just wanna ask on how to put the CSS. it seems that it doesn't work on my FBML thanks :))

Antcho
Antcho

These two rules hides the names of the friends, that liked the page and the number of likes (fans): .connect_widget_not_connected_text { display:none; } .connect_widget_connected_text { display:none; } I don't know what is the difference between them, but both of them works. For all those, who are asking how to add the CSS rules: between the tags: and (before the code for like button). The other way is above mentioned - make link with external CSS file.

Emma
Emma

Hi, I am currently setting up a landing page for my Facebook page. I managed to add the welcome image and found a really good html share button link but am having difficulty with the like button html, I tried a few but had no luck. I am also having problem with how to make sure that the like and share button show at the top of the page. If anyone could help me out with this would be amazing. Many thanks Emma

Toddler2kid
Toddler2kid

I wonder how can I add it in CSS? Thank

Toddler2kid
Toddler2kid

Actually, how can I find the Facebook Id

NVN
NVN

HOW TO CHANGE THE LAYOUT?AS I WANT THIS layout="button_count"

MonMon
MonMon

I want to know how to put .like { display:none; } .UIImageBlock { display:none; } in Css ??? I need an explain

Rob
Rob

This worked for me, but I'm having issues with one thing: If a person liked the page it shows the information about that you and # people are liking this page. I just can not get rid of this div. I tried everything. I have put all the divs on "display:none" but nothing seems to work. I tried it with !important as well, but no succes. If I put them on "display:none" in firebug it does work. :s Do you know how to fix this issue? You would be my hero! :D

Adrian
Adrian

I've resolved like this: [code] .like { display:none; } .UIImageBlock { display:none; } [/code]

Adrian
Adrian

How can i display only the comment form ? (without the "Facebook social plugin" link and the like button) @daddydesign this would be another good thing. thank you in advance.

King
King

I added those code into my FBML. That what I did .connect_widget_sample_connections { display:none; } .comment_body { display:none; } But the COMMENT still displaying, did I done something wrong??

Jennifer
Jennifer

Hi, Thanks for the tutorial! Is it also possible to have the like button, but not the friends how also like this page? And if it's possible also without the count. So just the I-like-button. Thanks!

Jackie
Jackie

I've read the comment reply to Eric a dozen times and I don't get how to insert the css code.

daddydesign
daddydesign

@fred and emina, check the comment reply to Eric.

Doug
Doug

I'm still getting the text "Login to post." Please let me know how I can remove it. Otherwise, awesome work guys! -douglas.foote@gmail.com

emina
emina

Hi how do i put CSS into FBML? i dont really understand on how to connect the two...

fred
fred

Very good blog ! what's the code to link my external css in static fbml ? Thank you

Eric
Eric

Very good tip, thanks. It wasn't obvious how to implement the CSS, but eventually I figured out I needed to wrap the code in a set of internal style sheet tags.

Busi
Busi

This is the best blog ever. I can't believe how easy all your tuts are! Thank you!

Dexter
Dexter

ok check out victotia's secret page under 'send love' How do you make a like button like that one?

Anders
Anders

Good tutorial! Is it possible to add the like button to a firms website for example? Thanks

daddydesign
daddydesign

Hi Marti, glad we can help! Hopefully we get higher in google for this :) Dont be shy to share our page using the share buttons below.

daddydesign
daddydesign

edit your fan page, when your in the back end, look at the address bar.. the ID should be there.

daddydesign
daddydesign

Sorry don't think that's possible.. If you figure it out, please let us know :)

MonMon
MonMon

I need the full code @daddydesign

daddydesign
daddydesign

did you place that code into the css? And are you linking to the css file?

daddydesign
daddydesign

We tried figuring that out but no luck. If anyone else knows a way, please let us know.

daddydesign
daddydesign

@Doug, please supply us with a link to see your issue.

daddydesign
daddydesign

@Eric, actually the best approach is to link to an external stylesheet and place that link inside of your Static FBML tab at the top. Also don't forget about Facebook caching, you need to change the number after the question mark to however many times you make changes to your CSS. [code language="css"] <link href="http://www.yourwebsite/style.css?1" rel="stylesheet" type="text/css" media="screen" /> [/code]

daddydesign
daddydesign

Thank you Busi! We are glad you like them. Keep checking in as there are many more to come.

daddydesign
daddydesign

@dexter, I think that is a custom APP created. Not a static FBML tab.

daddydesign
daddydesign

we will be uploading a downloadable zip file with the full code this week!