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
This is closest I’ve seen to a solution, Patrick.
But, using the condensed multi-selector, unless my container div uses style=”overflow: hidden”, when the multi-selector loads, it covers the entire width of the page (and other content). Defining the width in the fb:serverFbml at least allows the popup to load without being cut off (although still only in the container, not centered, so if the container is in a right sidebar it still will be cut off).
So, I guess two questions:
1) Do you know of a way to prevent the multi-selector from covering other content?
2) Is there a way to have the popup load in the center of the page, regardless of where the container div is placed?
Thanks!
Thanks! This saved me a bunch of time.
I am using an iframe app. I am using the Javascript SDK as well. For the above code, you have given, it says “Undefined tag fb:serverFbml “. Do you have any idea why that happens?
Thanks in advance.
Huge help. I was going crazy trying to figure this out. Thanks.
By the way, was actually putting the FB form inside a YUI popup dialog vs. an iFrame, but was having the same problem since overflow was hidden, and making overflow visible would show the FB form at a ridiculous width.
not working this one. can you pls give more detail
Not working for me either unfortunately
Why does width work but not height?
Thank you !!
This fix the width of the multi-friend selector but not for other related dialogs.
(You have a syntax error in your code !! check for ‘”>’)