19

私たちが知っているように、Facebook はPages に iframe タブを導入しました。アプリを開発し、プロフィールページにアプリのタブを追加したところ、「iframe Tabs for Pages」のアップデートによりアプリタブがiframeで開かれるようになりました。問題は、ページの高さが調整されておらず、スクロールバーを削除してスクロールバーなしでページ全体を表示できないことです。私が見つけたすべてのソリューションは、アプリケーション キャンバス ページでは機能しますが、アプリケーション タブ ページでは機能しません。

どうすればそれができますか？

4

6 に答える 6

21

達成するのはとても簡単です。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 タグにoverflow:hiddenを追加すると役立ちます。

于 2011-03-02T01:32:55.460 に答える
14

次のガイドは、同じ問題を解決するのに役立ちました。

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-05T07:42:39.647 に答える
9

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-13T14:19:42.710 に答える
2

やあみんな...私もそれで問題を抱えていました..無数の解決策と提案を試しましたが、うまくいきませんでした。jquery ライブラリ 1.6 を 1.5.1 に変更すると、機能しました。それがあなたの問題かどうかを確認してください。

今、jquery のバージョン 1.6 で動作しない理由を知りたいと思っています。

于 2011-05-20T12:43:55.783 に答える
0

上記のすべてを無駄にしようとした私のような人にとって、これが最終的に私のために働いたものです. このページからの抜粋: 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-29T14:52:48.397 に答える