Comment intégrer iframe dans facebook?

Question

Un associé à moi maintient une page facebook pour l'entreprise pour laquelle nous travaillons. L'entreprise veut qu'un widget soit mis sur son facebook pour permettre aux utilisateurs d'entrer leur email et de s'abonner à notre newsletter. L'associé qui ne fait pas facebook n'est pas un programmeur donc il m'a demandé de construire quelque chose.

J'ai fait une petite page qui utilise jquery et ajax pour vous permettre d'entrer votre adresse e-mail et l'envoie à notre serveur en utilisant ajax afin de ne jamais quitter la page que vous êtes.

Nous voulons intégrer cette page sur facebook en utilisant un iframe.

Tout d'abord nous avons juste essayé d'entrer l'iframe, qui ne fonctionne pas,

alors nous avons trouvé un tutoriel et essayé d'intégrer l'iframe la façon dont il est dit comme ceci:

<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a> 
<div id="outside_location"></div> 
<fb:js-string var="link_1"> 
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe> 
</fb:js-string> 

<script type="text/javascript" charset="utf-8"> 
var outside_location = document.getElementById('outside_location'); 
</script> 

Il semble que facebook est annexant les choses à nos variables pour devient quelque chose comme a325461252_link_1

Ensuite, nous obtenons une erreur JS comme ceci:

Uncaught reference error: a325461252_link_1 not defined

Mais de temps en temps, cela fonctionnera mais 99% du temps, nous obtenons cette erreur.

Je n'ai jamais rien construit pour Facebook avant, je ne suis pas sûr qu'il existe une sorte de façon de faire des choses sur facebook.

Y a-t-il quelque chose que je fais de mal? J'ai fait beaucoup de recherches google essayant de trouver des réponses et tout ce que je trouve varie de "facebook ne permet pas les iframes" à "facebook recommande iframes" donc je ne sais vraiment pas quoi penser.

Answer 1

Vérifiez que votre application est configurée en tant qu'application FBML et non en tant qu'application Iframe. Une application iframe ne développera pas les balises fb: ... par défaut. Inspectez également le DOM (Chrome ou Firebug) pour voir si le Dom est modifié lorsque vous cliquez sur le lien, mais l'iframe n'est pas visible.

Je viens de tester ce qui suit et cela a fonctionné:

<hr/> 
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a> 
<div id="outside_location" width="540" height="270" > 
    <fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" /> 
</div> 

<fb:js-string var="location_two"> 
    <fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' /> 
</fb:js-string> 

<script type="text/javascript" charset="utf-8"> 
    var outside_location = document.getElementById('outside_location'); 
</script> 

Si tout ce que vous vouliez faire est d'ajouter un iFrame à votre toile d'application, vous pouvez simplement utiliser cette ligne:

<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" /> 

Ou Il suffit de changer votre application d'une application de canevas FBML à une application iFrame et de pointer votre rappel de toile et votre URL de connexion vers votre page actuelle ou le répertoire de la page. Si vous n'utilisez pas les éléments API ou FBML de Facebook, vous n'avez peut-être pas besoin d'être dans une application FBML.

BTW: Pour ajouter à Facebook iframes programme vous pouvez utiliser JavaScript comme ceci:

<script type="text/javascript"> 

    var Iframe = document.createElement('iframe'); 
    Iframe.setStyle('smartsize','true'); 
    Iframe.setStyle('frameborder','yes'); 
    Iframe.setStyle('scrolling','no'); 
    Iframe.setStyle('include_fb_sig','true'); 
    Iframe.setStyle('width','500px'); 
    Iframe.setStyle('height','500px'); 
    Iframe.setSrc("http://www.msn.com"); 
    document.getRootElement().appendChild(Iframe); 

</script> 

Bonne chance!