HOME > 開発メモ > facebookアプリの作り方(PHP編)
2011/12/05 (2014/08/26更新) タグ:

facebookアプリの作り方(PHP編)

facebookアプリとは、ブラウザで動くゲームやツールなどのソフト。既に35万以上ものアプリが存在するようです。これらは、利用者は無料で使うことが出来るんですが、Flashベースのゲームだったり、診断・占い系、他SNSと連動するもの、コミュニケーションツール…など、無数にあります。今回はこのfacebookアプリの作り方を解説します。

SPONSOR

基本的な仕組み

facebookアプリといっても、アプリのプログラム自体は自社サーバー内でに設置します。作ったファイルをfacebook内でiframeで読み込んで使うことになります。なので、言語等の縛りもありません。だからこそ、自由性が高く、色んなアプリがあるのだと思います。

facebookアプリは、facebook内で動くものや、サイトの一部に連携しているものもあります。サイトで使用する場合は、例えばログインさせて個別の情報を扱いたい時に使うケースが多いようです。普通は独自にプログラムをつくりますが、これをfacebookのアカウントでログイン出来るように作れます。利用者も新たに登録する必要がないので、敷居は低いものとなります。ちなみに、Twitterもそうですが、OAuthで認証するため、開発側は利用者のPWを盗んだりすることは出来ないようになっています。

ログインする際に、権限の確認を行わせ、ユーザーの基本情報だけを使うか、ウォールへ書き込みをするか、などを決めて、利用者に承認を得ます。特に海外のものでは、あやしいアプリを認証すると、勝手にウォールに書き込みをしたりするような、悪質なアプリもあるので、むやみやたらに入れないよう注意が必要ですね。

facebookアプリに必要な環境

  • facebookアカウント
  • Webサーバー(レンタル・専用どちらでもOK)

この他、facebookではSSLを使ってログインすることも出来るのですが、そのようなユーザーに対しては、アプリ側もSSLに対応しておく必要があります。

今回、つくろうとしているもの

既にfacebookページがあるケースで、ウェルカムページを作ることと、ウェルカムページからいいね!を押してもらった人には独自のコンテンツを見せる。

facebookアプリの登録

まず、facebookにログインしてアプリの情報登録を行います。こんな名前のアプリを作りますよ、ということをfacebookに事前登録します。

facebook developersのページからアプリを登録します。右上の「アプリ」というタブをクリックすると、以下の認証画面が出てきますので、許可するをクリック。

続いて、右上の「新しいアプリケーションを作成」をクリック。

アプリの名前とネームスペースを決めます。ちなみに、後から変更も出来ます。

そして、アプリの基本設定。

AppIDとSecretは、アプリプログラムからアクセスする際に必要になりますので、メモしておいて下さい。

(基本データ)
アプリの表示名:アプリの名前です
アプリの名前空間:アプリのURLで使われるURL名
連絡先メールアドレス:これはそのまま
アプリのドメイン:今回はfacebook上のアプリなので、必要ないみたいです
カテゴリ:数が少ないですが、一番適しているものを選択

アプリをfacebookに結合する方法を選択してください
にて、「facebook上のアプリ」「ページタブ」を選択。

(facebook上のアプリ)
キャンパスURL:アプリを設置するURL
セキュリティで保護されたキャンパスのURL:アプリを設置するURL(SSL)

(ページタブ)
これは、facebookページの左欄に独自のタブを作るためのものです。今回は、ウェルカムページ用のタブを作るためにこれを使います。

ページタブ名:表示されるタブの名前
ページタブURL:アプリを設置するURL
セキュアページタブURL:アプリを設置するURL(SSL)
ページタブ編集URL:正直これ、よく分からないんですが、入れないと後でfacebookページと結合できませんので、アプリURLを入力

facebookページと連結して、ウェルカムページを設置

全てを保存したら、同ページの左側にある「アプリのプロフィールページを見る」のリンクを開きます。

マイページへ追加を押して、連結させたいfacebookページを選択します。

そうして、今度はfacebookページの編集画面に入って、デフォルトで表示するタブを見てみると、先ほど作ったページタブが表示されるようになっているはずです。選択すると、facebookページを開いた時に、facebookアプリが読み込まれるようになります。

PHP-SDKでアプリプログラムを作る

さて、ここまでで下地が出来ましたので、いよいよ本体のプログラムを作ります。公式で提供されているSDKがありますので、なにはともあれダウンロード。

実際に使用するのは「src」フォルダ内の3ファイル。

  • base_facebook.php
  • facebook.php
  • fb_ca_chain_bundle.crt

これらのファイルをincludeして利用します。

そして、いいね!が押されているかどうか判別するプログラム

<?php
function parse_signed_request($signed_request, $secret) {
 list($encoded_sig, $payload) = explode('.', $signed_request, 2);
 // decode the data
 $sig = base64_url_decode($encoded_sig);
 $data = json_decode(base64_url_decode($payload), true);
 if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
  error_log('Unknown algorithm. Expected HMAC-SHA256');
  return null;
 }
 // check sig
 $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
 if ($sig !== $expected_sig) {
  error_log('Bad Signed JSON signature!');
  return null;
 }
 return $data;
}
function base64_url_decode($input) {
 return base64_decode(strtr($input, '-_', '+/'));
 }
?>

こちらは、ネットで色々探しているうちに見つけた素晴らしいプログラムです。これをsigned_request.phpと名前をつけて保存します。

index.phpを作り、以下のコードを入れます。

<?php
include_once('signed_request.php');
require 'facebook.php';
//●●はさきほどメモしたID等を入れてください
$facebook = new Facebook(array('appId' => '●●●●●●●●●●',
							  'secret' => '●●●●●●●●●●',
							  'cookie' => true,
						));
$fb_user = $facebook->getUser();

//いいねを押しているかどうか判別
  if ( isset($_POST['signed_request']) ) {
    $fb_data = parse_signed_request($_POST['signed_request'], '●●●●●●●●●●');
    if( $fb_data['page']['liked'] ){

                //いいねとは別にアプリの権限認証をしているかどうか確認する
                //されていなければ、権限認証画面へ転送する
		if (!$fb_user) {
                //scopeの部分はどこまで権限がほしいか任意設定できる
		$par = array('scope' => 'publish_stream','redirect_uri' => 'リダイレクトURL。今回はfacebookページのアドレス。');
    	$fb_login_url = $facebook->getLoginUrl($par);

                //javascriptで転送させないと、間にfacebookのロゴが出てくる減少が起こる
		echo "<script type='text/javascript'>top.location.href = '$fb_login_url';</script>";
		}

      include_once('fan.php');

    } else {
      include_once('notfan.php');
    }
  }
?>

いいね!が押されているかどうか判別して、fan.phpかnotfan.phpを表示させるようにしています。notfan.phpの中には、いいね!を押す前に表示させたい内容をHTMLで作ります。fan.phpの中は、いいね!を押した人用のコンテンツを。

せっかくなので、ウォールに書きこみの方法を

結果をfacebookウォールに書きこんでもらえれば、さらなる拡散が見込めます。ウォールに書き込むには、権限が必要で、認証をもらわなければなりません。

それが上記にも書いているこれなんです。
$par = array(‘scope’ => ‘publish_stream’,’redirect_uri’ => ‘リダイレクトURL。今回はfacebookページのアドレス。’);
$fb_login_url = $facebook->getLoginUrl($par);
生成された$fb_login_urlに転送させると、認証画面が出てきて、承認されれば権限がおります。権限の詳細は公式情報をご参考に。

ウォールに書き込むには
$facebook->api(‘/me/feed’, ‘POST’, array(‘message’ =>’書き込みたい内容’));
権限認証が済んでいれば、これだけで実行できます。他にも画像を入れたり、リンクを入れることが出来ます。詳しい設定はこちらを。

PLUSでもfacebookページ・アプリ制作をはじめましたので、興味を持たれた方はご相談ください。

タグ:
この記事をシェアする

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

毎月定額のITマネジメントサービス
イリテクがリモートで御社のIT部門を担当します。なにを相談していいかわからなくても大丈夫。ITマネジメントサービスは、課題をみつけることからはじまります。作って終わりの関係ではなく、企画からデザイン・開発まで、御社のビジネスを顧問スタイルで末永くサポートします。
月額固定のITマネジメントサービス

こちらの記事もおすすめです

SPONSER

記事を書いている人
入江 慎吾 イリテク(株)代表
デザインもやるプログラマ。Webサービス、iOSアプリ開発をやってます。
毎月定額のITマネジメントサービスはじめました。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
iOSアプリの開発を始めたい方へ

アプリ開発の勉強は、本よりも動画で実際に作っているところを見せてもらったほうが理解が早いです。

Facebook
Twitter