Facebook's condensed multi friend selector layout and rendering
This is my first time working on a facebook app. I created an iframe app (i.e selected 'iframe' as the 'canvas type' when registering the app). I have this situation where there is a multi friend selector form in the sidebar of the app (which has a width of about 200px). Screenshot:
The relevant code for generating that form is as follows (except the html tag which is part of the app layout):
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
// some layout markup here for the whole app....
<div id="sidebar"> // place a condensed friend selector here
<fb:serverFbml>
<script type="text/fbml">
<fb:fbml>
<fb:request-form action="invite_url" content="
Hey! a form!" invite="true" method="post" type="sample">
<fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;" />
<fb:request-form-submit label="Send" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverFbml>
</div>
When i click on "Send invitations", i get a confirm dialog box but it appears within the iframe in which the multi-friend selector is placed (thus breaking the layout) and not on the parent iframe where the main app loads. Screenshot:
I tried the following code (where i remove the fb:serverFbml tag):
<fb:fbml>
<fb:share-button></fb:share-button>
<fb:request-form type="my_app" method="post" invite="true" content="Form content" action="/action">
<fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;"></fb:multi-friend-selector>
<fb:request-form-submit label="Send" />
</fb:request-form>
</fb:fbml>
Here the share button is displayed but the selector form is empty (nothing is rendered inside the fb:multi-friend-selector tag)
I am using the FB initialization code as des开发者_开发百科cribed here: link text
How can i fix this issue? Is there something missing in my fb api code?
I had a similar problem and found a solution here: http://alexandershapovalov.com/facebook-multi-friend-selector-dialog-width-is-incorrect-73/
Try changing your fb:serverFbml tag to the following:
<fb:serverFbml width="200px">
Note that this doesn't work if you set the with in a style attribute and you may find that you need more than 200px to fit the dialog.
加载中,请稍侯......
精彩评论