オリジナルコンテンツは表示されていますが、スクロールバーが表示されています。
大変みっともない表示ですが、これはコンテンツの制作に様々な制約があるためです。
今回はもう一歩踏み込んでJAVAScript SDKのさわりまで話を勧めます。
前回解説したように、オリジナルコンテンツの表示にはiframeが使用されています。
このため、webブラウザで表示できるものはHTML、PHP、Perl、Rubyなどファイル形式にかかわらず掲載することができるのですが、iframeであるがゆえにサイズの制約があります。
facebookで表示できるサイズは520px × 800pxまで。
文頭で例示したコンテンツにスクロールバーが表示されるのは高さが800pxを超えているためです。
ですので、Facebookページに掲載するコンテンツは上記の範囲内にサイズを収める必要があります。
もう一点。
HTMLのbodyタブ内の文末に、facebook用コンテンツだと宣言するためのタグを入れます。
これはそんなに難しいことではなく、
</body>
の前に
<div id=”fb-root”></div>
と、divタグを入れるだけです。
以前はこれがないとエラーが帰って来ましたが、現在は単純なHTMLファイルならエラーは帰らないようです。
しかしながらコロコロ変わるfacebookの仕様ですので、保険の意味も踏まえ、癖にしておいたほうが良いでしょう。
また、このあと開設するJAVAScriptSDKを使用する場合は必須となります。
さて、話をドキュメントサイズに戻します。
facebook用コンテンツのドキュメントサイズは520px × 800pxに収まるようにと書きました。
しかしながら、左右の520pxはcssで固定できるものの、天地はコンテンツの量によっては800pxを簡単に超えてしまします。
気づいている方もいるかも知れませんがアプリの詳細設定にドキュメントサイズを指定するメニューがあります。
上の画像がそれですが、ここで520px × 800px以上のサイズを指定してもスクロールバーは消えません。
（左右のサイズが760px固定と表示されているのは左側メニューを含めたサイズです。ゲーム等のアプリの場合、左メニューを消してドキュメントを表示できます。）
facebookではアプリで様々なサービスが出来るよう開発者向けにJAVAScript SDKを用意しています。
JAVAScript SDKは文字通りJAVAScriptをベースにしたSDKでfacebookアプリ開発のために様々なメソッドを提供しています。
一番上のサンプルではスクロールバーが表示されましたが、実際の筆者のwelcomeページ（いいねクリックをお願いしますｗ）では同じ内容のコンテンツでスクロールバーがありません。
左右もスクロールバーはありません。
このようにスクロールバーを消したい（iframeのサイズを広げる）場合、このJAVAScript SDKを使います。
JAVAScript SDKは初期化をし、SDKを使用できるようにします。
一般的な記入方法は以下のとおり。
<script src="http://connect.facebook.net/en_US/all.js"></script><script>FB.init({appId : 'YOUR APP ID',status : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : true // parse XFBML});</script>
最初にJAVAScript SDKを読み込みます。このあたりの記入方法はJQueryなどと同じ。
FB.initでプロセスを初期化・起動しているわけですが、ここは呪文みたいなものと認識して下さい。
この呪文に続いて実際の動作を指定することになります。
今回解説しているのはスクロールバーをなくすことですが、これに関わるメソッドは3つ用意されています。
この3つの中で以前は
FB.Canvas.setAutoResize
を使うのがが主流でした。
しかし、FB.Canvas.setAutoResizeはブラウザによってスクリプトが無効になる事象があり、facebook側は今年に入り、FB.Canvas.setAutoResizeの使用を制限。
変わって、
FB.Canvas.setAutoGrow
を使うようにとの提言をしています。
FB.Canvas.setAutoGrowは、先ほど説明した初期化の方法とは異なり、
<script language=”JavaScript”>
window.fbAsyncInit = function() {
FB.init({
appId: ‘app_ID‘,
channelUrl : ‘Channel File’, //URL
});
FB.Canvas.setAutoGrow();
};</script>
window.fbAsyncInit = function()の中にFB.intと共にまとめる形で記述します。
これらの記述方法についてはfacebook Developerページで検索をかけると解説ページに飛ぶことができます。
ちなみにFB.Canvas.setAutoGrowの解説はコチラ。
実際にFB.Canvas.setAutoGrow()を使ったのがコチラになります。
FireFox・Operaでブラウズしている人、お気づきでしょうか？スクロールバー、出てますよね？
実はブラウザによるスクリプトの無効は解消されていないようです。それにちょっと動作が遅いような・・・
そこで、もうひとつスクロールバー外しに有効なのが、
FB.Canvas.setSize()
です。
これはドキュメントサイズを固定で指定するメソッド。
使い方は
<script language=”JavaScript”>
FB.canvas.setSize(width: 520, height: 1200);
</script>
と記述します。
widthに幅、heightが高さです。詳細はコチラ。
実際にFB.Canvas.setSizeを使用したのがアイ・ラボのウェルカムページです。
一つ書きわせれてましたがFB.Canvas.setSizeも初期化が必要ですので先に書いたおきまりの呪文が必要です。
さて、それぞれのスクリプトの挿入位置ですが、初期化の呪文を先に記述する必要があるものの特に決まりはないようです。
最も利用したいスクリプトにも因るのですが、今回のようなドキュメントサイズを指定するものは、headタグにまとめて記入するのも良いですし、divタグのfb-rootの前後に設置しても問題はないようです。
ちなみに筆者のfacebookページではサンプルは全てheadタグ内に、ウェルカムページは呪文をheadタグに・サイズのセットはdivのfb-rootの直後に記入しています。
FB.Canvas.setAutoGrowでは、表示に時間がかかったり、IEで一時的にスクロールバーが表示されることがあるのでセクションの区切り区切りに設置するといった方法もあるようです。
JAVAScript SDKの詳細はfacebook Developerを参考にして下さい。
次回は『イイネボタンで見せるコンテンツを変える』お話です。
あ、一ついい忘れが。文字コードはUTF-8に統一してくださいね。