2011.02.26 Saturday
PHPを利用したfacebookアプリ(iframe版)の作り方
レンタルサーバー 【ヘテムル】を利用したfacebookアプリの作り方をまとめました。
まず、基礎知識としてfacebookアプリの基本原理原則のようなものを箇条書きでまとめます。
さて、前置きはこのぐらいにして、早速PHPでのfacebookアプリの作り方に入りたいと思います。まずは、当然ですがfacebookに会員登録してください。会員登録の手順は省かせてもらいます。
無事作成することはできたでしょうか?もし動かない!ということがあれば、コメント欄にでも書いてください。出来る範囲でサポートいたします。
まず、基礎知識としてfacebookアプリの基本原理原則のようなものを箇条書きでまとめます。
- 2011年2月5日に発表されたとおり、今後はFBML形式は利用できなくなります
- iframe版での開発には、外部からホストできるサーバーが必要です(今回はヘテムルを利用します。)
- facebookアプリには、アプリケーション本体(Canvas)と呼ばれるものと、Facebookページ(旧名称はファンページ)のタブに追加できるタイプのものがあります。
- Facebookアプリ開発者は、Facebookに振り回されるのを覚悟するように…。この記事は、2011年2月27日時点の画面コピーを多用していますが、1ヶ月後にはどう変わってるか想像もつきません。そのぐらい変化が激しいです。
さて、前置きはこのぐらいにして、早速PHPでのfacebookアプリの作り方に入りたいと思います。まずは、当然ですがfacebookに会員登録してください。会員登録の手順は省かせてもらいます。
- 新規アプリケーションの登録
こちらから登録を行うことができます。
登録のさいには、アカウント認証(携帯電話のメールアドレス登録か、クレジットカード登録)が必要になります。
※Facebookアプリケーション開発用の「アプリ」であるDevelopersへ自動的に登録されるみたいです。 - アプリケーションの設定を行います
具体的にアプリケーションの設定を行うのは、「Facebook Integration」にて行いますので、何も考えずに「Facebook Integration」をクリックしてください。
※ちなみに、自分の作ったアプリのページにたどり着くのも最初のうちは大変なので、とりあえずブックマークしておくことをおすすめします。なんとも恥ずかしい話ですが…。- Core Settings
作成したアプリケーションの「アプリケーションID」と「Application Secret(秘密鍵)」が表示されます。アプリケーションIDは、URLを確認すると同じIDがクエリストリング内に入ってるのが確認できると思います。秘密鍵はどこにも漏らさないようにしましょう。 - Canvas
Canvasページの設定です。Canvasページとは、いわゆるアプリケーションがメインで動作するページのことを指します。Facebookページのタブに表示されるものと分けることも可能です(分けることをおすすめします。)ここの設定は、以下のとおりです。- Canvas Page:好きな文字を入力してください
- Canvas URL:このURLがiframeに埋め込まれます。
後でのことを考えて、「http://[your sub domain].heteml.jp/example/」を設定しましょう。 - Canvas Type:IFrameを選択してください(デフォルトのまま)
- iFrameサイズ:「Auto-resize」に設定しましょう
- ブックマークURL:未入力のままで大丈夫です
- Discovery
割愛します。設定変更の必要ありません。 - Page Tabs
Facebookページ内に表示される設定を行います。それぞれの項目は下記のとおりです。- タブ名:Facebookに登録したときのデフォルト値です。
- PageTabType:IFrameを設定しましょう
- タブのURL:CanvasURLで入力したURLの後ろにくっつきます。ファイル名などを入力してください。
今回は、「tab.php5」と入力しておきましょう。 - 編集用URL:設定する必要ありません
- Core Settings
- 管理者以外から見えないように設定する
開発中はみっともない状態になるはずなので「Advanced」タブの「Authentication−サンドボックス」を有効にして、表に見えないようにしましょう。 - PHPのSDKをダウンロードする
ダウンロードはこのサイトから行えます。
PHPのSDKをダウンロードしましょう。 - プログラムのアップロード
ダウンロードしたSDKの「examples/example.php」を開き、
appIdとsecretにそれぞれ自分のアプリケーションのアプリケーションIDとアプリケーションの秘訣(?)に変更してください。(確認場所はhttp://www.facebook.com/developers/apps.php?app_id=[your app id]の下記の場所) - ファイル名の変更
いよいよヘテムルにファイルをアップロードするのですが、このSDKはPHP5環境でないと動作しません。ヘテムルの場合、.phpの拡張子は通常だとPHP4で動作します。拡張子を.php5に変更することでPHP5で動作します。
「example.php ⇒ index.php5」に変更し、更にファイルをコピーして「tab.php5」を作成しておきます。
※2の手順のところで入力した値に合わせるという形になります。 - ファイルのアップロード
準備が整ったので、exampleフォルダとsrcフォルダをFTPを利用してヘテムルのサーバー上にアップします。アップする場所は、「/web/」になります。パーミッションの変更などは必要ありません。 - 動作を確認する
2の手順で「Canvas Page」に入力したページにアクセスすると動作の確認ができます。tabバージョンの動きはまた別なのですが、とりあえずはこれで動作確認を行ってください。 - tabページの動作確認
まずは、自分が管理するFacebookページを作成する必要があります。こちらから、Facebookページを作成してください。
Facebookページを作成したら、マイアプリページを開き
「Application Profile Page」をクリックします。
アプリケーションページの左サイドメニューにある「マイページへ追加」をクリックすると、先程作成したFacebookページが一覧に表示されるのでアプリケーションを追加してください。
※作成直後は表示されないケースがあります。反映まで数分から数時間かかることがあるようです。
蛇足かもしれませんが、私も非常に困ったので付記しておきますと、自分が管理しているFacebookページの表示は、上部メニューバーの「アカウント−ページ名でFacebookを利用」からたどることができます。
これで、tabページの表示も確認できたと思います。後は、好きにPHPなりHTMLなりをいじって自分のアプリケーションを構築してください。
無事作成することはできたでしょうか?もし動かない!ということがあれば、コメント欄にでも書いてください。出来る範囲でサポートいたします。
JUGEMテーマ:facebook