Facebookページに独自ページを追加する方法

こみゅっと藤沢(藤沢市市民電子会議室)のFacebookページ開設にあたり、ページタブを追加して独自ページで「ガイドライン」を作ることになりました。

参考までに藤沢市広報課のFacebookページ「カラフルフジサワ」はどうしているのかなと確認したところバリュークリエーションの「Static HTML」で作成されておりました。

スクリーンショット 2013-01-17 9.08.06
https://www.facebook.com/fujisawacity/app_109770245765922

このような便利なアプリもあるようですが、今回は独自にやってみようとチャレンジしたところ、意外と簡単にできましたので備忘録的にここに書きます。

設置するにあたりひとつだけ条件がありますので、以下に書いておきます。
・SSL接続できてPHPが動作するWEBサーバー上にページがアップロードできること

【1】独自ページの作成
まず独自ページを以下のように作成し、上記条件をクリアしたWEBサーバーにアップします。 /dokuji/ というディレクトリを作成し、ファイル名は index.php にしました。

———————————————

<?PHP
echo<<<_HTML_
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>独自のページだよ</title>
</head>
<body>

独自のベージだよ。

<fb-root></fb>

</body>
</html> _HTML_;
exit;
?>

———————————————

【2】App IDを取得する
Facebook Developersにアクセスし、新しいアプリを作成します。ここではApp IDを取得するのが目的です。まず以下URLをクリックし

Facebook Developers
https://developers.facebook.com/apps/

スクリーンショット 2013-01-17 9.41.02

ページにアクセスしたら[+新しいアプリを作成]をクリックすると以下のダイアログが開きますので

スクリーンショット 2013-01-17 9.49.13
App Nameを入力し、[続行]をクリック。

スクリーンショット 2013-01-17 9.54.13
セキュリティチェックで表示された文字列を入力し、[続行]をクリック。

dokuji1
表示名、メールアドレス、ページをアップロードしたWEBサーバーのドメイン名をそれぞれ入力します。(もともと書いてあったらそのままで)

dokuji2
ページタブの名前、アップロードしたページのURLとアップロードしたページにセキュア接続できるURL(https://〜)を記入します。ページタブの画像を変更したい場合は変更をクリックして画像ファイル(推奨サイズ W111×H74)をアップロードしてください。

それぞれ記入が終わりましたら、[変更を保存]をクリックしてください。

【3】ページタブを追加する

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

上記URLのYOUR_APP_IDには基本設定上部に記載されているApp IDを入力し、YOUR_URLの部分には今回独自ページをアップロードしたURLを記入し、サイトにアクセスします。

スクリーンショット 2013-01-17 17.28.34
プルダウンからページタブを追加したいFacebookページを選択し、[ページタブを追加]をクリックします。

以上で完成です。
Facebookページにアクセスしてページタブが追加されているか確認してください。

フジサワネットのFacebookページ
https://www.facebook.com/fujisawanet