Facebookのタブページ制作時に入れるおまじない的コード

スポンサーリンク

Facebookのタブページの作成って、iframeなどがあってすごくややこしくて嫌いなのですがw、そのときにお決まりのように入れているコードを自分用メモとしてコピペしておきます。

確認環境

  • Facebookで確認(2012/09/08現在)

コード

開始bodyタグの直下に以下のコードを記述します。
★AppID★には、develop登録した時に提供される数字を入れます。

“`<div id="fb-root"></div>
<script type="text/javascript">
<!–
window.fbAsyncInit = function() {
FB.init({
appId: '★AppID★',
status: true,
cookie: true,
xfbml: true
});
// iframeの高さを自動調節
FB.Canvas.setAutoGrow();
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//–>
</script>“`

iframeの高さを自動調整するには、以下のコードを入れます。

“`FB.Canvas.setAutoGrow();“`

以下のコードは既に古く使えません。ご注意ください。

“`FB.Canvas.setAutoResize();“`

iframeの高さを固定したい場合

あえてiframeの高さを固定したい時もあるかと思います。そういう場合は以下のコードを記述します。
数値の部分に表示したい高さ(px)を入力します。

“`// 自動調整は使わないのでコメントアウト
//FB.Canvas.setAutoGrow();
FB.Canvas.setSize({ height: 1700 });“`