facebookページにiframeを組み込もう(最新ver.) | charapedia LeanStartup奮闘ブログ

charapedia LeanStartup奮闘ブログ

2011秋公開予定の新サービスcharapedia開発スタッフの奮闘記録。Webを取り巻く最新技術/マーケティング動向、Webサービスローンチで考慮すべきポイントの数々もありのままに綴ります。今後新サービス立上げを目指す方々に少しでも貢献できれば幸いです。

FacebookAPIおよび管理画面は仕様がどしどし変わるため、

さまざまな設定や実装のために参考記事を探しても古い情報しか見つからないことが多いです。

今回、FacebookPageにiFrameを入れる方法を調べてみても

やはり最新情報を日本語で解説してくれるものが見つからない・・・。

下記、本日時点でのFacebook仕様に基づいたFacebookページへのiFreme組み込み方法です。

charapediaページを例に記載します。


■FacebookページにiFrameを組み込もうぞ!

1.Facebookページを作る
 作り方は多くのブログエントリーを参考にしてください。

2.iFrame表示用Facebookアプリを作る
 FacebookページにiFrameを組み込むには、そのためのFacebookアプリの作成が必要です
 (アプリの作成、といってもFacebook管理画面の操作だけで簡潔します。)

 2-1.アプリ製作のためにはFacebookデベロッパー登録が必要です。
   開発者ページにアクセスして登録してください。
   なお、登録後に最初のアプリを作成しようとすると開発者としての認証を促されます。
   求めにしたがって認証してください。

 2-2.開発者ページの「Create New App」ボタンをクリック

 2-3.アプリ名を入力(任意の文字列)

 2-4.セキュリティチェックのため、表示された文字列を手入力

 $charapedia      LeanStartup奮闘ブログ-security

2-5.Page Tabの情報を入力し、保存する。
   最低限下記の2つの情報を入力します。
   Page Tab Name:Facebookアプリの左サイドバーに表示されるタブの名前
   Page Tab URL:タブ内に表示されるiFrameが読み込む先のURL

   保存すると、今日現在ではサイト上部にWarningが出ます(将来の仕様変更を予告する警告)。
   ひとまず現時点では気にしないでおきます(近い時期に対応必要そうですが)

$charapedia      LeanStartup奮闘ブログ-se03


3.アプリをFacebookページと紐付けます

 3-1.今製作したアプリのプロフィールページに移動します。
   View App Profile Pageをクリック

$charapedia      LeanStartup奮闘ブログ-se03-2

 3-2.マイページへ追加をクリック

$charapedia      LeanStartup奮闘ブログ-se04

3-3.紐付けたいFacebookページを選択
   自分が管理者になっているFacebookページに一覧が表示されますので、
   その中から紐付けたいページを選択します。

$charapedia      LeanStartup奮闘ブログ-se05

  一覧画面を閉じます。設定は完了です。


4.Facebookページを確認します。

 左サイドバーに先ほど「Page Tab Name」で設定した名前のタブができています。
 クリックすると、「Page Tab URL」で指定したページが組み込まれて表示されているはずです!

$charapedia      LeanStartup奮闘ブログ-se07

後は組み込まれたページを美しく更新していけば素敵なFacebookページが作れます。
charapediaページももうちょっと美しくする予定です(当然・・・)