iFrameを使ったFacebookページを作る際に気をつけたいこと

AUのスマートフォンラインナップが発表されましたね。 今まで食指が動かなかったけどやっぱりINFOBARにキュンときたminamiです。

さて、今回も前回に引き続きfacebookの話です。 iframeで自由にページを作ることができるようになったとはいえ、
実際に制作する際には気をつけなければいけないポイントがいくつかあります。
今回はそのあたりを挙げてみました。

スクロールバーを出さないようにする

facebookページの表示領域は通常で横幅520px、縦幅800pxとなっていますが、コンテンツのサイズがそれより大きくなると問答無用で横方向のスクロールバーが表示されてしまいます。アプリの設定で「iFrameサイズ」を設定しても変わりません。スクロールバーをページ内に出したくない場合は下記のようなCSSを記述して、万が一コンテンツが大きくなったとしても表示領域が変わらないようにしましょう。

body {
	margin: 0;
	overflow: hidden;
}

コンテンツの高さを変えたい

スクロールバーはでなくなりましたが、今度は縦に長いコンテンツのページは縦800pxから先が表示されなくなります。Facebook側でデフォルトのiFrameの高さが決まっているためです。設定を変更するためにはFacebook側で提供されているjavascriptのSDKを使います。

//↓の空DIVを作成
<div id="fb-root"></div>
//SDKの読み込み・日本語の場合ja_JP
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
//初期化
<script>
FB.init({
  appId  : 'アプリID',
  status : true,
  cookie : true,
  xfbml  : true
});
</script>

まずはjavascriptSDKを使えるように読み込み、初期化します。

<script>
  FB.Canvas.setAutoResize();
</script>

上記のように記述すると、コンテンツの高さに合わせてiframeの高さを変更してくれます。以下のように明示的に大きさを指定することもできます。

<script>
  FB.Canvas.setSize({ height: 1000 });
</script>

iframe内のファイルのリダイレクト処理

iFrame内に読み込まれるファイルのリンクを直接たたかれてしまうと、Facebookの枠のない状態のページでてきてしまい、せつないことになってしまいます。それを避けるため、下記のようなスクリプトを設置しておきましょう。iframe内のファイルを直接見た場合はFacebookページにリダイレクトします。

if(self == top){ 
  top.window.location = 'http://www.facebook.com/pages/[ページURL]';
}

読み込み元(top)と読み込み先（self）のウインドウが同じだった場合、読み込み元ウインドウをリダイレクトします。ちなみにページ内にリンクを張る際も、targetをtopにしないとiFrame内にリンク先が表示されてしまうので要注意です。

まとめ

Facebookページをiframeで作る際の、わかれば簡単だけど意外と気付かないtipsをご紹介しました。日本語のドキュメントもまだまだ少ないので、こういったノウハウはためていけるといいですね。