web-dev-qa-db-ja.com

Facebookプロファイルページのiframeタブの高さを設定する

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

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

facebookfacebook-iframe
19
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>

これにより、自動的にサイズ変更されます。また、overflow：hiddenをBODYタグに追加すると役立ちます。

21
Landitus

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

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>

それでうまくいくでしょう、それが役に立てば幸いです！

14
disco

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>
9
Alex Milde

更新されたコード問題のあるすべての人：

1）アプリケーションの「キャンバスの高さ」を「流体」に設定します。

2）次のコードをコピーして、<body>終了タグの前に貼り付けます。

<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>
6
42droids Ltd

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

今、私はそれがなぜjqueryのバージョン1.6で動作しないのかを知りたいと思っています。

2
Frank

上記のすべてを役に立たないように試みた私のような人にとって、これが最終的に私のために働いたものです。このページから取得： 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>
0
boldfacedesignuk