facebookページのスクロールバーを非表示にする

facebookページを作っているとぶちあたる問題その①
facebookページを作ってオリジナルのページを作ると『スクロールバーを消したい』と絶対思うハズです。

なかなか面倒くさい作業なのでメモっておきます。

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

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

【JavaScript SDK】

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

JavaScript SDKって何？

JavaScript SDKは、全てのGraph APIとDialogへのアクセスをJavaScriptを介して行うことを可能にします。Social Plugins表示を行うリッチなクライアントサイドの機能を提供します。
要はページをリッチにする為に用意されているプラグインなのですが、今回は長くなってしまうので割愛させていただきます。

とにかくスクロールバーを消したい！
下記をペッと貼っつけちゃってください！

■head部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
    appId: 'XXXXXXXXXXXXXXX',　//ここに制作した時のアプリIDを記述
    status: true,
    cookie: true,
    xfbml: true
});
window.fbAsyncInit = function() {
  FB.Canvas.setSize();
}
function sizeChangeCallback() {
  FB.Canvas.setSize();
}
</script>

■body部分

1
2
3
4

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