Facebook - ジニーフレーム - プロジェクト管理ツール

teruchiです。

今日はFacebookのAPIで遊びましょう。

今回はCakePHPを使ってサクっと作ってしまおうと思います。

ポイントは、

・CakePHPを使う
・FacebookのPHP sdkを使う
・Facebookアプリの登録、設定

のあたりでしょうか。

完成形はこちら
http://genieframelamp.com/

（URLは今後変更になると思います）

「Log In」をクリックして、Facebookでアプリの許可をすると
リストのページへ飛びます。
（自動で飛ばない場合は再読み込みしてください）

検証環境はこんな感じ

・Mac OS X Lion (10.7.2)
・Apache 2.2.21 (MacPorts)
・PHP 5.3.8 (MacPorts)
（こちらは無くても動くはず）
・MySQL 5.1.57 (MacPorts)

さて、どんどん行きましょう。

PHPのSDKがFacebookから出てますので、それを使います。

ドキュメントはこちら
https://developers.facebook.com/docs/reference/php/

sdkのダウンロードはこちら
https://github.com/facebook/php-sdk

ダウンロードして解凍したフォルダの中にある src フォルダを、
facebook とリネームして、app/vendors フォルダにコピーします。

あとはCakePHPでControllerとViewを作成します。

ControllerはRankingControllerとしておきましょう。

<?php
class RankingController extends AppController {
	var $uses = array();
	
	function index() {
		App::import('Vendor', 'facebook');

		$facebook = new Facebook(array(
			'appId'  => '261137913930180',
			'secret' => 'df6442de267eb23f2d8aa0a26a061544',
		));
		
		try {
			if($facebook->api('/me')) {
				$this->redirect(array('action' => 'view'));
			}
		} catch(FacebookApiException $e) {
		}
		
		$this->set(compact('facebook'));
	}
	
	function view($page=0) {
		App::import('Vendor', 'facebook');

		$facebook = new Facebook(array(
			'appId'  => '261137913930180',
			'secret' => 'df6442de267eb23f2d8aa0a26a061544',
		));

		if(!($facebook->getUser())) {
			$this->redirect(array('action' => 'index'));
		}

		try {
			$me = $facebook->api('/me');
			
			$offset = $page ? $page * 20 : 0;
			
			$likes = $facebook->api('/me/likes?limit=20&offset='.$offset.'&fields=id,name,picture,link,likes,category,website');
		} catch(FacebookApiException $e) {
			$this->redirect(array('action' => 'index'));
		}
		
		$this->set(compact('page', 'me', 'likes'));
	}
}
?>

ここでポイントはviewアクションでFacebook::api()を叩いてるところ。

ドキュメントをみてもなかなか見つからないのですが、
こことか
http://developers.facebook.com/docs/reference/php/facebook-api/

ここ
http://developers.facebook.com/docs/reference/api/

のあたりを読み込んで、いろいろ試してみたらこんな使い方が出来ることが判明。

あとはViewです

まずindex.ctp

<div id="fb-root"></div>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '<?php echo $facebook->getAppId(); ?>', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });

	FB.Event.subscribe('auth.login', function() {
		window.location.reload();
	});
  };

  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

<fb:login-button scope="user_likes"></fb:login-button>

FacebookのJavascript APIを使って、初期化とログイン後にリロードするように設定しています。

最後に一覧用のView。view.ctp

<h2>Facebookでいいね！したリスト</h2>

<h3>me</h3>

<p>名前：<?= $me['name'] ?></p>

<br>

<h3>Likes</h3>

<table>
<tr>
<th>category</th>
<th>name</th>
<th>image</th>
<th>Facebook Page</th>
<th>url</th>
</tr>
<? foreach($likes['data'] as $data) : ?>
<tr>
<td><?= $data['category'] ?></td>
<td><?= $data['name'] ?></td>
<td><img src="<?= $data['picture'] ?>"></td>
<td><?= $data['link'] ?></td>
<td><?= @$data['website'] ?></td>
</tr>
<? endforeach; ?>
</table>

<? if($page > 0) : ?>
<?= $this->Html->link('前の20件', array($page-1)) ?> | 
<? endif; ?>
<?= $this->Html->link('次の20件', array($page+1)) ?>

最大件数とかを取ってくる方法が分からなかったので、
固定で20件づつ表示してます。

今日はここまで

Top