設置Facebook配置文件的iframe標籤頁的高度

正如我們所知，Facebook已經推出了iframe Tabs for Pages。我開發了一個應用程序並在應用程序的配置文件頁面中添加了應用程序選項卡，應用程序選項卡根據更新的「iframe頁面選項卡」在iframe中打開。問題在於頁面高度未調整，無法移除滾動條以顯示沒有滾動條的完整頁面。我找到的所有解決方案都適用於應用程序畫布頁面，但不適用於應用程序選項卡頁面。設置Facebook配置文件的iframe標籤頁的高度

我們該怎麼做？

來源

2011-02-14 Ahmad

這很容易實現。您必須在Facebook集成選項卡中將應用程序設置爲IFRAME，並將幀的大小設置爲「自動調整大小」。現在

，您的服務器上，你有</BODY>標記之前添加以下代碼：

<div id="fb-root"></div> 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    FB.Canvas.setSize(); 
</script>

這將自動調整其大小。如果您將溢出：隱藏添加到BODY標籤，它也有幫助。

來源

2011-03-02 01:32:55 Landitus

簡單有效。謝謝！ – Kon 2011-03-25 15:55:07

僅供參考：我必須使用如下的顯式大小：「FB.Canvas.setSize（{width：520，height：620}）;」。不要忘記閱讀文檔：https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/ – ramayac 2011-11-23 17:25:38

下面的指南幫助我度過了同樣的問題：

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

總之，請執行下列操作：

更改您的「IFrame的大小」爲「自動調整大小」
加載Facebook的Javascript SDK

只是你的索引頁的</body>標籤之前添加以下代碼：

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
FB.init({ 
appId : 'YOUR-APP-ID-HERE', 
status : true, // check login status 
cookie : true, // enable cookies to allow the server to access the session 
xfbml : true // parse XFBML 
}); 
</script>

使用FB.Canvas.setSize（）

認沽</head>標記之前的代碼如下：

<script type="text/javascript"> 
window.fbAsyncInit = function() { 
FB.Canvas.setSize(); 
} 
// Do things that will sometimes call sizeChangeCallback() 
function sizeChangeCallback() { 
FB.Canvas.setSize(); 
} 
</script>

應該這樣做，希望它有幫助！

來源

2011-04-05 07:42:39 disco

感謝@disco它幫助！ – Xenon 2011-09-13 16:56:48

嘿傢伙......我也遇到了問題，以及..我嘗試了無數的解決方案和建議，他們從來沒有爲我工作。在我將jquery庫1.6更改爲1.5.1後，檢查這是否是你的問題。

現在我想知道爲什麼地獄它不工作的版本1.6的jQuery。

來源

2011-05-20 12:43:55 Frank

facebook最近改變了一些東西，現在你的標籤文件也需要fb.init方法。否則調整大小將無法正常工作。所以在你的標籤頁使用以及

<script type="text/javascript" charset="utf-8"> 
window.fbAsyncInit = function() 
{ 
    FB.init({ appId: 'YOUR APP ID', 
    status: true, 
    cookie: true, 
    xfbml: true, 
    oauth: true}); 

    FB.Canvas.setAutoResize(); 
    FB.Canvas.setAutoGrow(); 
} 
    </script>

來源

2012-04-13 14:19:42

這爲我排序，我只需要添加上面列出的兩個FB.Canvas方法調用。 – Scottie 2012-05-03 11:54:43

更新代碼具有大家的問題：

1）將您的應用程序「畫布高度」，以「流體」。

2）在關閉<正文>標籤前複製+粘貼以下代碼。

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript"> 
    // Called when FB SDK has been loaded 
    window.fbAsyncInit = function() { 
    // Initialize the FB javascript SDK 
    FB.init({ 
     appId: '[YOUR APP ID]', 
     status: true, 
     cookie: true, 
     xfbml: true 
    }); 

    // Auto resize FB Canvas 
    FB.Canvas.setAutoGrow(); 
    }; 

    // Load the FB SDK Asynchronously 
    (function (d) { 
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; } 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    d.getElementsByTagName('head')[0].appendChild(js); 
    } (document)); 

</script>

來源

2012-11-01 16:27:05

對於像我這樣試過上述所有這些都無濟於事的人，這裏是最後爲我工作的東西。從這個頁面摘自：https://www.facebook.com/note.php?note_id=10150149060995844

之前</head>：

<script type="text/javascript"> 

window.fbAsyncInit = function() { 

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' }); 

} 

// Do things that will sometimes call sizeChangeCallback() 

function sizeChangeCallback() { 

FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' }); 

} 

</script>

然後前</body>：

<script type="text/javascript"> 

       FB.init({ 
        appId: 'XXXXXXXXXXX', //Your facebook APP here 
        status: true, // check login status 
        cookie: true, // enable cookies to allow the server to access the session 
        xfbml: true// parse XFBML 
       }); 

     </script>

來源

2013-01-29 14:52:48

設置Facebook配置文件的iframe標籤頁的高度

回答

相關問題