我已经将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 的标头替换 top.location.href=.... 是否是一个好主意('位置: ....');?
如果你打算使用异步方法,建议你在其中放置尽可能多的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 内容...等)。
好的
,我找到了解决方案:
<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 大小设置为自动调整大小。
和标题('位置: ' . $url); 无论出于何种原因都不起作用。
我刚刚在我的博客上整理了一个相当广泛的教程,也使用了 PHP-SDK。除了摆脱这些滚动条之外,我还展示了如何创建一个扇门和一个简单的共享按钮。我希望我能帮助你们中的一些人:
http://net-bites.de/facebook/tutorial-how-to-create-facebook-iframe-pages-for-timeline-width-810px-with-fan-gate-and-share-button/
我的解决方案每次都有效!在添加这个之前,让你的身体溢出隐藏起来。
<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>