Hatena::ブログ(Diary)

19790401173.4 このページをアンテナに追加 RSSフィード

2010-10-12

facebook アプリの作り方・PHP 編(2010 年 10 月版)

なんだか突発的に盛り上がってる facebook ですが、アプリが気になっていじってみました。mixi アプリは PC 版がクローズドオープンだった頃にお遊びでいくつか公開していたのだけど、それより格段に手軽かつ自由度が高いなぁ、という印象です。

で、日本語で解説しているページがほとんどなさそう&あってもなんだか古そうなので丁寧めに以下書いてみるよ。言語は PHP ですぞー。

facebook アプリを登録

マイアプリケーション一覧:http://www.facebook.com/developers/apps.php に移動し、右上にある「新規アプリケーション登録」をクリック

f:id:ramyana:20101012092336p:image

名前を適当に決めて登録(あとで変更可能)

f:id:ramyana:20101012092337p:image

登録できたら、そのアプリの「設定を編集」をクリックすると、以下のような画面になるはず。ここの「Facebook Integration」タブをクリック

f:id:ramyana:20101012092338p:image

アプリURL と、アプリ起動時にリンクする URL 先を決めます。キャンバスページは任意の 7 文字以上の英数字文字列で。キャンバスページ URL は、自分のサーバーやテスト環境を指定しましょう。Canvas Type は iFrame にします。

f:id:ramyana:20101012092339p:image

リリース前なら、「詳細設定」タブにある「サンドボックスモード」を有効にしておいたほうがいいかも。こうしておくと、開発者以外はアプリが閲覧できなくなります。開発者はアプリ登録者だけでなく、メールアドレスなどを指定することで追加可能。

f:id:ramyana:20101012092340p:image

アプリの登録が完了したら、ページトップにある「アプリケーション ID」と「シークレットキー」をメモ

f:id:ramyana:20101012234533p:image

facebook PHP SDKダウンロード

PHP 用の SDK が配布されているので、以下からダウンロード

http://github.com/facebook/php-sdk/

src の中にある facebook.php と fb_ca_chain_bundle.crt があればとりあえずあとはなくても大丈夫です。

facebook アプリでユーザー認証

単純な例とするために、用意するのは上記 SDK 以外は index.php だけにします。以下 3 ファイルを同じフォルダに入れます。

  • index.php : 本体
  • facebook.php : 落としてきた SDK のファイル
  • fb_ca_chain_bundle.crt : 落としてきた SDK のファイル

望ましい動作としては、

  • アプリ登録済みユーザーであればユーザー情報をゲットしてページ表示
  • アプリ未登録ユーザーであれば facebookアプリ登録画面へ遷移

というものかなぁ、と思います。それでは index.php を作ります。

index.php の中身
<?php
require('facebook.php');

$facebook = new Facebook(array(
	'appId'  => 'メモったアプリケーション ID',
	'secret' => 'メモったシークレットキー',
	'cookie' => true,
));

$session = $facebook->getSession();
if (!$session) {
	$url = $facebook->getLoginUrl(array(
		'canvas' => 1,
		'fbconnect' => 0,
		'req_perms' => 'status_update,publish_stream' // ステータス更新とフィードへの書き込み許可
	));
	// アプリ未登録ユーザーなら facebook の認証ページへ遷移
	echo "<script type='text/javascript'>top.location.href = '$url';</script>"; 
	
} else {
	try {
		$me = $facebook->api('/me'); // 自分の情報を取得
		$uid = $facebook->getUser(); // 自分のユーザー ID を取得
		
	} catch (FacebookApiException $e) {
		$error = "Error : something is wrong, please try again later.";
		exit();
	}
}
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>facebook auth test</title>
</head>
<body>

<div>プロフィール情報</div>
<img src="https://graph.facebook.com/<?php echo $uid; ?>/picture">
<?php echo $me['name']; ?>

<div>セッション情報</div>
<pre><?php print_r($session); ?></pre>
</body>
</html>
出力結果

f:id:ramyana:20101012234534p:image

f:id:ramyana:20101012234535p:image

一番始めにやったとき、$me を mb_convert_variables('Shift_JIS', 'UTF-8', $me); しないと文字化けしてたんだけど、なぜか今やったら直ってたなぁ。SDK についてるサンプルとほとんど変わらなくなってしまった…(;´Д`)

facebook アプリからニュースフィードに投稿

アプリ作ってもソーシャルに広めるにはニュースフィードに通知しなきゃいけない、ってわけで投稿はこんなかんじ。ちなみに事前に上記の認証時の 'req_perms' に 'publish_stream' が含まれていることが前提条件です。

<?php
try {
	$response = $facebook->api(array(
	'method' => 'stream.publish',
	'message' => '瀬尾さんのベストショット(^ω^)',
//	'target_id' => '1253116305', //相手を指定する場合はその ID、なくてもいい
	'attachment' => array( //画像とか付けたい場合はそのデータ、なくてもいい
		'media' => array(array(
			'type' => 'image',
			'src' => '画像の URL',
			'href' => "http://www.facebook.com/",
			'description' => '{*actor*} さんが撮影しました',
			'caption' => '{*actor*} さんが撮影しました',
		))
	),
	'action_links' => array( array('text' => '下に出るタイトル', 'href' => 'http://apps.facebook.com/auth_post_test/') ),
	));
} catch (FacebookApiException $e) {
	$error = "Error : something is wrong, please try again later.";
	exit();
}
?>
出力

f:id:ramyana:20101012234536p:image

いろいろできそうですね!


ちなみに私の URL はココですー

http://www.facebook.com/takako.kansai

hattori hirokazuhattori hirokazu 2010/12/27 12:01 いつも楽しみにブログ拝見しています。
takako.kansaiさんがいつも楽しみにしているブログってありますか??

blackcoffee11blackcoffee11 2011/01/05 21:25 面白いですね。

OYAJIOYAJI 2011/02/03 18:50 初めまして。ものっ凄い初心者質問で申し訳ないのですが、
index.php へのアプリケーションIDとシークレットキーの
入力・保存までは出来たのですけども
それを自分の所持しているレンタルサーバーなどに
アップすれば良いのでしょうか?
その後、アップしたサーバーのURLなどは、
Facebookの設定画面上のどの項目に入力すれば
良いのでしょうか?

ramyanaramyana 2011/02/20 11:57 >hattori hirokazu さん
ブログははてなブックマークにあがってるやつをくまなく読んでます!

>OYAJI さん
はい、サーバーにアップしてください。
キャンバスページ URL という項目に、そのレンタルサーバーの URL を入れれば動くかと思います!

sasakisasaki 2011/05/27 13:14 最新版のSDKでは getSession() がなくなってるみたいですね。
$session 関係スルーしたらうまくいきました。

doratchdoratch 2011/07/05 00:33 Facebookアプリ開発を始めようと思い立ったら、このページにたどり着きました。丁寧な解説感謝です!
getSessionがどこにあるかわからなくて悩みましたが、は旧版のSDKをDLしたら入ってたので、そちらを使いました。
今後、セッション管理のやりかたが変わっていくんでしょうかね。
今後もFacebookはいろいろとおもしろそうですね

regarsregars 2011/07/06 12:57 関係スルーってどうゆうことですか?

miomio 2011/11/08 21:44 消した昔のアカウントが登録されていて
削除をお願いしたいんですが
どうしたら良いですか?

ramyanaramyana 2011/11/09 14:08 > mio さん

ReTweeter! の件でしょうか?アカウント名をお伝えいただければ削除いたしますのでご連絡いただけますか? unicco.197904011734[at]gmail[dot]com

コマッタコマッタ 2012/01/18 14:04 こんにちは。分かりやすい記事有難うございます。
質問なのですが、同じことをcanvas内(iframe内?)で表示するにはどのようにすればよいのでしょうか?教えていただけると助かります。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証