Facebookページにて自作ページ? を追加するためのメモ。
(2012/4/9現在版)

※Timeline対応(コンテンツ幅変更)修正版
 後で追加する かも?

先にFacebookページは作成済みであることが前提。

Facebookページで表示するHTMLを自サイトにアップ

横幅を520px(Narrow)もしくは810px(Wide)にする
なるべく高さ800pxまでにする
→高さ制限は解除できるけどね
 http://www.u-ziq.com/blog/2011/05/facebookjquery.html

アプリケーションを作る

https://developers.facebook.com/apps
にアクセスして、新規アプリケーションを作成
App Display NameとApp Namespaceは適当に。
前者はいわゆる管理用タイトル、後者はIDになるものだと思われる

設定変更画面にて変更する

設定変更画面が出るので、以下を変更する
アイコンを変える
メニューにアイコンが出るので、アイコン変えた方がかっこいい

Facebook上のアプリ
キャンバスURL:読み込むHTMLが置いてあるサイトのディレクトリまで入れる
例) http://www.hogehoge.com/fb/fuga.html
を読み込みたい場合は
http://www.hogehoge.com/fb/
セキュリティで保護されたキャンバスURL:httpsなURL。考え方は上と同じ。なくてもいいけど、SSLで閲覧された際にページが表示されなくなる

ページタブ
ここがFacebookページに表示される内容
ページタブ名:左サイドに表示されるタイトル
Page Tab URL:読み込むHTMLのURL
Secure Page Tab URL:SSLで読み込むHTMLのURL。なくてもいいけど、SSLで閲覧された際にページが表示されなくなる
ページタブの画像:タイムライン上部に表示されるタブ画像。ないとかっこわるいので、作っておくべき。横111px×縦74px
Page Tab Width:Narrow(520px)かWide(810px)どちらかを選択
保存してアプリの設定を完了する

アプリにページを追加

2011/12/10に仕様変更があった模様で、「アプリのプロフィールページを見る」が表示されなくなった。
そのため、以下のURLを直接たたく必要がある

https://www.facebook.com/dialog/pagetab?app_id=[Your APP ID]&next=[Secure Page Tab URL]

APP IDは設定画面の上部に、Secure Page Tab URLは「ページタブ」のところで設定したURLのこと。
上記のURLを開くとFacebookページの選択画面が出るため、追加したいページを選択して「ページタブを追加」をクリック

その後、Facebookページ側で最初に開くページとかページの順序とかごにょごにょしてあげると色々楽しいFacebookライフになること間違いなし!

【参考(Facebookの画面がやや古いけど基本的な考え方は同じ)】
http://ascii.jp/elem/000/000/593/593097/

にほんブログ村 IT技術ブログ プログラム・プログラマへ