iframe を使ってのFacebookページ作成について
Facebookより3月10日までに新機能に完全に移行するのでページをアップグレードしてくださいとお知らせメールが届きました。『スタティックFBML』の新規追加がなくなる=FBMLからiframeへ移行を推奨しています。3月に入りログアウト時でもiframeが表示されるようにバグ修正されています。
iframeを利用した方が、普通にHTMLで書くことが出来るのでデザインの自由度が高いです。ページのメンテナンスもやりやすいですし。ただ、ブラウザによって読み込み速度がかなり違ってくるのが気になるところですけど。（Firefoxでの表示が一番時間かかる。。。な）
Baliparaのページ、これまで作ったWelcomeページ、Areasページに、新たにSupportページを追加。それぞれのページの下部にコンタクトフォームを設置して、Facebookからも予約が入れれるようにする。こんな感じで作業してみました。
iframeを利用する際のポイント
- 外部のページを呼び出すので自由度が高い
- ページ置場として外部サーバーが必要
- アプリケーション作成を行うため開発者としての登録が必要
- ページ表示サイズを固定する場合、可変ウィジェットを組み込めない
- iframe内からのFBアプリへリンクのときにターゲット指定が必要
外部のページを呼び出すので自由度が高い
HTMLタグで普通にコーディングするので楽ちん。外部ファイルの呼び出しが容易。故にこれまでFBJSを使わないといけなかったインタラクティブコンテンツの作成がｊQueryやMootoolsを使って出来る。もちろん、PHP、Perl で作ったページでも問題なく動かせる。
ページ置場として外部サーバーが必要
ブランディングしたければ外部サーバくらい用意せい！ということでしょうか（笑）iframeを使わなくてもページを開設することは出来ますが、ブランドしてのイメージを確立するにはやはりiframeを使ったデザインは必須かと。。。
アプリケーション作成を行うため開発者としての登録が必要
一気に敷居が高くなったような気がしますが、登録は簡単です。Facebook Developersから登録を行います。このとき、携帯かクレジットカードでの認証が必要です。（さすがにクレジットカードは…使いたくないので携帯で認証）登録が完了したらアプリケーションの作成を行っていきます。
FacebookページにiFrameを組み込もう で手順が詳しく紹介されています。
アプリケーションを新たに登録したら、アイコンを変えておくといいですね。ページの左側に表示されてくるときにデフォルトではギアのアイコンなんですが、オリジナルで作成したアイコンを登録出来るので、本サイトのファビコンなどとデザイン合わせるのがお勧め。
ページ表示サイズを固定する場合、可変ウィジェットを組み込めない
デザインしていく上でこれが一番厄介だったかな。アプリ登録時にAuto-resizeを選択しておくんだけど、実際にページを読み込んでみると縦・横スクロールバーががっつり表示（TT）Auto-resizeって自動でやってくれるんとちゃうの？とググってみたら見つかりました、スクロールバーを消す方法。
iframe版 Facebookページのスクロールバーを消す方法
iframeのサイズはデフォルトで520px×800px （margin:0; padding:0;）なので、それを超えると自動的にスクロールバーが出現するらしい。JavaScript SDK を使って強制的に表示サイズを変更することができます。
※以下、iframe版 Facebookページのスクロールバーを消す方法より抜粋。
HTML内のhead内に下記のスクリプトを記述。
※他にJSファイルを呼び出している場合はその呼び出しより先に記述することが必要。
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
FB.init({
appId: 'XXXXXXXXXXXXXXX',
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: 800 });
</script>
※appId のところに自分が登録したアプリケーションIDを入力して、高さ800を変更してOK。
iframe内でのページ移動をした場合、JSを組み込んだページ以外は当然スクロールバーが表示されてくるので、複数ページ作る場合はそれぞれ個別にアプリケーション登録してIDをとる必要ありです。
固定サイズになるので、コメントなどの可変ウィジェットを組み込むとまたスクロールが出てくるので、コメントはFBMLページで表示。
iframe内からのFBアプリへリンクのときにターゲット指定が必要
iframe からのリンク制御ということでターゲット指定 target=”_top” が必要。でないとフレーム内で動こうとするので、一旦アプリケーションにアクセスするのかどうかをFB自体が聞いてきよる（笑）最近、iframe なんて使うことなかったからすっかり忘れてたわぁ
jQuery を使ったスライドギャラリー Galleriaを入れてみたり、それぞれのページのコンタクトフォーム設置したみたりと普通のページ作りと変わらないですね。あと、もう少し作りこみをしたら、本サイトの方への導線を作っていきま～す。
Tweet
Balipara on Facebook | Monkeypara Says:
April 21st, 2011 at 11:07 pm
[...] [...]