Facebookページの作成 第2回『Facebookページのスクロールバーを非表示にする方法』
- カテゴリー 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】
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら