Facebookページにオリジナルページを追加する方法まとめ（ssl対策版）
Senna (2011年5月 5日 18:13)最近はFacebookの仕様もアホのようにガラっと変わってしまい、北米も日本も関係無く仕様変更に対応しようと四苦八苦。
色々Facebookページを作るための方法も見かけますが、小生が今現在Facebookページを作る時にFacebookページを作る流れを一からご紹介しようと思っています。
Facebookページにiframeで読み込む時のSSL問題
Facebookページが何か、どうやってFacebookページを作るかという話は是非Google先生に聞いていただくとして、小生がFacebookページを初めて作った時は、最近流行りのアプリケーションを登録する流れで作ってみた訳ですね。参考にしたのは下記の記事。
上記記事を参考にしながら、iframeで読み込むHTMLを作って、自分のサーバーに置き、実際にアプリに登録してみたわけですが、小生はいつもsslでFacebookを見てるユーザーでして、実際に自分のFacebookページをhttpsからアクセスすると下記のようになってしまうわけです。
「いや、見れないし」とツッコミを入れてみました。
つまり、読み込むiframeのファイルがsslサーバー内じゃ無いとだめとかそういう話らしく、sslサーバーを持つ必要の無い個人や中小企業にとっては痛い仕様だと思っていたわけです。
どれだけの人がセキュア設定でFacebookを見ているのかは分かりませんが、小生は気がついたらsslで見ていたので、もしかしたら初期設定なのかもしれませんし、どこかで設定しなおしたのかもしれません。
何にせよ、このままじゃダメだと色々調べてみたところ、カナダ人の友人にFacebookアプリの”Static IFRAME Tab”というアプリがあり、このアプリケーションを使って対応しているという情報をゲット！
下記で早速ご紹介させて頂きます。
Static IFRAME Tabとは？
FBMLが廃止されてから、様々なFBMLの代わりとなるアプリケーションが出ましたが、どれもFBMLの延長。Facebookアプリで作ったFacebookページのようにアイコンの変更ができなかったり、微妙に重かったりと個人的に使えない印象が大きく。かと言ってアプリ登録してiframeで読み込む方法だとSSLサーバーがいるしと、八方塞がりでしょうがなく使っていたのですが、このStatic IFRAME Tabは、FBMLに似ていますが、独自アイコンの指定もできるようきっちりアプリ申請を行った上でページを作成する優れもの。下記にて作成までの流れをご紹介。
Static IFRAME Tab導入手順
まずはStatic IFRAME Tabを追加します。
すると自分のFacebookページにWelcome!というページが追加されているのが分かります。
Welcomeの左についているようなアイコンでは無く、独自アイコンにしたい！というわけでこちらからアプリ登録します。
1. アプリケーションのセットアップ
下記画面から新しいアプリケーションのセットアップボタンを押します。
アプリケーション名を入力してください。
2. アイコンをアップロード
アプリケーションのアイコンをアップロード！このアイコンがFacebookページに追加されるページのアイコンになります。（先ほどのWelcomeの左みたいな）
ここからちょっと面倒です。ここに設定するURLは必ず下記の物を入力してください。
- Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/
- Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/
- Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab
- Secure Tab URL - Enter https://YOURAPPLICATIONID.iframehost.com/tab
上記の「YOURAPPLICATIONID」という項目は全て作成したアプリケーションのIDに書き換えます。終了したら保存してください。これで準備完了です。
3. アプリケーションの登録とIDメモ
下記のAPI keyとApp Secretをメモ！そして右側のApplication Profile Pageより作成したアプリを自分のFacebookページへ追加します。
さて、ここまでくれば後は自分のアプリケーションへ移動すると登録したアプリケーションが表示されており、下記のような画面が表示されるはずです。
こちらに先ほど控えたAPI KeyとApp Secretの番号を入力してください。
あとは上記のHTML欄に好きにHTMLを書いて画像引っ張るなり、適当に作るなりしてください！自由！貴方は自由です！
ちなみに、タブの名前はいつでもアプリケーションの設定から変更できます。
以上、いかがでしたでしょうか？
ページの作り方というよりは、SSL対応とアイコンを付けるのがメインの紹介になってしまいましたが、最近小生がFacebookページを作る仕事をするときはこの方法を主に使っています。
SSLサーバー持ってる人にはあまり関係無いお話かもしれませんが、ご紹介までに。
ちなみに、こちらの記事は小生のFaecebookページでも見ることができます。
