How to Add a "Like" Button to my FaceBook Landing Tab?

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 default "wall" view.

The tab that these users arrive at contains an application I made. It is a simple application that lists information about the business.

The application is using the "I Frame" render method (in the application's "Canvas" settings).

My goal is to add a FaceBook "Like Button" or "Like Box" inside my application.

The purpose of this is to write a message that encourages visitors to "Like" the FaceBook Page (not the application).

I've tried the FaceBook code generators for Like Buttons and Like Boxes, but it does not work. When I view my application in Face开发者_开发知识库Book, there is "nothing" in the location where I added the code.

Having a "Like" button inside of an application seems like something that many FaceBook page owners would want. Is there any way to accomplish this?

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.

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.

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.