【Facebook】iframe版 Facebookページのスクロールバーを消す方法

JavaScript

　

Facebookページの作成で使われてきた「Static FBML」によるタブの新規追加が
来月、3月11日よりできなくなり、iframeでページを組み込む方法に変わります。
　

　

外部サーバの HTMLを読み込むため、通常のサイト制作と同じようにコーディングできるので
Facebookページをもっと手軽に作ることができるようになるのですが、
iframeを利用しているため、以下のキャプチャのように
規定のサイズを超えるとスクロールバーが表示されてしまいます。

　

　

iframe のサイズは
「幅：520px、高さ：800px」 *
なので、
スクロールバーが出ないようにするには、
このサイズ内に収まるように作ると
キレイに表示されます。

※「body { margin: 0; padding: 0; }」をかけた状態で調査。
　

　

でも、
そんな小さなワクに収まるようなコンテンツを
作っていてはおもしろくない！！

そこで、
スクロールバーを出さずにページを表示させるため、
JavaScript SDK を使用して
iframe の高さを変更する方法をご紹介します。
　

※2012年3月28日現在、こちらでご紹介した方法は IE でエラーが表示されてしまいます。　以下のページで別の書き方をご紹介していますので、ご参照ください。 ~~http://tam-tam.co.jp/tipsnote/html_css/post3960.html~~ https://www.tam-tam.co.jp/tipsnote/html_css/post25.html

　

　

（1）アプリの設定を変更

「開発者/マイアプリ」のページより
アプリの設定を編集します。

Facebook Integration の
Canvas 内「iFrameサイズ」のラジオボタンを
Show scrollbars　→　Auto-resize
に変更する。

　

　

（2）読み込む HTML に JavaScript SDK を追加
【head内】

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
    appId: 'XXXXXXXXXXXXXXX',
    status: true,
    cookie: true,
    xfbml: true
});
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}
</script>

【body内】

<div id="fb-root"></div>
<script>
  FB.Canvas.setSize({ width: 520, height: 800 });
</script>

※「appId: 'XXXXXXXXXXXXXXX'」は、アプリID に差し替えてください。
※「height: 800」の数値を、変更したい高さに変更。
※複数のJavaScriptを使用される場合は、
　＜script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"＞＜/script＞
　が一番最初に読み込まれるように記述してください。
　

　

　

スクロールバーが消え、指定した高さ分まで内容が表示されています。
この記述を使用することで、長ーーいページも作成できます。