タイトルを変えましたが、前回の記事の続き & メモ（備忘録）。
実は、前回の記事って10日くらい前に書いていたんだけど、Facebook が10月1日から SSL 必須になるというので、記事を公開するのを待っていた。
SSL に対応していない場合は、下記のような表示が…
これは、自分で作ったアプリの 『 Canvas URL 』と『 Page Tab URL 』に通常の ” http://〜 “ のパスだけを記述するとこのようなダイアログが表示されます。
『 Secure Canvas URL 』と『 Secure Page Tab URL 』に ” https://〜 “ で始まるパスを記入すれば OK なんですが、当然『 SSL 証明書 』の取得が必要になります。
個人の方で VeriSign などで SSL 証明書の発行手続きをされているかたは少ないと思いますが、共有 SSL でも問題はないようです。
『 Canvas URL 』と『 Page Tab URL 』に独自ドメインの URL を記述し、『 Secure Canvas URL 』と『 Secure Page Tab URL 』に共有 SSL のパスを記述してもダイアログは表示されませんでしたので、大丈夫ではないかと。
自分で Facebook アプリを作った場合は、このように『 SSL認証 』の問題があるのですが、『Static HTML Iframe Tab : Custom Icons』を使えば、この手続きが省略できます。
これが前回書いた、もうひとつの『Static HTML Iframe Tab : Custom Icons』を選択した理由です。
アプリのインストール画面にも『 Works over HTTPS/SSL and has no branding! 』とあります。
つまり、『Static HTML Iframe Tab : Custom Icons』を使うことによって、前回の記事に書いた『 Tab Settings 』に通常の ” http://〜 “ から始まるパスを記入しても、Facebook の警告は表示されなくなります。
ただし、こちらの環境では IE などで『 セキュリティで保護された Web ページ コンテンツのみを表示しますか？ 』という『 セキュリティの警告 』が表示されます。
Facebook の iframe ではなく、Facebook に表示しているページをブラウザで直接表示しても警告が出ますので、こちらのサーバだけのことなのかも知れません。
ちなみに『 セキュリティの警告 』の『 はい 』、『 いいえ 』のどちらをクリックしても表示は同じで、特に表示されない画像などはないんだけどなぁ…
で、ここからが前回の記事の続き… 🙂
まず、タブの表記（Welcome の名称）の変更方法。
これは簡単です。
Facebook ページ上部にある『 基本データを編集 』をクリックして、
左の『 アプリ 』をクリックする。
すると、『 追加済みアプリケーション 』が表示されるので、『Static HTML Iframe Tab : Custom Icons』の『 設定を編集 』をクリック。
表示されたプロフィールの『 カスタムタブ名 』に記入して保存。
Facebook ページに戻ると、タブの名称が変更されています。
次に『Static HTML Iframe Tab : Custom Icons』標準のタブアイコンからオリジナルアイコンに変える方法。
こちらはちょっとややこしいかも知れませんが『Static HTML Iframe Tab : Custom Icons』のインストール画面下部にアイコンの変更方法を解説しているページへのリンクがありますので、それをご覧になればわかるのではないかと…
説明は英文ですが、画像と合わせて読むとそれほど難しくないと思います。
では、簡単に説明を…
先ほどの『Instructions for setting up your own App with a custom icon.』という説明ページを基に説明しますので、説明ページ & 画像を見ながら読んでもらえるとわかりやすいかも。
まずは、新しいアプリケーションを作ります。
アプリケーションを作るには、前回の記事に書いたように『Facebook開発者ページ』で開発者登録をする必要がありますが、登録済みという前提で話を進めます。
表示している『Facebook開発者ページ』の『 + Create New App 』をクリックして『 App Display Name 』にアプリの名前を記入し、『 I agree to the Platform Privacy Policy. 』にチェックを入れて『 続行 』を押します。（説明ページの場合『My New Tab App』というアプリ名です。）
一応、規約は読んでくださいね 😀
すると『 セキュリティチェックが必要です 』といわれますので、表示している文字を記入して『 送信 』をクリックすれば、『 My New Tab App 』というアプリの『 基本設定 』画面に切り替わります。
アプリの『 基本設定 』ページ下部にある『 アプリをFacebookに結合する方法を選択してください 』の『 App on Facebook 』と『 Page Tab 』をクリックしてください。（現在、説明ページの Mobile and Devices という箇所がちょっと変更になってるみたい。）
それぞれのフィールドに下記のように記入します。
キャンバスURL: http://●●●●●●●●●●.iframehost.com/
Secure Canvas URL: https://●●●●●●●●●●.iframehost.com/
Page Tab Name: Default Tab Name（説明ページではこれですが、何でもいいです）
Page Tab URL: http://●●●●●●●●●●.iframehost.com/tab
Secure Page Tab URL:https://●●●●●●●●●●.iframehost.com/tab
この『●●●●●●●●●●』はページ上部の『 App ID 』の番号です。
アプリの『 基本設定 』ページ上部の『 edit icon 』をクリックして、オリジナルタブのアイコンになる画像を選択・アップロードします。
また、その上にある『 App Secret 』の文字列があとで必要になりますので控えておいてください。
設定が終われば『 変更を保存 』を押します。
次にページ左側にある『 アプリのプロフィールページを見る 』をクリックして表示したページの左にある『 マイページへ追加 』をクリックします。
すると『 My New Tab App（先ほどのアプリ名）を Facebook ページに追加 』と表示されますので、追加したいページの『 Add to Page 』をクリック。
Facebook ページを見るとアプリが追加されていますので、追加されたアプリのタブをクリックすると、最初だけ『 Setup New App 』というのが表示されますので、『 App Secret 』に先ほど控えた文字列を記入してください。
これで、ひとまずアプリの追加は完了です。
次に追加したアプリのタブをクリックすると、
と表示しますので、問題なければ『 許可する 』をクリックしてください。
あとは、前回の記事のように『 Tab Settings 』にて設定すれば、オリジナルアイコンのタブが完成です。
タブの名称（今回は、Default Tab Name）を変更する場合は、上記の方法で変更してください。
最後に『 Welcomeページ 』を Facebook ページのデフォルトページに設定する方法。
Facebook ページ上部の『基本データを編集』をクリックし、編集画面の左にある『権限の管理』をクリックします。
すると、ページ中ほどに『 デフォルトで表示するタブ 』があります。
最初は『 ウォール 』になっていると思いますので、表示させたいタブを選んでください。
これで、Facebook ページを表示した時に『 Welcome ページ 』が表示されます。
『Static HTML Iframe Tab : Custom Icons』には、他にも機能がありますが確認していませんので、あしからず…
2回にわたって長々と書きましたが、これがベストかどうかはよくわかりません。
ただ、この方法が自分にとって作りやすかったです。
それと、オリジナル・タブアイコンでページを作る場合は、取りあえず先にアプリを作っておいて、そのアプリに『Static HTML Iframe Tab : Custom Icons』をインストールするのもひとつの方法だと思います。
というわけで、お試しあれ…
