Embedding a facebook like button on a facebook fanpage tab

I've been trying to find out how on earth to add some kind like button on a facebook fan page. I know there are ways of doing this. This page for instance has implemented one kind of like button: http://www.facebook.com/JimBeam?v=app_100742133310820

I know both of these pages use applications and not the static FBML page that you usually use. So I created an application where it works be开发者_JS百科autifully.

On this application, the like button works. However when I try to add it to a tab on a facebook page I get an error saying: "HTML error while rendering tag "iframe": iframes forbidden by flavor TabFBM" So apparently iframes aren't allowed to render. But obviously there are ways around this so do you have any clue on how they did it on the other pages?

I'd really appreciate an answer, and I'm especially curious whether if someone could figure out how they restyled the like button on Jim Beam's page.

Facebook page's tab are FBML. And you can not directly add the like button (fb:like or anything else) on this page. But there is a "trick" to do this, and page you give implement the following:

The only way to get the like button is to load it in an iframe. But iframes are forbidden in page's FBML as well. So the trick is to load an html page with AJAX (fbjs calls) which contains an iframe with the fb:like button. As Facebook forbids javascript autofiring, you need a like or a picture to get clicked on before doing the ajax call to load your html's iframe. This mostly is a pain in the ass.

So, here is the proof of concept code.

First file: index.html:

<script type="text/javascript">
<!-- function launch_code() {
    var ajax = new Ajax();
    ajax.responseType = Ajax.FBML;
    ajax.requireLogin = false;

    ajax.ondone = function(data) {
        document.getElementById('content').setInnerFBML(data);
    }

    document.getElementById('content').setTextValue('Loading, please wait.');

    ajax.post('http://example.com/greatpageapp/iframe.html');
    return false; }

//--> </script>

<div id='content'>
    <input type='button' onclick='launch_code(); return false;' value='click on me' />
</div>

And the iframe.html contents:

<center>
<table valign="top" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" width="520" height="1500">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
    </td>
    </tr>
</center>

Tested now and working. Hope that helps.