Facebook fb:multifriendselector in iFrame
Just a quick post to try and help people who are having trouble with the Facebook multi-friend-selector in an Iframe. It took my ages to figure out how to get it not be cut off using the new Javascript SDK.
As you know you need to use the fb:serverFbml tag in order to display an fb:multifriendselector on your page, but the facebook developers documentation is misleading as to how to set the width of the fb:serverFbml frame.
The Facebook developer documentation says to display it like so:
<fb:serverFbml style="width: 755px;">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="<URL for post invite action, see fb:request-form docs for details>"
method="POST"
invite="true"
type="XFBML"
content="This is a test invitation from XFBML test app
<fb:req-choice url="see fb:req-choice docs for details."
label="Ignore the Facebook test app!" />
">
</fb:request-form>
<fb:multi-friend-selector
showborder="false"
actiontext="Invite your friends to use Facebook." />
</fb:fbml>
</script>
</fb:serverFbml>The key mistake is in the line
<fb:serverFbml style="width: 755px;">
Browsers seems to ignore the style attribute completely! Instead you need to use:
<fb:serverFbml width= "755">
This works correctly and causes the popup that is displayed when you click “Send Invitation” to display WITHIN the frame.
Hope this helps someone else! Any queries just ask in the comments and I will clarify/add to this post