facebookページにページタブを追加する。

先ずは Developersサイト からアプリを追加

My Apps → Add a New App で Facebook キャンバスを選択。名前を付けて Create New Facebook App ID でアプリを作成。

アプリの設定

さっき作ったアプリを選択して
設定 → Basic → + Add Platform → ページタブ を選択。
Secure Page Tab URL(https で接続できる URL)、Page Tab Name、Page Tab Image(111×74) を設定。
[変更を保存] で設定を保存する。

アカウントと紐づけ

Tools&Support の Graph API Explorer で作成したアプリケーションを選択して Get Token する。
ページタブを表示するだけなら manage_pages 権限だけで良さそう。

facebookページにページタブを追加する方法

http://www.facebook.com/add.php?api_key=作ったアプリのID&pages=1
初回のみ [Facebookページを選択] になるので、追加したい facebookページを選択する。

手っ取り早くページタブを使いたいなら

Static HTML の様なサービスもある。これを使えばデベロッパー登録なしにページタブが使える。
１タブなら無料で使える。

わかったこと

個人ページにはページタブは追加できなそうだ。
ページ内のリンクから遷移したい場合は、target=”_parent” に設定する必要がある。(iframeなので)
タイムライン対応後や v2.5 は情報が少なすぎて・・・ orz

ついでに WordPress の固定ページをリソースにしてみた。

無料ホームページスペースでも、管理ページを https 経由でアクセスするように設定にすると、https でもアクセスできるようになるものがある。
(このサイトとか。でも証明書はいまいちなのでブラウザ(FireFoxなど)によっては、初回の例外登録かも。)

1. https で接続できないと facebook に設定できないので、https で接続するように修正する。
2. 次に facebook 用のテンプレートを作成する。テーマの中に Template Name: ～ と記述されている php があるはずなので、それのどれかをコピー。
   ヘッダーや、サイドバー、フッターが無いような記述に変更して、Template Name を facebook とかにしておく。
3. 固定ページを作成する。その際に、テンプレートを facebook 用のものにしておく。
4. facebook のアプリで、ページタブの Secure Page Tab URL やキャンバスの Secure Canvas URL に固定ページのフルパスを記載

これで、この ワードプレス の固定ページで 側が修正できるようになる。
ちなみに、作ったテンプレートの先頭に以下の様なコードを書いておくと幸せかもしれない。(リファラを偽装されたらアウトだけど)

同じような方法で・・・

a-blog cms や MovableType で実装する方法もあるらしい。
自分としては使い慣れた WordPress の方が楽だし十分かな。

Tweet