WEB制作のメモ帳

「iflame」を使ってフェイスブックページを作成

2011-06-23

その他

「iflame」を使ってフェイスブックページを作成

FaceBook(フェイスブック)のフェイスブックページをインラインフレームを使って制作する方法をメモ。
この方法は自身のサーバーに作成したページをフェイスブックページ内に表示させる方法で、アプリへの登録が必要になります。
まずは開発者ページにアクセスし右上の「Set Up New App」より手順に従ってアプリを登録する。
https://www.facebook.com/developers/
※開発者登録がまだの場合は手順に従って携帯電話、またはクレジットカード番号を登録。登録できても承認されるまでに時間がかかる場合(半月程度)があります。

登録が完了したらアプリの設定を行う。
「facebook integlation」を選択し、以下の項目を入力
・Canvas page　任意のURL(7文字以上)
・Canvas URL　iflameとして呼び出す外部WEBサイトURL
・iflameサイズ　「Auto-resize」を選択
・タブ名　フェイスブックページに表示されるメニュー名
・タブのURL　タブが押された場合に最初に表示されるファイル(index.html、facebook.htmlなど)

アプリの設定が完了したら使用するページを指定する。
「Application Profile Page」より進み、画面左の「マイページへ追加」をクリック、使用するページを選択する。

以上で全ての設定が完了。
フェイスブックページを確認すると「タブ名」で入力したメニューが項目に追加されています。

参考サイト
FacebookページにiFrameを組み込もう
http://socialmediaexperience.jp/2889