Facebook 的精简多好友选择器布局和渲染答案

【问题标题】：Facebook's condensed multi friend selector layout and renderingFacebook 的精简多好友选择器布局和渲染
【发布时间】：2011-04-20 20:27:12
【问题描述】：

这是我第一次在 Facebook 应用上工作。我创建了一个 iframe 应用程序（即在注册应用程序时选择了“iframe”作为“画布类型”）。我有这种情况，在应用程序的侧边栏中有一个多朋友选择器表单（宽度约为 200 像素）。 截图：

生成该表单的相关代码如下（html 标签除外，它是应用布局的一部分）：

<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>

当我点击“发送邀请”时，我会看到一个确认对话框，但它出现在放置多朋友选择器的 iframe 中（从而破坏了布局），而不是在加载主应用程序的父 iframe 上. 截图：

我尝试了以下代码（我删除了 fb:serverFbml 标记）：

<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>

此处显示了分享按钮，但选择器表单为空（fb:multi-friend-selector 标签内没有呈现任何内容）

我正在使用此处描述的 FB 初始化代码：link text

我该如何解决这个问题？我的 fb api 代码中是否缺少某些内容？

【问题讨论】：

标签： facebook iframe facebook-iframe

【解决方案1】：

我遇到了类似的问题，在这里找到了解决方案： http://alexandershapovalov.com/facebook-multi-friend-selector-dialog-width-is-incorrect-73/

尝试将您的 fb:serverFbml 标记更改为以下内容：

<fb:serverFbml width="200px">

请注意，如果您在样式属性中设置了 with，这将不起作用，并且您可能会发现您需要超过 200px 才能适应对话框。

【讨论】：