このページの本文へ

JS+PHPでFacebookページをカスタマイズ! (2/3)

2011年03月28日 11時00分更新

文●加藤 洋・梅田恭子/TAM

  • この記事をはてなブックマークに追加
本文印刷

JavaScript SDK で iframeの高さを変更する

 前回の記事では、iframeで外部サーバーのHTMLをFacebookページに読み込み、ウェルカムページとして表示しました。通常のWebサイト制作と同様にコーディングできるので、Web制作者にとっては手軽な方法といえます。

 ただ、iframeは設定している表示領域サイズを超えるとスクロールバーが表示されます。Facebookページの場合、スクロールバーを非表示にするには、iframe内に表示するコンテンツを幅520px×高さ800px以内に収めなければなりません。

[画像:ASCII.jp Web Professional のfacebookページ スクロールバー]

高さ800pxを越えるとスクロールバーが表示される

 Web Professionalのウェルカムページは、幅520px×高さ1077pxありますので、そのまま読み込むと縦方向のスクロールバーが表示されます。そこで、Facebookが提供しているJavaScript SDKを使ってiframeの高さを変更し、スクロールバーを非表示にしましょう。

 まず、Facebookの「開発者/マイアプリ」のページからアプリの設定を編集します。Facebook IntegrationのCanvasにある「iFrameサイズ」のラジオボタンを「Show scrollbars」から「Auto-resize」に変更します。

[画像:Facebook Integration のCanvas 内]

iFrameサイズを「Auto-resize」にする

 続いて、iframeで呼び出されるHTMLに、FacebookのJavaScript SDKを読み込みます。以下のコードをhead要素とbody要素に追加します。

■head要素内の記述

<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
});
// ここまでが JavaScript SDK を使うための準備(初期化)
// ここから iframe のサイズを変更するための記述(FB.Canvas.setSize)
window.fbAsyncInit = function() {
 FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
 FB.Canvas.setSize();
}

※「appId: ‘アプリID’」には、読み込み元の「アプリID」を入れて下さい。

■body要素内の記述

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

 height: 800の値は、表示したいコンテンツの高さにします。複数のJavaScriptファイルを読み込む場合は、head要素に追加した<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>が一番最初に読み込まれるようにしてください。

 以上で、設定した高さの範囲でスクロールバーが表示されなくなります。



※SDK=Software Development Kitとは、Facebookアプリの開発を助ける技術文書やツール等をまとめたもの。Facebookでは複数のプログラム言語向けのSDKが用意されており、JavaScript SDKはJavaScript開発向けに提供されているSDK。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く