0

我的 iframe 代码就是这样设置的

<iframe 
    src="
          https://www.facebook.com/plugins/registration
          ?client_id=
          &redirect_uri=
          &fields=
          [
            {'name':'name'},
            {'name':'email'}, 
            {'name':'phone', 'description':'Your Phone Number','type':'text'},
            {'name':'available','description':'When are you available?'}
          ]
        "

    scrolling="auto"
    frameborder="no"
    style="border:none;"
    allowTransparency="true"
    width="100%"
    height="400">
</iframe>

而且效果很好，功能没有问题。我的问题是输入框出现在 iframe 的边缘，这是我不想要的。

我正在响应地构建我的网站，因此容器正在调整大小并且在移动浏览器（纵向视图）上看起来像这样

输入突破 iframe

有什么方法可以设置这个插件的样式，而不是像这样 在此处输入图像描述

我可以拥有它

Name of Field
[input]

等等？

还是可以更轻松地选择只是转到一个新页面/加载一个带有注册表单的 facebook 弹出窗口？

4

2 回答 2

2

虽然 iFrame 方法不提供宽度小于约 340 像素的干净调整大小，但XFBML集成应该更好地处理低至 260 像素的窄宽度，并允许标签和字段位于不同的行上，如您所描述的。有关更多详细信息，请参阅注册插件文档的 XFBML 部分。

下面包含示例代码，以及 FF13 中此流程的屏幕截图。

<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>
<fb:registration 
  fields="[{'name':'name'},{'name':'email'}, {'name':'phone', 'description':'Your Phone Number','type':'text'},{'name':'available','type':'text','description':'When are you available?'}]" 
  redirect-uri="https://developers.facebook.com/tools/echo/"
  width="260">
</fb:registration>

例子

于 2012-05-04T22:18:47.993 回答
0

这些字段似乎设置了最小宽度和大小。右侧为 240 像素，左侧为 38%。我试图破解它，但看起来唯一的方法是自己构建注册表并通过身份验证机制发布：http: //developers.facebook.com/docs/plugins/registration/#fb-root

于 2012-05-03T16:36:54.880 回答