« PREV: Sennheiser Custom...
Frye Financial... :NEXT »

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

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.

Posted In

Tutorials

38 Comments

  1. Anders January 27, 2011

    Good tutorial!

    Is it possible to add the like button to a firms website for example?

    Thanks

  2. Pingback: List Building Automated System – Send Button Profits :: Supersportinc

  3. Pingback: Tweets that mention How to add a ‘Like’ Button to your Facebook Static FBML Tab | Daddy Design -- Topsy.com

  4. Dexter January 29, 2011

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

    • daddydesign January 31, 2011

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

  5. Busi February 2, 2011

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

    • daddydesign February 5, 2011

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

  6. Eric February 3, 2011

    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.

    • daddydesign February 7, 2011

      @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.

      <link href="http://www.yourwebsite/style.css?1" rel="stylesheet" type="text/css" media="screen" />
      
  7. fred February 4, 2011

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

  8. emina February 5, 2011

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

  9. Doug February 7, 2011

    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

    • daddydesign February 7, 2011

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

  10. daddydesign February 7, 2011

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

  11. Jackie February 7, 2011

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

  12. Jennifer February 10, 2011

    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!

    • daddydesign February 10, 2011

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

  13. King March 3, 2011

    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??

    • daddydesign March 5, 2011

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

  14. Adrian March 12, 2011

    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.

  15. Adrian March 12, 2011

    I’ve resolved like this:

    .like { display:none; }
    .UIImageBlock { display:none; }
    
    • daddydesign March 14, 2011

      Thank you for the code Adrian.

  16. Rob April 21, 2011

    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

  17. MonMon August 3, 2011

    I want to know how to put

    .like { display:none; }
    .UIImageBlock { display:none; }

    in Css ??? I need an explain

    • MonMon August 3, 2011

      I need the full code @daddydesign

      • daddydesign August 16, 2011

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

  18. NVN August 28, 2011

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

    • daddydesign August 29, 2011

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

  19. Toddler2kid September 16, 2011

    Actually, how can I find the Facebook Id

    • daddydesign September 16, 2011

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

  20. Toddler2kid September 17, 2011

    I wonder how can I add it in CSS? Thank

  21. Emma October 6, 2011

    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

  22. Antcho October 10, 2011

    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.

  23. marie October 13, 2011

    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 :))

  24. Marti January 14, 2012

    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

    • daddydesign January 15, 2012

      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.

  25. Kyle March 1, 2012

    Did this change over the last few months?

    https://www.facebook.com/fox25news?sk=app_10531514314

    • daddydesign March 2, 2012

      What part are you asking about?