Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

久々にFacebook 開発者ページにアクセスするとインターフェイスが変わっていたので、忘れないためにもアプリ設定方法をメモしておきます。

基本的なアプリの作成方法は以前と同じなのですが、Facebook 開発者ページの画面構成やメニュー配置が変わっているので、その変更点を中心に説明させていただきます。

また2011年10月1日からは iframeによって表示させるコンテンツがSSL 環境に設置しすることが必要ですので、その点にも注意が必要となります。

※自社サーバなどにアップされたコンテンツをiframe によってFacebook ページに表示させる、という前提で以下の説明を進めさせていただきます。またアプリの新設、既存アプリの編集共に、同じ方法で進めさせていただきます。

アプリの新規作成・編集

アプリを新規で作成する場合は「Create New App」ボタンをクリックします。既存アプリを修正する場合は、左メニューから修正したいアプリを選択して「Edit App」ボタンをクリックします。

App Display Name の登録

まず最初に「App Display Name」にアプリの名称を登録します。App Namespace は任意なので、ここは空欄でも問題ありません(後で登録可能や変更が可能です)。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アプリ名称を登録してから「続行」ボタンをクリックするとセキュリティチェックを要求されますので、画面に表示された文字を入力して「送信」ボタンをクリックします。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アプリの基本設定

アプリ名称の登録を完了すると基本設定画面へ遷移しますので、ここからアプリのアイコン画像やキャンバスURL、ページタブの設定を行います。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

ロゴ画像とアイコン画像

アプリのロゴ画像とアイコン画像を設定する場合ですが、ロゴ画像にマウスを当てると「Edit」リンクが出現しますので、リンクをクリックしてウィンドウを立ち上げます。アイコン画像の場合は(edit icon)リンクをクリックします。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アップロードする画像はロゴとアイコンの大小2種ありますが、サイズは
■ロゴ(大)が180×180ピクセル
■アイコン(小)が16×16ピクセル
のようです。

ロゴ(大)を180×180ピクセル、アイコン(小)を75×57ピクセルで画像をアップロードすると見た目の劣化も少なく、上手く画像が表示されるようになりました。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

キャンバスURL

続いて「キャンバスURL」には、自社サーバなどに設置したコンテンツのURL を入力します。同時に、「Secure Canvas URL」に、SSL(https://)環境に設置したコンテンツのURLを入力します。「Page Tab」のタブ名やTabのURL に関しても、キャンバスURL と同様の設定を行います。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

登録が完了したらページ下部の「変更を保存」ボタンをクリックして基本設定を終了しますが、2011年10月1日より Secure Canvas SSL などの設定が必要になるので、以下のように「Warning」が出る場合があります。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アプリをFacebookページで利用できるようにする

アプリの基本設定ページの左メニューの「アプリのプロフィールページを見る」リンクがありますので、リンクををクリックしてアプリのプロフィールページへ移動します。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アプリのプロフィールページより、左メニューの「マイページへ追加」リンクをクリックして、新規に作ったアプリ、または既存のアプリをどのFacebook ページ(またはアプリ)で利用するかを選択します。ここは以前までと同じ方法です。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

下図のように、現在登録されているFaceboo kページとアプリの一覧が表示されますので「Facebook ページに追加」ボタンをクリックします。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

Facebookページでアプリの設定を変更する(任意)

Facebook ページ左メニューの「タブメニュー」を設定変更(名称変更)する場合は Facebook ページ編集画面から「アプリ」メニューをクリックして、アプリの設定変更を行います。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

アプリ一覧の中から設定変更したいアプリで「設定を編集」リンクをクリックして、「カスタムタブ名」を入力します。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

また、Facebook ページの左メニューで「アプリの並び順」を任意に変更」される場合は、「編集」リンクをクリックしてからアプリの順番を入れ替えてください。
Facebookページにiframeでコンテンツを表示させるためのアプリ作成方法(UI変更後)

と、だいぶ以前にアプリを作成した時と比べると、メニュー構成が変わった点はもちろん「frameに関する選択肢が無くなった点」が違うのかなぁ…という程度です。あと、個人的にはアプリ作成がしやすくなったと思います。

SSL が必須になったこともありますので、コンテンツを運用されているレンタルサーバにSSL のサービスがない場合は、せめて共用SSL のあるレンタルサーバを契約されることが必要になるかと思います。

次はいつまた、インターフェイスや仕様の変更が起こるのかは分かりませんが…、しばらくの間はframe 形式で続けていけそうで良かったです。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください