Facebookページにiframeを組み込む

そろそろFBMLが廃止になるので、iframeの組み込み方法をメモ。
▼完成品
Facebookページにiframeを組み込む

【STEP1】アプリ作成
まずはアプリを作りに行きます
http://www.facebook.com/developers/の右上にある「Set Up New App」をクリック。
fb_if1.jpg

アプリ名を入れ、「同意する」にして作成。
Captchaによるセキュリティチェックがはいります。
fb_if2.jpg

【STEP2】アプリ登録
作成するとアプリが表示されますので、当該アプリの「設定を編集」をクリックします。
次の画面では「Facebook Integration」をクリックすると以下のようなものが表示されます。
こちらにiframeの情報を入力していきます。
fb_if3.jpg
必須事項は下記です。
■Canvas Page:アプリのベースURL
■Canvas URL:ページの読み込み先URL
■Canvas Type:もちろんIFrameを選びましょう
■タブ名:Facebookページの左に表示されるものです。
■Page Tab Type:こちらもiFrameで。
■タブのURL:こちらでIFrameの読み込み先を指定
Canvas URL/タブURLが時サーバー側の読み込み先となります。
例:Canvas URLがhttp://yourdomain.com/、タブのURLがtabの場合
iframeの読み込み用ファイルは、http://yourdomain.com/tab/にアップします。

【STEP3】アプリをFacebookページに表示
最後にFacebookページへの表示を設定します。
マイアプリに戻ります。
ここにある「Application Profile Page」をクリックするとアプリトップに飛びます。
左カラム下にある「マイページへ追加」を選ぶと反映されます。
fb_if4.jpg

iframe完成ページ
Facebookページで、いいねしてねー

sponsors

「Facebookページにiframeを組み込む」をシェアする

記事作成:
記事URL:

TOP > > > Facebookページにiframeを組み込む