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

我将a Facebook app从FBML转换为iFrame（使用PHP SDK），现在已经显示了与以前相同数量的内容（徽标，Flash游戏和包含3个链接的行）的垂直滚动条。但是之前我没有任何滚动条。Facebook的iFrame应用程序 - 摆脱垂直滚动条？

如果我将应用程序设置为自动调整大小，则内容的下半部分根本不显示 - 这很糟糕，那么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的头（“位置：....”）来代替top.location.href = ....在我的代码;？

来源

2011-05-08 Alexander Farber

如果您打算使用异步方法，建议您将尽可能多的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>

现在你将调用sizeChangeCallback()功能，每当你做出改变布局（点击新标签，加载Ajax内容...等）。

来源

2011-05-09 16:28:14 ifaour

好吧，我发现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的大小到自动调整在设置选项卡。

And header（'Location：'。$ url）;无论如何不会工作。

来源

2011-05-08 20:33:47

1）'header'不会工作，因为你是一个iframe 2容器内工作），你应该换行'window.fbAsyncInit'方法里面** **所有FB相关JS功能（我的意思是这里的' FB.init'） – ifaour 2011-05-09 07:57:59

不幸的是，我试过了你的fbAsyncInit-suggestion（来自http://developers.facebook.com/docs/reference/javascript/？），它不适用于Google Chrome：iframe内容仅在底部切断。 – 2011-05-09 08:11:42

像[this]（http://pastebin.com/aDNpR3Kf）应该工作。 – ifaour 2011-05-09 08:36:30

我只是在我的博客上放了一个相当广泛的教程，也使用PHP-SDK。除了摆脱那些滚动条，我还展示了如何创建一个Fan-Gate和一个简单的共享按钮。我希望我可以帮助一些你们与：

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

来源

2012-08-05 18:08:01 Daniel

虽然这个链接可能回答这个问题，但最好包括在这里回答并提供参考链接。如果链接页面更改，则仅链接答案可能会失效。 – 2012-09-28 11:17:46

我Sollution屡试不爽！在添加之前，让你的身体隐藏起来。

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

来源

2014-07-22 15:48:26 Brent

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

回答

相关问题