【Facebook】iframe のサイズを変更する JavaScript SDK について（補足記事）

前回の記事（iframe版 Facebookページのスクロールバーを消す方法）では
コードの紹介だけで JavaScript SDK については何も触れなかったので、
JavaScript が得意なスタッフと改めて検証した上で、まとめてみました。
　

具体的には以下のように指定しています。
　

head内
・JavaScript SDK を使うための準備（初期化）
・iframe のサイズを変更するための記述（FB.Canvas.setSize）
　

body内
・iframeのサイズを指定
　

　

【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
});
// ここまでが JavaScript SDK を使うための準備（初期化）

// ここから iframe のサイズを変更するための記述
// [A]
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}

// Do things that will sometimes call sizeChangeCallback()
// [B]
function sizeChangeCallback() {
  FB.Canvas.setSize();
}

【body内】

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

　

「iframe のサイズを変更するための記述」 は、サンプル通りに書いたのですが
「FB.Canvas.setSize();」 がなぜか違う書き方で 2回も呼び出されています。
　

前回の記事では削除していたんですが
サンプルにはコメントも書かれていました。
（ // Do things that will sometimes call sizeChangeCallback() ）
「時々sizeChangeCallback() も呼んでね。」 というような意味でしょうか？
　

…時々？
　

　

そこで、[B] を削除し、[A] だけで動作確認* をしてみたところ、
一部のブラウザで iframe 自体が表示されませんでした。
　

[B] はどのブラウザでも問題なく表示されるように、
別の書き方で iframe のサイズを変更しているようです。
　

これ以外にも複数のパターンで試してみましたが、
サンプル通りに書くのが安全だと判断し、前回記事のようになりました。
　

　
　

ちなみに、
＜div id="fb-root"＞＜/div＞　は、なくても動作していたのですが
入れておくのが “決まり” のようなので、入れています。
　

　

（参照）
JavaScript SDK - Facebook開発者
http://developers.facebook.com/docs/reference/javascript/
FB.Canvas.setSize - Facebook開発者
http://developers.facebook.com/docs/reference/javascript/fb.canvas.setsize/