facebookページで使用するiframeの縦幅を変更する方法

facebookページを制作する際に読み込むiframeの高さの設定方法を調べたので、自分の復習がてらご紹介します。

1.FB.Canvas.setSizeでサイズを指定する方法

header内に以下の記述を設定。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
    appId: '【アプリID】',
    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: 横幅, height: 縦幅 });
</script>

【アプリID】の部分にはdevelopersのマイアプリからJSを入れたいページを開くと
2段目の行に「アプリID」として記載されている15文字の数字が入ります。

2.FB.Canvas.setAutoResizeで自動リサイズする方法

bodyの中で任意の場所に以下の記述を設定。

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '<span style="color:#990033">【アプリID】</span>',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>

横のスクロールバーを消したい場合には以下の記述をbodyの中の任意の場所に設定。

<STYLE type="text/css">
<!--
BODY { overflow-x : hidden ;}
//-->
</STYLE>

私は現在1の方法で縦幅を伸ばしていますが、特に問題は無く使用出来ています。
ちなみに、どちらの方法も「fb-root」の記述は必須のようです。

参考記事
iframe版 Facebookページのスクロールバーを消す方法
FacebookページのIframe仕様で出てしまうスクロールバーを消す覚書