Facebookページの作成 第2回『Facebookページのスクロールバーを非表示にする方法』

Facebookページのスクロールバー非表示

前回は『iframe』に対応したページの制作方法を紹介しましたが、制作したページのコンテンツサイズが幅520px、縦800pxを超えてしまった場合はスクロールバーが表示されていたと思います。今回は表示領域の最大値を超えた場合でもスクロールバーが表示されない方法をご紹介したいと思います。

表示領域よりコンテンツが大きい場合にスクロールバーを非表示にするにはFacebookのJavaScript SDKを使用します。

JavaScript SDK
http://developers.facebook.com/docs/reference/javascript/

JavaScript SDKとは何でしょうか？まずそこに疑問を持ちますよね。TechTalkManiacsさんの記事『JavaScriptでお手軽にFacebookのアプリを作る』を参考にすると、｢ 投稿・認証・署名を含めた全APIアクセスをサポート、 公式なUIもついており、Facebookアプリも作れる｣機能があるようです。つまりJavaScript SDKはFacebookに関連する多くの機能を提供してくれるということです。そして、これらの機能を使って今回のように表示領域を変更したり、アプリを作ることもできるというわけなんですね。

Step01

まず最初にJavaScript SDKの機能を使えるようにする為に初期化を行います。下記のソースコードをhead要素の中に記述します。

//all.jsを読み込みます
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
//初期化をします
<script language="JavaScript">
FB.init({
  appId: 'アプリID',　//ここに制作した時のアプリIDを記述
  status: true,
  cookie: true,
  xfbml: true
});

上記6行目のアプリIDは前回Facebookにiframe形式のページを作成したときのアプリIDです。マイアプリページからIDをコピー&ペーストしてください。

Step02

次にリサイズ用にFB.Canvas.setSizeメソッドを記述します。

FB.Canvas.setSize
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

上記のページでは一番最初に
｢Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.｣と書かれています。おそらく｢リサイズする場合は1度この関数を呼び出してく下さい。｣のようなことが書かれているので、(※英語は非常に苦手なので訳は微妙です。もし違っていたら教えてください。）Step01のソースコードの下に記述します。

window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}

ここで、FB.Canvas.setSize();を2回記述しているのが気になって調べたのですが、答えがこちらの記事に載っていましたiframe のサイズを変更する JavaScript SDK について（補足記事）　どうやら両方書かないとブラウザによってはエラーが出てしまうみたいです。

Step03

最後に表示したいコンテンツのサイズを設定します。

Step02のソースコードの次にFB.Canvas.setSizeページでは
｢It will default to the current size of the frame, but if you have a need to pick your own size, you can use the params array.｣と書かれています。｢それはフレームの現在のサイズをデフォルトとするので、サイズを変更したい場合はパラメーターを使用できます。｣みたいなことが書かれてます。おそらく・・・。間違えていたらぜひ教えて下さい。

パラメーターでは｢width・height｣の値を設定することができます。body要素内にid名’fb-root’を持った空div要素と共にFB.Canvas.setSize();にパラメーターを渡して記述すれば完了です。

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

上記ソースの3行目でheigh950px;にしています。当Facebookページのコンテンツ内容が950px;だったのでこの値にしましたがコンテンツ内容によって｢width・height｣は変更してください。

では、これまでのソースコードをまとめると

head要素内

//all.jsを読み込みます
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
//初期化をします
<script language="JavaScript">
FB.init({
  appId: 'アプリID',　//ここに制作した時のアプリIDを記述
  status: true,
  cookie: true,
  xfbml: true
});
//サイズ変更前に必ず実行
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}
</script>

body要素内

<div id="fb-root"></div>
<script>
//変更サイズを設定
 FB.Canvas.setSize({ width: 520, height: 950 });
</script>

以上になります。
JavaScript SDKはまだまだ出来ることがたくさんありそうですね。また、新しいことに挑戦したら紹介したいと思います。

次回の第3回はSSLサーバーが用意できなった場合に便利な『Static HTML Iframe Tab』をご紹介したいと思います。

参考サイト：

• JavaScript SDK
• FB.Canvas.setSize
• JavaScriptでお手軽にFacebookのアプリを作る　【TechTalkManiacs】
• iframe のサイズを変更する JavaScript SDK について（補足記事）　【Tips Note】