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

发布于 2024-11-06 10:22:49 字数 1675 浏览 1 评论 0原文

我已将Facebook 应用从 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=.... 是否是一个好主意强>?

原文

I've converted a Facebook app from FBML to iFrame (with PHP SDK) and now have vertical scrollbars displayed for the same amount of content I had before (a logo, a flash game and a line with 3 links below). But earlier I didn't have any scrollbars.

If I set the app setting Auto-Resize, then the lower part of content isn't displayed at all - which is bad, the flash game is unplayable then.

I've searched around and all suggested solutions involve Javascript, but I'm actually using PHP SDK. Isn't there a solution for PHP/CSS only?

Below my current code:

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

?>

Also I'm not sure if my PHP-script is supposed to print

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

? Currently I only print what's inside the body.

And I wonder if it is a good idea to replace top.location.href=.... in my code by PHP's header('Location: ....');?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

携君以终年 2024-11-13 10:22:49

如果您打算使用异步方法，建议您在其中放入尽可能多的 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() 函数。

If you are going to use the Asynchronous method, it's recommended that you put as much of FB code within it. Something like the below should work:

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

Now you will call the sizeChangeCallback() function whenever you make a change to the layout (clicking new tab, loading Ajax content...etc).

回复收藏 0 原文

白馒头 2024-11-13 10:22:49

好的，我找到了解决方案：

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

并设置 <在设置选项卡中将strong>IFrame 大小更改为自动调整大小。

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

Ok, I've found 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>

and set IFrame Size to Auto-resize in the settings tab.

And header('Location: ' . $url); won't work for whatever reason.

回复收藏 0 原文

反话 2024-11-13 10:22:49

我刚刚在我的博客上整理了一个相当广泛的教程，也使用 PHP-SDK。除了摆脱这些滚动条之外，我还展示了如何创建 Fan-Gate 和简单的 Share-Button。我希望我可以帮助你们中的一些人：

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

回复收藏 0 原文

软的没边 2024-11-13 10:22:49

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

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

My Sollution works every time! Make your body overflow hidden then before add this.

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

回复收藏 0 原文

~没有更多了~