How to Add a “Like” Button to my FaceBook Landing Tab?

Question

My FaceBook Page is setup so that users who have not \"Liked\" the page yet (and attempt to view the page) are presented with the content of a particular tab instead of the

Answer 1

Apparently like buttons aren't supported in the current implementation of FBML, which is the only language you can use inside the "tabs" on a facebook canvas page. You may notice that a number of professionally done sites put a big arrow pointing up and then a "click the like button" text, without actually using a like button. This is why they do that.

Until facebook implements XFBML inside tabs, it looks like any XFBML only tags (such as fb:like) can only be used on your personal website. I think they do this for security reasons, although it does seem a little ridiculous that there are features you can use on your own page that facebook doesn't actually support on -their- pages.

The only workaround I have found is to include fb:comments tag in your app, which is an FBML tag that puts up a comments box AND a like button.

Answer 2

First of all, make sure you page is loaded in html mode instead of FBML.

1, Load the FB JS

<script src="http://connect.facebook.net/en_US/all.js#appId=YOURAPPID&amp;xfbml=1"></script>

2, Init the FB (sometimes it doesn't work without this)

<script>
FB.init({
    appId:"YOURAPPID",
    xfbml:true,
    status:true,
    cookie:true,
});
</script>

3, Put the like button where do you want

<fb:like href="http://www.facebook.com/YOUR_FACEBOOK_PAGE" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>

The like will appear, but will not make page refresh, so you have to take care the flow yourself.

Answer 3

In order to get a Like button, go to http://developers.facebook.com/docs/reference/plugins/like, fill out the appropriate information and press "Get Code". This will open up a modal window with the necessary code. Copy that code into your program, and you're done.