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應用程序 - 擺脫垂直滾動條？

回答

相關問題