Facebookページの作成で使われてきた「Static FBML」によるタブの新規追加が
来月、3月11日よりできなくなり、iframeでページを組み込む方法に変わります。
外部サーバの HTMLを読み込むため、通常のサイト制作と同じようにコーディングできるので
Facebookページをもっと手軽に作ることができるようになるのですが、
iframeを利用しているため、以下のキャプチャのように
規定のサイズを超えるとスクロールバーが表示されてしまいます。
iframe のサイズは
「幅：520px、高さ：800px」 *
なので、
スクロールバーが出ないようにするには、
このサイズ内に収まるように作ると
キレイに表示されます。
※「body { margin: 0; padding: 0; }」をかけた状態で調査。
でも、
そんな小さなワクに収まるようなコンテンツを
作っていてはおもしろくない！！
そこで、
スクロールバーを出さずにページを表示させるため、
JavaScript SDK を使用して
iframe の高さを変更する方法をご紹介します。
（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＞
が一番最初に読み込まれるように記述してください。
スクロールバーが消え、指定した高さ分まで内容が表示されています。
この記述を使用することで、長ーーいページも作成できます。
「TAM顔ハメ」の mobile_app ページでも使用していますので、
参考にご覧ください。
http://www.facebook.com/KaoHame