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』をご紹介したいと思います。

参考サイト:

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事