FacebookのIFrameタブページでスクロールバーを消す方法

FacebookのIFrameタブページでスクロールバーを消す方法

Posted at July 19,2011 2:55 AM
Tag:[Facebook, IFrame]

FacebookのIFrameタブページに表示されるスクロールバーを消す方法のまとめです。

1.スクロールバーが発生するケース

スクロールバーは、コンテンツサイズが高さ800px・幅520pxを超えると自動的に表示されるようです(CSSでbodyセレクタにmargin:0; padding:0;を指定した場合)。

下のスクリーンショットは、サイズをちょっと超えた、青枠だけの画像を表示したものです。

IFrameタブページにスクロールバーが表示された状態
<br />
スクロールバーが表示された状態

「高さ800px・幅520px」という値はブラウザ依存なので、大体の目安と理解しておくと良いでしょう。

参考までに、ブラウザ別のスクロールバーが表示されなかった最大サイズを掲載しておきます。計測は、コンテンツにimg要素を与え、width属性とheight属性を指定した方法で行っています。すべてOSはWindows VISTAです。

Google Chrome 12
width:519px height:798px

Firefox 3.6/4(多分5も同じ)
width:520px height:795px

Safari 5
width:520px height:795px

IE9
width:520px height:795px

本エントリーでは次のようにスクロールバーを消す方法を紹介します。

IFrameタブページのスクロールバーを非表示にした状態
<br />
スクロールバーが表示された状態

2.FB.Canvas.setAutoGrow()でスクロールバーを消す

注:記事投稿時に掲載していたsetAutoResize()は2012年1月1日より利用できなくなるため、代替関数であるsetAutoGrow()に書き換えました。

FB.Canvas.setAutoGrow()を利用してスクロールバーを消すには、コンテンツのscript要素内に次のように設定します。

window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
};
参考:
FB.Canvas.setAutoGrow
FB.Canvas.setAutoResize(2011年12月31日まで)

setAutoGrow()のパラメータとして、次のものが用意されています。

  • on/off:setAutoGrow()のタイマを止めたい場合は、「off」または「false」を設定。デフォルトは「true(on)」。
  • interval:タイマのインターバルを変更したい場合にms単位で設定します。デフォルトは100msです。パラメータに数値のみが設定されている場合はintervalとして扱います。

実際に使う場合のscript要素は次のようになると思います。

<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'アプリID',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>

なお、すべてのブラウザで表示が消えない場合は、「Facebookページプロフェッショナルガイド」の110ページの方法を行ってみてください。

3.FB.Canvas.setSize()でスクロールバーを消す

FB.Canvas.setSize()でスクロールバーを消すには、2項のFB.Canvas.setAutoGrow()の部分を次の内容に入れ替えてください。

FB.Canvas.setSize({ width: 520, height: 800 });

参考:FB.Canvas.setSize

スクロールバーが消えるタイミングはFB.Canvas.setAutoGrow()より早いので、コンテンツのサイズが固定であればこちらの方がいいかもしれません。

コールバックを利用した、次のような使い方があるようです。

function sizeChangeCallback() {
  FB.Canvas.setSize();
}

4.FB.Canvas.setAutoGrow()を設定してもスクロールバーが消えない場合

FB.Canvas.setAutoGrow()を設定したあと、コンテンツに高さが出ていない場合でもこの事象が発生するケースがあります。

コンテンツに高さが出ていない場合

原因は「Canvas URL」が未設定のためです。

「Canvas URL」を設定していない状態
「Canvas URL」を設定していない状態

そもそも「Canvas URL」は必須項目なのですが、IFrameタブを自分のFacebookページで表示したいケースでは「Canvas URL」を設定しなくても動作するため、この事象に陥ってしまったようです。

ということで、「Canvas URL」は必ず設定しましょう。

「Canvas URL」を設定した状態
「Canvas URL」を設定した状態

「Canvas URL」を設定すればIFrameタブにスクロールバーが表示されなくなります。

スクロールバーが消えた状態

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)