Facebook iFrame 应用程序 - 摆脱垂直滚动条？答案

【问题标题】：Facebook iFrame app - getting rid of vertical scrollbars?Facebook iFrame 应用程序 - 摆脱垂直滚动条？
【发布时间】：2011-08-21 04:28:20
【问题描述】：

我已将a Facebook app 从 FBML 转换为 iFrame（使用 PHP SDK），现在显示的垂直滚动条显示的内容数量与我之前的相同（一个徽标、一个 Flash 游戏和一行下面有 3 个链接）。但之前我没有任何滚动条。

如果我将应用设置为自动调整大小，则内容的下部根本不显示-这很糟糕，那么flash游戏就无法玩了。

我四处搜索，所有建议的解决方案都涉及 Javascript，但我实际上使用的是 PHP SDK。没有只针对 PHP/CSS 的解决方案吗？

在我当前的代码下面：

<?php

require_once('facebook.php');

define('FB_API_ID', 'XXX');
define('FB_AUTH_SECRET', 'XXX');

$facebook = new Facebook(array(
            'appId'  => FB_API_ID,
            'secret' => FB_AUTH_SECRET,
            'cookie' => true,
            ));

if (! $facebook->getSession()) {
    printf('<script type="text/javascript">top.location.href="%s";</script>',
        $facebook->getLoginUrl(
                array('canvas'    => 1,
                      'fbconnect' => 0,
                      #'req_perms' => 'user_location',
        )));
    exit();
} else {
    try {
        $me = $facebook->api('/me');

        $first_name = $me['first_name'];
        $city       = $me['location']['name'];
        $female     = ($me['gender'] == 'male' ? 0 : 1);
        $avatar     = 'http://graph.facebook.com/' . $me['id'] . '/picture?type=large';

    } catch (FacebookApiException $e) {
        exit('Facebook error: ' . $e);
    }
}

# print the logo, the flash game and 3 links

?>

我也不确定我的 PHP 脚本是否应该打印

<html>
<body> 
.....
</body>
</html>

？目前我只打印体内的内容。

我想知道用 PHP 的 header('Location: ....') 替换我的代码中的 top.location.href=.... 是否是个好主意;?

【问题讨论】：

标签： php facebook iframe scrollbar facebook-iframe

【解决方案1】：

如果您要使用异步方法，建议您在其中放入尽可能多的 FB 代码。像下面这样的东西应该可以工作：

<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
    FB.Canvas.setSize();
};

function sizeChangeCallback() {
    FB.Canvas.setSize();
}
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>

现在，每当您更改布局（单击新选项卡、加载 Ajax 内容等）时，您都将调用 sizeChangeCallback() 函数。

【讨论】：

【解决方案2】：

好的，我找到了the solution：

<html>
<head>
<script type="text/javascript">
window.fbAsyncInit = function() {
        FB.Canvas.setSize();
}

function sizeChangeCallback() {
        FB.Canvas.setSize();
}
</script>
</head>
<body>
......

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
        appId  : '<?php print(FB_API_ID); ?>',
        status : true,
        cookie : true,
        xfbml  : true
});
</script>
</body>
</html>

并在设置标签中将 IFrame Size 设置为 Auto-resize。

而 header('Location: ' . $url); 无论出于何种原因都不起作用。

【讨论】：

1) header 不起作用，因为您在 iframe 中工作 2) 您应该将 all FB 相关的 JS 函数包装在 window.fbAsyncInit 方法中（我的意思是这里是FB.init)
不幸的是，不是：我已经尝试过您的 fbAsyncInit-suggestion（来自 developers.facebook.com/docs/reference/javascript ？），但它不适用于 Google Chrome：iframe 内容只是在底部被截断。跨度>
+1 为您的坚持，我稍后会尝试您的建议，谢谢
我还想知道，您建议的 document.getElementById() 是否适用于所有浏览器。谷歌浏览器会在控制台中打印有关它的警告。也许
很多浏览器会抱怨各种各样的事情，但我想这样使用它是安全的，它可以确保在加载 JS 库时实际执行调整大小功能。如果这对您有用，请告诉我将其添加为解决方案

【解决方案3】：

我刚刚在我的博客上整理了一个相当广泛的教程，也使用了 PHP-SDK。除了摆脱那些滚动条之外，我还展示了如何创建一个扇门和一个简单的共享按钮。我希望我能帮助你们中的一些人：

http://net-bites.de/facebook/tutorial-how-to-create-facebook-iframe-pages-for-timeline-width-810px-with-fan-gate-and-share-button/

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案4】：

我的解决方案每次都有效！在添加之前隐藏你的身体溢出。

<div id="fb-root" class="fb_reset"><script async="" src="https://connect.facebook.net/en_US/all.js"></script></div>
   <script type="text/javascript">
       window.fbAsyncInit = function() {
           FB.init({appId: '293887700673244', status: true, cookie: true, xfbml: true, oauth: true});
           window.setTimeout(function() {
               FB.Canvas.setAutoGrow(); }, 250);
       };

       (function() { var e = document.createElement('script');
           e.async = true;
           e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
           document.getElementById('fb-root').appendChild(e); }());
   </script>

【讨论】：