设置Facebook配置文件的iframe标签页的高度

问题描述：

正如我们所知，Facebook已经推出了iframe Tabs for Pages。我开发了一个应用程序并在应用程序的配置文件页面中添加了应用程序选项卡，应用程序选项卡根据更新的“iframe页面选项卡”在iframe中打开。问题在于页面高度未调整，无法移除滚动条以显示没有滚动条的完整页面。我找到的所有解决方案都适用于应用程序画布页面，但不适用于应用程序选项卡页面。设置Facebook配置文件的iframe标签页的高度

我们该怎么做？

答

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

，您的服务器上，你有</BODY>标记之前添加以下代码：

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

这将自动调整其大小。如果您将溢出：隐藏添加到BODY标签，它也有帮助。

简单有效。谢谢！ – Kon 2011-03-25 15:55:07

仅供参考：我必须使用如下的显式大小：“FB.Canvas.setSize（{width：520，height：620}）;”。不要忘记阅读文档：https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/ – ramayac 2011-11-23 17:25:38

答

下面的指南帮助我度过了同样的问题：

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

总之，请执行下列操作：

更改您的 “IFrame的大小” 为 “自动调整大小”
加载Facebook的Javascript SDK

只是你的索引页的</body>标签之前添加以下代码：

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

认沽</head>标记之前的代码如下：

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

应该这样做，希望它有帮助！

感谢@disco它帮助！ – Xenon 2011-09-13 16:56:48

答

嘿家伙......我也遇到了问题，以及..我尝试了无数的解决方案和建议，他们从来没有为我工作。在我将jquery库1.6更改为1.5.1后，检查这是否是你的问题。

现在我想知道为什么地狱它不工作的版本1.6的jQuery。

答

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>

这为我排序，我只需要添加上面列出的两个FB.Canvas方法调用。 – Scottie 2012-05-03 11:54:43

答

更新代码具有大家的问题：

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>

答

对于像我这样试过上述所有这些都无济于事的人，这里是最后为我工作的东西。从这个页面摘自：https://www.facebook.com/note.php?note_id=10150149060995844

之前</head>：

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

然后前</body>：

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

设置Facebook配置文件的iframe标签页的高度

相关推荐