Site icon Tips Note by TAM

【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 のサイズを変更しているようです。
 

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

※動作確認環境
【Windows】

Internet Explorer 6 : ○
Internet Explorer 7 : ○
Internet Explorer 8 : ○
Mozilla Firefox 3.6.13 : ○
Google Chrome 9.0.597.107 : ○
Opera 11.01 : ○

【Mac】
Safari 3.1.1 : ○
Mozilla Firefox 3.0.19 : ×
Opera 9.21 : ×

 
 

ちなみに、
<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/
 

 

こちらでご紹介しました情報は、2011年2月25日現在のものです。 仕様変更によりサイズ等が変わることも考えられますので、 今後のFacebookの公式発表に十分ご注意ください。