Facebook Multi Friend Selector Doesn't Render (iFrame application) - facebook

Question

I have an iframe Facebook application (using Facebook's new JavaScript API) that needs to allow the user to invite their friends to the app after entering a contest. I have the following markup in a div on the page (application name and Canvas Url redacted):
<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>
From what I understand, if you need to use FBML tags in an XFBML/iframe app, you just drop them into an fb:serverFbml element and Facebook takes care of it. Sure enough, my first impressions seem to be false. Instead of dropping in the form, I just get an empty white box, with the fbml seemingly untouched.
The design of this application assumes (probably incorrectly) that I don't need to authenticate the user to let them invite their friends. Is there a way to accomplish this, or do I need to require them to log in first? Facebook's documentation is (of course) vague on this.
EDIT: My FB.init() as requested:
$("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, I got it to work. Here is how it looks for me :
<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>
and the JS injection code looks like this :
<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>
So,
1) You dont need your APP KEY, only your APP ID in the JS code.
2) The XFBML needs to be wrapped inside a SCRIPT tag.

Answer 2

This example works too:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&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 in http://connect.facebook.net/en_US/all.js#appId=[APP_ID]&xfbml=1