Facebook Sélecteur multi-ami ne rend pas (application iFrame)

Question

J'ai une application iframe Facebook (en utilisant la nouvelle API JavaScript de Facebook) qui doit permettre à l'utilisateur d'inviter ses amis à l'application après avoir participé à un concours. Je le balisage suivant dans un div sur la page (nom de l'application et Canvas Url Expurgé):

<fb:serverFbml> 
    <fb:request-form 
     method="POST" 
     invite="true" 
     type="{Name of My Application}" 
     content='Your text goes here. %3Cfb%3Areq-choice%20url%3D%{a url-encoded link to my Canvas URL}"/>' 
     label="Authorize My Application"> 
     <fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use My Application."> 
     </fb:multi-friend-selector> 
    </fb:request-form> 
</fb:serverFbml> 

D'après ce que je comprends, si vous avez besoin d'utiliser des balises FBML dans une application XFBML/iframe, vous venez de les déposer dans un élément fb: serverFbml et Facebook s'en occupe. Effectivement, mes premières impressions semblent être fausses. Au lieu de tomber dans le formulaire, je reçois juste une boîte blanche vide, avec le fbml apparemment intact.

La conception de cette application suppose (probablement incorrectement) que je n'ai pas besoin d'authentifier l'utilisateur pour le laisser inviter ses amis. Existe-t-il un moyen d'y parvenir ou dois-je les obliger à se connecter en premier? La documentation de Facebook est (bien sûr) vague sur ceci.

EDIT: Mon FB.init() comme demandé:

$("body").prepend("<div id=\"fb-root\"></div>"); 
FB.init({ 
    apiKey: "{My apiKey is here}", 
    appId: "{My appId is here}", 
    status: true, 
    cookie: true, 
    xfbml: true 
}); 

Answer 1

Ok, je l'ai à travailler. Voici à quoi il ressemble pour moi:

<fb:serverfbml> 
    <script type="text/fbml"> 
     <fb:fbml> 
      <fb:request-form action='my_url' method='POST' 
      invite='true' 
      type='Poll' 
      content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '> 
      <fb:multi-friend-selector showborder='false' actiontext='Select friends to send the poll' cols='5' rows='3' bypass='cancel' max="8"> 
      </fb:request-form> 
     </fb:fbml> 
    </script> 
</fb:serverfbml> 

et le code d'injection JS ressemble à ceci:

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
     appId: 'YOUR APP ID HERE', 
     status: true, 
     cookie: true, 
     xfbml: true 
    }); 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

Ainsi,

1) Vous ne avez pas besoin de votre clé APP, seul votre ID APP dans le code JS.

2) Le fichier XFBML doit être encapsulé dans une balise SCRIPT.

Answer 2

Cet exemple fonctionne aussi:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:serverfbml> 
    <script type="text/fbml"> 
    <fb:fbml> 
     <fb:request-form action='my_url' method='POST' 
     invite='true' 
     type='Poll' 
     content='This is an invitation! <fb:req-choice url="my_url" label="Accept and join" /> '> 
     <fb:multi-friend-selector showborder='false' actiontext='Select friends to  send the poll' cols='5' rows='3' bypass='cancel' max="8"> 
      </fb:request-form> 
     </fb:fbml> 
    </script> 
</fb:serverfbml> 

Set APP_ID dans http://connect.facebook.net/en_US/all.js#appId=[APP_ID] & XFBML = 1