Incorporation d'un bouton facebook sur un fanpage facebook

Question

J'ai essayé de trouver comment ajouter une sorte de bouton sur une page de fan facebook. Je sais qu'il y a des façons de le faire. Cette page a par exemple mis en place un type de bouton similaire: http://www.facebook.com/JimBeam?v=app_100742133310820

Je sais que ces deux pages utilisent des applications et non la page FBML statique que vous utilisez habituellement. J'ai donc créé une application où elle fonctionne à merveille.

Dans cette application, le bouton "J'aime" fonctionne. Cependant, quand j'essaye de l'ajouter à un onglet sur une page facebook, j'obtiens une erreur disant: "Erreur HTML lors du rendu du tag" iframe ": iframes interdit par la saveur TabFBM" Donc, apparemment, les iframes ne sont pas autorisés à rendre. Mais évidemment, il y a des façons de contourner cela, avez-vous la moindre idée de la façon dont ils l'ont fait sur les autres pages?

J'apprécierais vraiment une réponse, et je suis particulièrement curieux si quelqu'un pourrait comprendre comment ils ont restylé le bouton comme sur la page de Jim Beam.

Answer 1

L'onglet de la page Facebook est FBML. Et vous ne pouvez pas ajouter directement le bouton "like" (fb: like ou quoique ce soit d'autre) sur cette page. Mais il y a une "astuce" pour faire ceci, et la page que vous donnez implémente ce qui suit:

La seule manière d'obtenir le bouton "like" est de le charger dans un iframe. Mais les iframes sont également interdites dans le FBML de la page. Donc l'astuce consiste à charger une page html avec AJAX (fbjs appels) qui contient un iframe avec le bouton fb: like. Comme Facebook interdit l'autofiring javascript, vous devez cliquer sur un objet similaire ou sur une image avant de faire l'appel ajax pour charger l'iframe de votre html. C'est surtout une douleur dans le cul.

Donc, voici le code de preuve de concept.

Premier fichier: 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> 

Et le contenu de iframe.html:

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

Testé et travaille maintenant. J'espère que cela pourra aider.