[2011.09.28 追記]Facebookページ活用！iframe版welcomeタブを作成する方法facebook

2011年10月1日施行のSSL認証義務化にともない、追記をしました。
[追記あり]iframe読み込みのための設定をご覧下さい。

こんにちは、ちこです。
最近は窓の開いた電車もすっかり見慣れてきましたね。
窓から入ってくる風が少しずつなまぬるくなってきて、春だなーと思う今日この頃です。
毎年、春は足早に去っていくような気がするので、早めにお散歩にいきたいです！

今日は近頃さまざまな企業が力を入れているFacebookページの活用として、
iframe版welcomeタブを作成する方法をご紹介します。

【本題に入る前に】Facebookページについて

Facebookページはこれまで「ファンページ」としてユーザーに親しまれてきましたが、
2011年2月11日にその仕様が変更となり、名称やレイアウト・機能が変更されました。
参考に、サイブリッジのFacebookページです。クリックでFacebookページへ飛びます。
Facebookページはデフォルトの状態だと、全ユーザーにウォールが表示されますが、
welcomeタブを作成し、それをデフォルトに設定すると、
まだ「いいね」を押していないユーザーに向けて表示させることが可能です。
ウォールの見た目は変更できませんが、
今回作成するタブは自由に編集でき、独自のアピールが可能になります！

Facebookページはfacebookのアカウントをもつユーザーであれば誰でも作成ができます。
▼Facebookページ作成画面
http://www.facebook.com/pages/create.php
※自身のページ最下部にある「Facebookページを作成」からもアクセス可能です。

まずはタブページを作成しよう

Facebookページの仕様変更に伴い、3月10日よりstaticFBMLでのタブ追加が不可となり、
以降はiframeを使用したタブページが推奨されています。
それでは実際にiframe版のタブページを作成していきましょう！

• アプリ開発者として登録
  http://www.facebook.com/developers/
  開発者ページ右上の「+Set Up New App」をクリックして登録します。
• アプリケーションの作成
  http://www.facebook.com/developers/createapp.php
  アプリケーション名（自由に設定可能）をつけて作成。
  作成後、自動で編集画面へ移動します。
• アプリケーションアイコンの設定
  サイドの「About」ではアイコンを設定できます。
  facebookページに組み込んだ際に表示されるアイコンです。
• [追記あり]iframe読み込みのための設定
  サイドの「Facebook Integration」よりiframe組み込みに必要な情報を入力。

CanvasPage：作成したアプリケーションのURL（自由）
CanvasURL：iframeに読込むファイルを置いてあるサーバーURL（「/」で終わる）
SecureCanvasURL：上記サーバーのhttpsのURL
iframeサイズ：「Auto-resize」を選択
タブ名：追加するタブの名前。Facebookページのメニューに表示される名前
タブのURL：iframe内のURL。実際に読み込まれて表示されるページ
SecureTabURL：iframeで読み込むページのhttpsのURL

赤字で記したように「Secure Canvas URL」「Secure Tab URL」にhttpsから始まるURLを必ず入力しましょう。共有SSLのドメインで「CanvasURL」「タブのURL」で入力したドメインと異なっても大丈夫です。
設定がちゃんとできたか確認したい場合は、[2011.9.28追記]SSL認証対応の確認方法を参考に確認してみてください。

作成したタブページの編集

• iframeで読込むように設定したhtml（あるいはphpなど）を編集
  デフォルトではiframeのサイズは520px×800pxとなっており、
  このサイズを超えるとiframeにスクロールバーが表示されてしまいます。
  heightを広げるjsも紹介されていますが、
  2011年4月現在、IE8でエラーが出たり出なかったりというのを確認。
  原因を調べたいとおもっていますが、以下参考です。

【参考】iframe版Facebookページのスクロールバーを消す方法

http://tam-tam.co.jp/tipsnote/javascript/post1097.html

タブをFacebookページに追加する

• アプリケーションのプロフィールページにアクセス
  マイアプリページから作成したアプリケーションを選択し、
  「Application Profile Page」からプロフィールページへ。
  
  
• マイページへ追加する
  サイドの「マイページへ追加」をクリックし、
  ウィンドウから作成したアプリを追加させたいFacebookページの選択します。
  
  

作成したタブページをトップページに設定する

Facebookページにアクセスし、
Facebookページを編集＞権限の管理＞デフォルトで表示するタブ＞作成したタブ名を選択

※設定したページがトップページとして表示されるのは、
「いいね」を押していないユーザーと未登録（ログアウト中）のユーザーのみです。
管理者と「いいね」を押したユーザーにはウォールが表示されるようになっているので、
一度ログアウトして確認するなどが必要です。


以上でFacebookページへのwelcomeタブ追加は完了です！
通常のwebページをiframeで呼び出しているだけなので、
FBMLではできなかった様々なシステムとの連動とかもできるのが良いですね。
今回はwelcomeタブとして作成しましたが、
同様にしていくつもタブを追加できるので独自のFacebookページを作りあげましょう！

サイブリッジのFacebookページもこれからどんどん充実させていきたいです。

[2011.9.28追記]SSL認証対応の確認方法

2011年10月1日からfacebookページのSSL対応が必須となりました。対応方法を追記しましたが、作成したページがちゃんとSSL対応できているのかを確認する方法をご紹介します。対応していないページは閲覧できなくなるということで、作成したらまずは確認してみましょう。
SSL認証に対応できたかどうかを確認するには、セキュア接続をオンにして追加したタブを見てください。セキュア接続の設定は、右上の「▼」からアカウント設定を選択→「セキュリティ」→「セキュア接続」から設定ができます。タブをFacebookページに追加してから確認しましょう。


ちなみに、SSL認証ができていないページに関してはセキュア接続をオンにしてアクセスした際に、2011年9月現在ではこのようなアラートが出てきます。
これまでは上記画面で「続行」をクリックし強制的にログアウト・再ログインすることでセキュア接続をオフにさせてページを閲覧できるようなっていましたが、2011年10月1日以降はそうはいかなくなります。
SSL認証の義務化についてはfacebookDEVELOPERS（英語）でも書かれています。

【参考】Reminder: Breaking Changes coming on Oct 1st　- 2

https://developers.facebook.com/blog/post/555/

10月1日以降にまたアプリ開発者画面もリニューアルが施されるかもしれないですね。このあたりも要チェックしていきたいと思います。では。