设置 Facebook 个人资料页面 iframe 选项卡的高度

Question

据我们所知，Facebook 推出了页面 iframe 选项卡。我开发了一个应用程序，并在个人资料页面中添加了应用程序的选项卡，根据更新“页面的 iframe 选项卡”，应用程序选项卡在 iframe 中打开。问题是页面高度没有调整，无法去掉滚动条以显示没有滚动条的完整页面。我发现的所有解决方案都适用于应用程序画布页面，但不适用于应用程序选项卡页面。

我们怎样才能做到这一点？

Answer 1

这很容易实现。您必须在 Facebook 集成选项卡中将应用程序设置为 IFRAME，并将框架的大小设置为 “自动调整大小”。

现在，在您的服务器上，您已经在 标记之前添加以下代码：

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>  

这将自动调整其大小。如果您将 overflow:hidden 添加到 BODY 标记，也会有所帮助。

Answer 2

以下指南帮助我解决了同样的问题：

http ://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

简而言之，请执行以下操作：

• 将“IFrame 大小”更改为“自动调整大小”

• 加载 Facebook 的 Javascript SDK

在索引页的 标记之前添加以下代码：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

• 使用 FB.Canvas.setSize()

将以下代码放在 标记之前：

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

应该可以了，希望有帮助！

Answer 3

facebook 最近更改了一些内容，现在您的选项卡文件也需要 fb.init 方法。否则调整大小将不起作用。所以也可以在你的标签页中使用它

    <script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: 'YOUR APP ID', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
}
    </script>

Answer 4

为遇到问题的每个人更新了代码：

1) 将应用程序的“画布高度”设置为“流体”。

2) 在关闭 之前复制并粘贴以下代码标签。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Called when FB SDK has been loaded
  window.fbAsyncInit = function () {
    // Initialize the FB javascript SDK
    FB.init({
      appId: '[YOUR APP ID]',
      status: true,
      cookie: true,
      xfbml: true
    });

    // Auto resize FB Canvas
    FB.Canvas.setAutoGrow();
  };

  // Load the FB SDK Asynchronously
  (function (d) {
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
  } (document));

</script>

Answer 5

嘿伙计们...我也遇到了问题...我尝试了无数的解决方案和建议，但它们从未对我有用。在我将 jquery 库 1.6 更改为 1.5.1 后，它就可以工作了。检查这是否是您的问题。

现在我想知道为什么它不能与 1.6 版本的 jquery 一起工作。

Answer 6

对于像我这样尝试了上述所有方法均无效的人，这就是最终对我有用的方法。取自此页面： https://www.facebook.com/note.php?note_id= 10150149060995844

在 之前：

<script type="text/javascript">

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });

}

</script>

然后在 之前：

<script type="text/javascript">

                FB.init({
                    appId: 'XXXXXXXXXXX', //Your facebook APP here
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true// parse XFBML
                });

        </script>