PHPを利用したfacebookアプリ(iframe版)の作り方

  • 2011.02.26 Saturday
  • 23:51
レンタルサーバー 【ヘテムル】を利用したfacebookアプリの作り方をまとめました。

まず、基礎知識としてfacebookアプリの基本原理原則のようなものを箇条書きでまとめます。
  • 2011年2月5日に発表されたとおり、今後はFBML形式は利用できなくなります
  • iframe版での開発には、外部からホストできるサーバーが必要です(今回はヘテムルを利用します。)
  • facebookアプリには、アプリケーション本体(Canvas)と呼ばれるものと、Facebookページ(旧名称はファンページ)のタブに追加できるタイプのものがあります。
  • Facebookアプリ開発者は、Facebookに振り回されるのを覚悟するように…。この記事は、2011年2月27日時点の画面コピーを多用していますが、1ヶ月後にはどう変わってるか想像もつきません。そのぐらい変化が激しいです。
iframeを利用すれば、非常に簡単に自分のサイトをFacebookページに追加できたりするので、FBML廃止は良い面もありつつ、ホスティングサービスが絶対に必要になるという点で課題も残ります。(ホスティングサービスを利用していない方は、先に登録しておいてください。)

さて、前置きはこのぐらいにして、早速PHPでのfacebookアプリの作り方に入りたいと思います。まずは、当然ですがfacebookに会員登録してください。会員登録の手順は省かせてもらいます。

  1. 新規アプリケーションの登録
    こちらから登録を行うことができます。
    登録のさいには、アカウント認証(携帯電話のメールアドレス登録か、クレジットカード登録)が必要になります。

    ※Facebookアプリケーション開発用の「アプリ」であるDevelopersへ自動的に登録されるみたいです。
  2. アプリケーションの設定を行います

    具体的にアプリケーションの設定を行うのは、「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:設定する必要ありません
  3. 管理者以外から見えないように設定する

    開発中はみっともない状態になるはずなので「Advanced」タブの「Authentication−サンドボックス」を有効にして、表に見えないようにしましょう。
  4. PHPのSDKをダウンロードする
    ダウンロードはこのサイトから行えます。

    PHPのSDKをダウンロードしましょう。
  5. プログラムのアップロード
    ダウンロードしたSDKの「examples/example.php」を開き、

    appIdとsecretにそれぞれ自分のアプリケーションのアプリケーションIDとアプリケーションの秘訣(?)に変更してください。(確認場所はhttp://www.facebook.com/developers/apps.php?app_id=[your app id]の下記の場所)
  6. ファイル名の変更
    いよいよヘテムルにファイルをアップロードするのですが、このSDKはPHP5環境でないと動作しません。ヘテムルの場合、.phpの拡張子は通常だとPHP4で動作します。拡張子を.php5に変更することでPHP5で動作します。
    「example.php ⇒ index.php5」に変更し、更にファイルをコピーして「tab.php5」を作成しておきます。
    ※2の手順のところで入力した値に合わせるという形になります。
  7. ファイルのアップロード
    準備が整ったので、exampleフォルダとsrcフォルダをFTPを利用してヘテムルのサーバー上にアップします。アップする場所は、「/web/」になります。パーミッションの変更などは必要ありません。
  8. 動作を確認する
    2の手順で「Canvas Page」に入力したページにアクセスすると動作の確認ができます。tabバージョンの動きはまた別なのですが、とりあえずはこれで動作確認を行ってください。
  9. tabページの動作確認
    まずは、自分が管理するFacebookページを作成する必要があります。こちらから、Facebookページを作成してください。
    Facebookページを作成したら、マイアプリページを開き

    「Application Profile Page」をクリックします。

    アプリケーションページの左サイドメニューにある「マイページへ追加」をクリックすると、先程作成したFacebookページが一覧に表示されるのでアプリケーションを追加してください。

    ※作成直後は表示されないケースがあります。反映まで数分から数時間かかることがあるようです。

    蛇足かもしれませんが、私も非常に困ったので付記しておきますと、自分が管理しているFacebookページの表示は、上部メニューバーの「アカウント−ページ名でFacebookを利用」からたどることができます。

    これで、tabページの表示も確認できたと思います。後は、好きにPHPなりHTMLなりをいじって自分のアプリケーションを構築してください。

無事作成することはできたでしょうか?もし動かない!ということがあれば、コメント欄にでも書いてください。出来る範囲でサポートいたします。


JUGEMテーマ:facebook

スポンサーサイト

  • 1970.01.01 Thursday
  • 23:51
  • 0
    • -
    • -
    • -
    • -
    コメント
    facebookページのiframeタブをPHPで作る場合は、
    必ずPHPのSDKダウンロードが必要なのでしょうか?

    今現在facebookページのiframeタブをPHPで作っているのですが、
    SDKのダウンロードをしておらず、でも正常に動いているような気がします。

    SDKのダウンロードは何のためにするものなのでしょうか??
    • katayama
    • 2011/02/27 10:41 PM
    コメントありがとうございます。SDKのダウンロードは必須ではありませんし、もちろん自作することも可能です。そのあたりを楽にしてくれるライブラリだと思ったらよいと思います。


    というかiframeでJS版での連携を行うなら、必要ないですし、htmlを表示するだけなら、全く必要ないです。
    • そうせいじ
    • 2011/02/28 8:01 PM
    丁寧にご回答ありがとうございます。
    SDKをダウンロードしていない状態で、いいねを押したときと
    そうでないときの表示の切り分けができているのですが、
    別におかしいことではないということですよね?

    • katayama
    • 2011/03/22 4:28 PM
    同じ方法で複数ページを作ろうと思いましたが、
    なぜかフェイスブックページに内容が表示されませんでした。
    1ページはうまくいって表示しています。
    もう一つページを同じ方法で秘密鍵とURLを変更して行いましたが表示されませんでした。
    もしお分かりでしたらお教えください。
    • ochi
    • 2011/06/06 12:01 AM
    コメントする








        

    PR

    calendar

    S M T W T F S
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
    << July 2017 >>

    ninja

    ahref Javascript

    このJavascriptは、aタグの「target="_blank"」の設定に従って違う画像を表示させる機能を提供します。 作者はイエイリカズマ氏です。

    はてブ数

    selected entries

    categories

    archives

    recent comment

    recent trackback

    recommend

    ウェブ進化論 本当の大変化はこれから始まる
    ウェブ進化論 本当の大変化はこれから始まる (JUGEMレビュー »)
    梅田 望夫
    梅田さんの真骨頂。Webで何が起こってるかが、とても分かり易く記述されています。

    recommend

    99・9%は仮説 思いこみで判断しないための考え方 (光文社新書)
    99・9%は仮説 思いこみで判断しないための考え方 (光文社新書) (JUGEMレビュー »)
    竹内 薫
    何故科学の元が哲学なのかが理解できた気がした本。

    recommend

    働きマン (1)
    働きマン (1) (JUGEMレビュー »)
    安野 モヨコ
    噂を聞きつけて読んでみました。

    recommend

    同じ月を見ている 1 (1)
    同じ月を見ている 1 (1) (JUGEMレビュー »)
    土田 世紀
    これはヤバイ!早く続き読みたい。

    recommend

    recommend

    ルサンチマン 1 (1)
    ルサンチマン 1 (1) (JUGEMレビュー »)
    花沢 健吾
    久しぶりに発見した秀逸なマンガ。

    recommend

    recommend

    ウンコな議論
    ウンコな議論 (JUGEMレビュー »)
    ハリー・G・フランクファート, 山形 浩生
    名前に惹かれました。翻訳者も結構好きだったりします。

    recommend

    意識とはなにか―「私」を生成する脳
    意識とはなにか―「私」を生成する脳 (JUGEMレビュー »)
    茂木 健一郎
    私が私であるということがどういうことなのか。悩みを深めるための本とも言えます。

    recommend

    recommend

    links

    profile

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM