Facebookアプリ開発

こんにちは!

今回は僕がFacebookのタブページを制作するときに何個か気をつけていることがあるので記事にしておこうと思います。 誰かの役に立つことを信じて。

ちなみにタブページっていうのは昔の記事で言及しているもののことを指しています。

Facebookタブページを制作しているときに気をつけていること

そこまで多くないし普通にページ制作してれば大丈夫なのですが、Facebookタブページ内では以下のことに気をつけながら制作しています。

  • widthは810px
    810pxより大きく作ってしまうと、ページにスクロールバーが出てしまうのでここは気をつけて作っておいたほうがいいです。

  • Facebook JavaScript SDKを読み込む
    Facebookタブページを作る際、Facebook JavaScript SDKが準備されているのでそれを読み込みましょう。 具体的には以下のコードになります。


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/rollover.js"></script>
    <script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
    <script language="JavaScript">
    FB.init({
            appId: [アプリID], 
            status: true,
            cookie: true,
            xfbml: true
    });

    window.fbAsyncInit = function() {
        FB.Canvas.setAutoGrow();
    }
</script>
<title></title>
</head>
<body>
</body>
<div id="fb-root"></div>
<script>
    FB.Canvas.setAutoGrow({ width: 851, height: 1400 });
</script>
</body>
</html>
Read more

こんにちは!

普段からFacebookのAPIを叩いたりしているのですが、アクセストークンの取得の方法をなんとなくまとめる機会があったので、このブログでも軽くまとめていこうかなと思います。

そもそもアクセストークンって?

アクセストークンとは、APIを叩くために必要な鍵みたいな存在です。 ちょっと重要な情報(非公開にしている投稿や画像、個人情報など)をAPI経由で取得したい!と思ったとき、その情報を取得しても構わない人にアクセストークンを渡すことによってデータへのアクセスを許可する役割があります。

とりあえず重要な情報にアクセスしようとするとアクセストークンが必要になるよ!ってことだけ覚えておくといいかもしれません。

今回取得するFacebookのアクセストークンは自分自身へのアクセストークンを取得する方法なので、例えば自分の持っているFacebookページの投稿に対するインプレッションを記録したり、メッセージを自分だけのアプリ上で送信出来るようにしたり、そういうことをするときに必要になるアクセストークンを取得していきます。

それでは早速やっていきましょう。

Facebookアプリを作成する

まずはFacebookアプリを作成しましょう。 以下のURLにアクセスしてFacebookアプリを作っていきましょう。 Facebook Developers

赤枠の部分をクリックして必要事項を埋めてアプリ制作しましょう。

アプリIDとアプリのシークレットキーを取得出来ました!

あなたの持っている適当なドメインを登録しておかないといけないので登録しておきましょう。 「Add platform」からウェブを追加して「AppDomain」の部分と「サイトURL」の部分にドメインを追加します。

取得したい情報のスコープを持ったURLにアクセスする

アプリIDとシークレットキーを取得したら、自分がどの情報にアクセスしたいのかを以下のリファレンス内から探してきます。

Permissions

今回は自分の誕生日を取得してみようと思うので、user_birthday パーミッションを以下のURLに書きます。 [アプリID]の部分にはさきほど取得したものを、[URL]のとこには持っているドメインのURLを入れてください。

https://graph.facebook.com/oauth/authorize?client_id=[アプリID]&scope=user_birthday&redirect_uri=[URL]

上記のURLにアクセスするとよく見る以下のような画面が出てきます。

アクセストークンを取得する

以下のURLからアクセストークン一覧に飛ぶことが出来ます。 アクセストークン – Facebook Developers

その中からさきほど作ったアプリの名前を検索してみると、「User Token」の部分にランダムな英数字があると思います。 これが取得したいアクセストークンです!!

ちなみに横の「デバッグ」ボタンをクリックすると、そのアクセストークンがいつまで有効なのかや、どの情報にアクセス出来るのかの詳細を見ることが出来ます。

これでアクセストークン取得完了しました!!

実際に使えるかどうか試してみる

それではあなたのFacebookのページを開いてください。(https://www.facebook.com/[ユーザー名] のURLで表されるページ) そのURLの「www」の部分を「graph」に変えてアクセスしてみてください。

情報がJSONで返ってくると思います。この時点で、誕生日情報は、設定で公開していない限り見えないはずです。

そのURLのあとにさきほど取得したアクセストークンをくっつけてアクセスしてみましょう。 URLとしては以下のような形になります。

https://graph.facebook.com/[ユーザー名]?acecss_token=[取得したアクセストークン]

どうでしょうか! さきほどよりたくさんの情報が取得出来たのではないでしょうか。 これでアクセストークンが有効であることが確認出来たと思います!!

最後に

アクセストークンの横にあった「デバッグ」ボタンを押すとわかると思うのですが、アクセストークンには有効期限があります。 おおよそ1時間だと思うのですが、1時間だけのアクセストークンだと意味のないときもあります。 その場合はアクセストークンの期間延長をするための方法があるのですがそれは昔書いた記事を参照してください。

快適なFacebookAPIライフを!!

参考本

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)
多田 智史 岩崎 雅也
翔泳社
売り上げランキング: 343,343
Read more

みなさんあけましておめでとうございます! 2ヶ月くらい更新してなかったですが、ブログは書き続けてたほうがいいなぁと思っていたので新年からまた書き始めます!

それでは早速書いていきましょう。

最近Composerを使ってCakePHPでFacebookログインを実装したので、そこまでの流れをまとめておこうと思います。

Composerで必要なものをインストールする

composer.jsonから作っていきましょう。

CakePHPFacebook PHP SDKをインストールするので以下のように書けばインストール出来ます。

{
    "name": "facebook-login",
    "repositories": [
        {
            "type": "pear",
            "url": "http://pear.cakephp.org"
        }
    ],
    "require": {
        "pear-cakephp/cakephp": "2.4.4",
        "facebook/php-sdk": "dev-master"
    }
}

composer.pharをダウンロードしてパッケージをインストールしていきます。

$ curl -s http://getcomposer.org/installer | php
$ php composer.phar install

Bakeでプロジェクトを作成します。

$ vendor/bin/cake bake project $PWD --empty

これでブラウザからアクセスすると、いつもの緑画面が出てくると思います。

ここまでで大方終了しましたが忘れちゃいけないので CAKE_CORE_INCLUDE_PATH を書き換えること。

3箇所書き換えていきましょう。

webroot/index.php

define('CAKE_CORE_INCLUDE_PATH', ROOT . DS . APP_DIR . DS . 'vendor' . DS . 'pear-pear.cakephp.org' . DS . 'CakePHP');

webroot/test.php

define('CAKE_CORE_INCLUDE_PATH', ROOT . DS . APP_DIR . DS . 'vendor' . DS . 'pear-pear.cakephp.org' . DS . 'CakePHP');

Console/cake.php

$ds = DIRECTORY_SEPARATOR;
$dispatcher = 'Cake' . $ds . 'Console' . $ds . 'ShellDispatcher.php';

if (function_exists('ini_set')) {
    $root = dirname(dirname(__FILE__));

    // the following line differs from its sibling
    // /app/Console/cake.php
    ini_set('include_path', $root . $ds . 'vendor' . $ds . 'pear-pear.cakephp.org' . $ds . 'CakePHP' . PATH_SEPARATOR . ini_get('include_path'));
}

if (!include $dispatcher) {
    trigger_error('Could not locate CakePHP core files.', E_USER_ERROR);
}
unset($paths, $path, $dispatcher, $root, $ds);

return ShellDispatcher::run($argv);

最後にデータベースをbakeして終了っと!

$ Console/cake bake db_config

実装前の準備をする(Facebookアプリ作成、SDKの読み込み、データベース等)

次にFacebookアプリやFacebookSDKの読み込み、データベースの作成等を行っていきます。

以下のURLに飛び、Facebookアプリを「新規作成」し、アプリIDとシークレットをゲットしておいてください!

次にcomposerでいれたFacebook PHP SDKを読み込んでいきます。 PagesController.php で読み込んでいきましょう。

PagesController.php

<?php App::uses('AppController', 'Controller');
App::import('vendor', 'facebook/php-sdk/src/facebook');

最後にデータベースです。 今回は Admin テーブルを作成しその中にログインに必要な情報を事前に入れておこうと思います。 実際に試す場合は自分のFacebookIDを入れておいてください。

CREATE TABLE IF NOT EXISTS `admin` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `facebook_id` varchar(128) NOT NULL,
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

INSERT INTO `admin_user` (`id`, `facebook_id`, `created`, `modified`) VALUES
(1, '自分のFacebookID', NOW(), NOW());

最後の最後に! routes.php 内でPagesControllerのルーティングが定められているのでそれをコメントアウトしておきます。

    // Router::connect('/pages/*', array('controller' => 'pages', 'action' => 'display'));

これで終了です。やっと本題にいきましょう!

Facebookログインを実装していく

さて、やっと本題です。 ログインの流れとしては、

  • ログインボタンクリック
  • Facebook側で認証をする
  • 認証後リダイレクト先でFacebookIDが取れ、データベース内にそのIDがあればログインを完了させマイページに飛ばす

こんな感じでやっていこうと思います。

一気にいきます。PagesController.phpにがばっと書いていきます。

PagesController.php

 [
            'authenticate' => [
                'Form' => [
                    'userModel' => 'Admin'
                ]
            ],
            // ログインページ
            'loginAction' => ['controller' => 'pages', 'action' => 'index'],
            // ログイン後リダイレクトページ
            'loginRedirect' => ['controller' => 'pages', 'action' => 'my'],
            // ログアウト後リダイレクト先
            'logoutRedirect' => ['controller' => 'pages', 'action' => 'index'],
            // エラーメッセージ
            'authError' => 'Admin Only'
        ]
    ];

    public function beforeFilter(){
        $this->facebook = new Facebook([
            'appId' => '取得したAppId',
            'secret' => '取得したAppSecret',
            'cookie' => true
        ]);
        $this->Auth->allow('index', 'login');
    }

    protected function _authFacebook(){
        $login_url = $this->facebook->getLoginUrl(['redirect_uri' => Router::fullBaseUrl() . Router::url(['controller'=>'pages', 'action'=>'login'])]);
        return $this->redirect($login_url);
    }

    public function login(){
        $this->autoRender = false;
        $fb_id = $this->facebook->getUser();
        $login_info = ClassRegistry::init('Admin')->find('first', ['conditions' => ['Admin.facebook_id' => $fb_id]]);
        if(isset($login_info)){
            if($this->Auth->login($login_info['Admin'])){
                return $this->redirect(['action' => 'my']);
            } else {
                return $this->redirect(['action' => 'index']);
            }
        } else {
            return $this->redirect(['action' => 'index']);
        }
    }

    public function logout(){
        $this->Auth->logout();
        return $this->redirect(['action' => 'index']);
    }

    public function index(){
        if($this->Auth->loggedIn()){
            return $this->redirect(['action' => 'my']);
        }
        if($this->request->is('post')){
            $this->_authFacebook();
        }
    }

    public function my(){

    }

}

わからなければ質問なり公式ドキュメントを参照してください!!!

Modelのフォルダ内に Admin.php を下記のような感じで作成します。

<?php App::uses('AppModel', 'Model');

class Admin extends AppModel {

    public $useTable = 'admin';

}

Viewは index.ctpmy.ctp を作ります。

index.ctp

Form->create('Admin', ['method' => 'post']);?>

Form->button('Facebookログイン');?>

my.ctp

マイページ

Html->link('ログアウト', ['controller'=>'pages', 'action'=>'logout']);?>

これでFacebookログインが実装できました!!

最後に

いかがでしたでしょうか。 なんとなくの流れは理解出来たかなぁと思います。 何かわからない点がありましたらコメントやTwitterで聞いていただければと思います!

CakePHP本が続々出ていますね。

Webアプリ開発を加速する CakePHP2定番レシピ119
長谷川 智希
秀和システム
売り上げランキング: 15,164
Read more

みなさんこんにちは。

FacebookのGraphAPIってやっぱ楽しいですね。 個人情報をここまで簡単に取れるAPIをいじれるのはとても楽しいですよ。

今回はPHPを使ってあるページにいいねが押してあるかどうかを判別する方法を紹介します。 簡単なことではありますが、2通りの方法を紹介します。 Continue reading GraphAPIを用いてページにいいねが押してあるか判別する方法

Read more

ついに今日から25日まで続くAdvent Calenderが始まりました。 CakePHP Advent Calender2012の1日目を担当させていただく、たがみ(@DAI199)です。

Cakeを使い始めて半年程度の新米ですが、僕の知識をみなさんに共有するために今回の記事を書きたいと思います。

CakePHPアドベントカレンダー2012本家 http://www.adventar.org/calendars/40 Twitterハッシュタグ #cakeadvent2012

普段はFacebookと連携したアプリを量産しているため、今回の記事では、CakePHPとFacebookを連携し、ちょっとしたアプリを作ってみたいと思います。 デモアプリはこちら

>>> 女の子の画像一覧を見てみる

Facebookログインの実装

それでは早速Facebookログインを実装していきましょう。 以下のURLからFacebookSDKをダウンロードします。 >>> https://github.com/facebook/facebook-php-sdk

それをインストールしたCakePHPのapp/Vendorフォルダに入れます。ここではフォルダ名は「facebook」へ変更しました。

次に「AppController.php」に以下のコードを書きます。ここでやっていることは、Facebookに接続することと、Facebookでログイン出来たことを確認するためにSessionに書き込むことです。

&lt;?php
App::uses('Controller', 'Controller');
class AppController extends Controller {
    public $facebook;
    public $helper = array('Html', 'Form', 'Session');

    function beforeFilter(){
        App::import('Vendor', 'facebook/src/facebook');
        $this-&gt;facebook = new Facebook( array(
                        'appId' =&gt; 'APPID',
                        'secret' =&gt; 'APPSECRET',
                        'cookie' =&gt; true 
                        ));

    }

    // Facebookで接続するときにOAuthを通す
    public function authFacebook() {
        $login_url = $this-&gt;facebook-&gt;getLoginUrl(array('scope' =&gt; 'email,publish_stream,user_birthday,user_education_history,user_likes'));
        $this-&gt;redirect($login_url);
    }

    public function connectFb(){
        $fb = $this-&gt;facebook-&gt;getUser();
        if(empty($fb)){
            $this-&gt;authFacebook();
        }
        $this-&gt;Session-&gt;write('Facebook.id', $fb);
    }
}

上記のコードのAPPID,APPSECRETの部分はFacebookアプリを作成していれてください。 Facebookアプリを作成するためには以下のURLから作成します。 >>> https://developers.facebook.com/

これでFacebookログインが実装出来ました。

Graph APIを叩く

初期画面でFacebookログインボタンを表示して、クリックするとdisplayのほうへリダイレクトされます。 以下コードになります。

【Controller】 FacebookController.php

&lt;?php
class FacebookController extends AppController {
    public function index(){
        if($this-&gt;request-&gt;is('post')){
            $this-&gt;redirect(array('action'=&gt;'display'));
        }
    }

    public function display(){
        // Facebookへ接続
        $this-&gt;connectFb();
        $fb = $this-&gt;facebook-&gt;getUser();

        // Friend List を取得
        try {
            $me = $this-&gt;facebook-&gt;api('/me');
            $friend_list = $this-&gt;facebook-&gt;api(&quot;{$fb}/friends?fields=gender&quot;);
        } catch (FacebookApiException $e){
            error_log($e);
        }
        $this-&gt;set(compact('fb'));
        $this-&gt;set(compact('me'));
        $this-&gt;set(compact('friend_list'));
    }
}

Viewのほうはこんな感じに書いてみました。

【View】 index.ctp

&lt;form action=&quot;&lt;?php echo $this-&gt;Html-&gt;url(array('action'=&gt;'index'));?&gt;&quot; method=&quot;post&quot;&gt;
    &lt;button&gt;Facebookログイン&lt;/button&gt;
&lt;/form&gt;

display.ctp

&lt;h1&gt;自分の顔&lt;/h1&gt;
&lt;img src=&quot;https://graph.facebook.com/&lt;?php echo $fb;?&gt;/picture?width=150&quot; alt=&quot;&quot; /&gt;

&lt;h2&gt;異性の顔((´^ω^))&lt;/h2&gt;
&lt;?php for($i=0; $i &lt; count($friend_list['data']); $i++):?&gt;
    &lt;?php if($me['gender'] != $friend_list['data'][$i]['gender']):?&gt;
        &lt;a href=&quot;https://www.facebook.com/&lt;?php echo $friend_list['data'][$i]['id'];?&gt;&quot;&gt;
            &lt;img src=&quot;https://graph.facebook.com/&lt;?php echo $friend_list['data'][$i]['id'];?&gt;/picture?width=100&amp;height=100&quot; alt=&quot;&quot; /&gt;
        &lt;/a&gt;
    &lt;?php endif;?&gt;
&lt;?php endfor;?&gt;

以上のコードによりGraphAPIを叩くことが出来ました。 GraphAPIについては、Facebookの公式ドキュメントを読むとよいです。

女の子一覧を見てうはうは

さて、それではログインしてみましょう。 自分の友達の女の子でもうはうはです。 あ、もちろん女性の方は男性が表示されます。 女性の方が女性を見たい場合は、Viewの部分をちょちょっといじると出来ますよ。

デモはこちら >>> 女の子一覧を見てうはうは

最後に

すごい簡単なアプリですが、Facebookを使ったアプリを作ったことがない人にとっては新鮮なのではないでしょうか。 これをもう少し改良すれば異性を解析するアプリを作ったり本格的なアプリも出来そうですね。

初めてのAdventCalenderで緊張していますが、わかりにくいこと、間違っているとこ、こうしたほうがいいよ!ってとこがあればぜひコメントを残してくださるとありがたいです。

CakePHP AdventCalender2012 2日目の担当は、@fukayatsuさんです。よろしくお願いします!!

Read more

FacebookのOffline_accessが廃止されてから、アクセストークンは最大2ヶ月までしか使えないようになりました。 色々調べた結果、アクセストークンのアクセス期間を最大で2ヶ月までのばす方法を見つけました。 そこでアクセストークンのまとめとして、PHPで今までのアクセストークンを自動で60日間に延長させるコードを書いてみます。

ただこのスクリプトは自分で発行したアクセストークンを使用しているため、他の人のアクセストークンの場合うまくいかない可能性があります。

ご参考程度にお願いします。

それでははじめましょう

アクセストークンの取得

Facebookのアクセストークンには、ユーザーに紐付けられたアクセストークンと、Facebookのアプリに紐付けられたアクセストークンがあります。 Facebookのアプリを1つでも作ったことがある人であれば以下のURLからアプリのアクセストークン、自分のアクセストークンを確認することが出来ます。

>> Access Token Tool

どれでもよいので1つ自分のアカウントに紐付けられたアクセストークンを取得してみましょう。 そして右にある「Debug」というボタンを押してみてください。

Debugger Toolを使えばアクセストークンがいつまで有効かを確認することが出来ます。 確認してみましょう。

「in about an hour」と書いてある通り、あと大体1時間くらいしかこのアクセストークンは有効ではありません。 これを60日間、つまり2ヶ月間有効にしてみようと思います。

60日間に延長するためには?

アクセストークンを延長するためには以下のコードを使うことで60日間に延長することが出来ます。 APP_ID,APP_SECRET,ACCESS_TOKENの部分はそれぞれのアプリに合わせてください。

https://graph.facebook.com/oauth/access_token?client_id=APP_ID&client_secret=APP_SECRET&grant_type=fb_exchange_token&fb_exchange_token=ACCESS_TOKEN

このURLを使用すればアクセストークンを60日間まで延長することが出来ます。 それでは早速ですがコードを見てみましょう。

完成コード

それでは早速ですがコードを書いてみます。 もちろん僕が書くコードはPHPですw

&lt;?php
// それぞれの環境に合わせる
define('APP_ID', アプリID);
define('APP_SECRET', アプリシークレット);

//事前に取得しておいたアクセストークン
$accessToken = &quot;取得したアクセストークン&quot;;

$accessUrl = &quot;https://graph.facebook.com/oauth/access_token?client_id=&quot;.APP_ID.&quot;&amp;client_secret=&quot;.APP_SECRET.&quot;&amp;grant_type=fb_exchange_token&amp;fb_exchange_token={$accessToken}&quot;;
$validTokenData = file_get_contents($accessUrl);
$validToken = preg_replace('/(access_token=)(.*)(&amp;expires=.*)/i', '$2', $validTokenData);

print_r($validToken);

本当に簡単なコードですが、これで出力されたアクセストークンをDebugger Toolで確認してみると60日間に延長されています。

上記の画像の赤枠を確認してみると「in about 2 months」と書いてあります。 つまりアクセストークンを60日間に延長することが出来ました!

最後に

いかがでしたでしょうか。 この方法で僕は1つのアクセストークンを使いまわしています。 ただこの方法でやり始めてまだ10日間くらいしかたっていないので60日たったあと、どうなるかはちょっとわかりませんw もしうまくいかない場合はこの記事をアップデートしようと思います。 もっといい方法があるよ!っていう人は @DAI199 までか以下のコメント欄に書き込んでいただけると泣いて喜びます(´;ω;`)

この記事を読んでいるあなたにおすすめ!

僕がFacebookアプリを最初に作るときに参考にした本。始めは何か書籍で始めるのがよいのかもしれません。

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)
多田 智史 岩崎 雅也
翔泳社
売り上げランキング: 134,532
Read more

2012年10月7日 日曜日。 学生6人を集めた小さい勉強会ではありましたが、アプリ系では初めて講師をさせていただきました。 初の試みでどうなることか心配でしたが、来てくれたみなさんがとても温かく見守っていただいたおかげでなんとか成功させることが出来ました。 今日の記事は勉強会で行ったことをまとめていきたいと思います。

今回は簡単なサンプルアプリを作成しました。

アジェンダは以下になります。

  • なぜ今Facebookアプリを作るのか
  • 有名なFacebookアプリって何?
  • 今日作るものの紹介!
  • 事前準備をしよう
  • 実際に作っていこう!

また、当日使ったサンプルアプリのソースは以下のgithubに置いてあります。

>> サンプルアプリ – github

1, なぜ今Facebookアプリを作るのか

Facebookは最近IPOを行い、圧倒的な資金力と注目度をほこっているからです。 また資金力・注目度があるおかげで超優秀人材を採用することが出来、また大量のエンジニアを抱え込んでいるため、超高速開発を行なっていることがあげられます。 やはりお金があり注目されているアプリケーションを作成出来るとなると、エンジニアとしては心躍る人も多いのではないでしょうか。

また、日本での訪問者も軒並み右肩上がりで上昇しています。 引用:2012年8月ニールセン調査

日本ではFacebookは流行らないという言説もありましたが、それも過去になりました。 今は流行るか流行らないかを述べるよりもFacebookをどう使っていくのかという点にはなしがうつっていると思われます。 日本での注目度の高さ・ユーザー数の多さもこのグラフを見ればわかると思います。

また、FacebookはPCからだけ使われるのではありません。 以下の図を見てください。

Facebookはモバイルからも多くのユーザーが使っています。 その数約5億人! 5億人のモバイルユーザーが使っているプラットフォームはFacebookだけではないでしょうか。

また、今まではPCからしかFacebookアプリを使用することが出来ませんでした。 ただ、最近IPOをしてからFacebookはモバイルにも注力しており、現在ではモバイルからでもFacebookアプリを使用することが出来るようになっています。

上記のことからFacebookアプリは iPhoneやAndroidのようにある環境に依存するのではなく、 PC・モバイル共通のプラットフォームになる! 可能性があります。だからFacebookアプリを作成するのです。

2, 有名なFacebookアプリって何?

有名なFacebookアプリとして、

Omiai

様々なメディアで取り上げられ、サービス開始1ヶ月で会員1万人突破。今話題のサービス。

FBログ

サービス開始直後から大人気のサービス。Facebookのログを様々な媒体で保存したい人に大人気。

3, 今日作るものを紹介!

githubで見てみてください!

>> サンプルアプリ – github

4, 事前準備をしよう

デベロッパー登録を行いました。 デベロッパー登録で参考になる記事はこちら

>> Facebookデベロッパーに登録する際、携帯アドレスでアカウント認証する方法

>> facebookでデベロッパー登録する時の注意点!

5, 実際に作っていこう!

みんなでわいわい助けあいながら作っていきました。 便利なドキュメント・日本語文献などはこちらになります。

>> Facebook開発者向けドキュメントの日本語訳とTips

>> Facebook Developers

最後に

今回勉強会をやって本当によかったです。 同年代のエンジニアの方とも仲良くなれましたし、プログラミングのことについても話すことが出来てとても嬉しかったです。 また定期的に勉強会はやっていくつもりです! もしよろしければ僕のやる勉強会に来てくださいね! 参加してくださったみなさん、ありがとうございました!!

Read more

この記事を見ているあなたはFacebookアプリを作成していますか?

現在Facebookアプリを作成している @DAI199 ですが、いきなり以下のようなエラーが出ました。

(#4) Application request limit reached

あーなんか上限に達したんだなってことはわかったんですが、自分自身そこまでAPIをコールしていなかったので意味が分かりませんでした。

FacebookStackOverFlowで検索してみたところ以下の記事が有力です。

Facebook Application Request limit reached

この記事によると、

There is a limit, but it’s pretty high, it should be difficult to hit unless they’re using the same access tokens for all calls and not caching results, etc. It’s 600 calls per 600 seconds per access token. GraphAPIをコールする回数には制限はあるが、その制限はとても高く、全てのコールを同じアクセストークンを使い、更に結果をキャッシュせずに使い続けない限り上限に達することは難しいだろう。1つのアクセストークン毎に600秒間で600コール出来る。

つまり僕はめちゃくちゃアクセスしてたってことになります。

結局原因としては、サーバー上でまわしてたcronの中に、Facebookアプリで使用していたアプリから作り出されたアクセストークンを使用していました。 このアクセストークンを別のアプリから作ったアクセストークンに変えたところ、今のところエラー発生していません。

FacebookAPIを叩ける回数は、アクセストークンに依存するんですね。まぁそりゃそうか。

もし同じようにつまずいている人がいれば参考にしてみてください。

Read more

今日はライトな記事です。 Facebookに既に十分詳しい方は別の記事やブラウザをそっと閉じることをおすすめします。

OpenGraphAPIを使用してFacebookページの情報を取得する際に必要になるのがIDです。 OpenGraphAPIって何?って人は、Facebookから色んな情報を取得するための仲介役だと思っておけばOKです。 Facebookの全てのものには固有のIDが振られていて、そのIDを取得してOpenGraphAPIというものにつっこむとそれに関する色んな情報が取れるってわけです。

今回はFacebookページの固有なIDを取得する方法を紹介します。 今は必要なくてもいつか必要になるかもしれないしとても簡単なので読んでおいて損はないですよ!

FacebookページのIDを取得する方法、その方法とは、

「www.faecbook.com/◯◯」の「www」を「graph」に変える

ただこれだけです。

そうすると意味のわからない文字列が大量に画面に出たと思います。 慣れていない人は困惑するかもしれません。普段こういう画面をみないと思うので。 ただこの意味のわからない文字列を変換すると様々な情報になる、ということだけ覚えておきましょう。

そしてこの文字列の中に「id」と書いてある部分があるので探しましょう。 そう、ここです!

実際に見てみるのが一番わかりやすいですね。 例えば、次のURLにアクセスして確認してみてください。

https://graph.facebook.com/cocacolapark

idを見つけられましたか?そのIDと上の画像のIDが一致していれば正解です。

それではこのURLの「graph」の部分を「www」に戻してみましょう。

https://www.facebook.com/cocacolapark

実はコカ・コーラのFacebookページだったんですね。なるほど〜

今回はFacebookページの固有IDを取得する方法を紹介しました。 Facebookは開発者になると結構面白いことが多いですよ。 仕様変更が多いのが傷ですが、それにしっかりついていけば色々な情報を取得することが出来るので作れるものも広がります。

暇なひとはぜひいじってみては?

Read more

facebook logo

FacebookのAPIを使えば簡単にプロフィール写真を取得することが出来ます。

https://graph.facebook.com/[id]/picture

上記の[id]部分に各種IDを挿入すれば写真を取得することが出来ます。
写真は様々なオブジェクトから取得することが出来ます。

例)
・ユーザー: https://graph.facebook.com/daiki.tagami/picture
・イベント: https://graph.facebook.com/331218348435/picture
・グループ: https://graph.facebook.com/69048030774/picture
・Facebookページ: https://graph.facebook.com/DoloresPark/picture
・アプリ: https://graph.facebook.com/2318966938/picture
・アルバム: https://graph.facebook.com/platform/picture

また、それぞれの写真の大きさを指定して取得することも出来ます。

パラメーターにtypeを指定することで4種類の画像を取得出来ます。

デフォルト(50×50)
https://graph.facebook.com/100002114799115/picture


スクエア(50×50の正方形)
https://graph.facebook.com/100002114799115/picture?type=square


スモール(横50px、縦は比率を保った高さ)
https://graph.facebook.com/100002114799115/picture?type=small


ノーマル(横100px、縦は比率を保った高さ)
https://graph.facebook.com/100002114799115/picture?type=normal


ラージ(横200px、縦は比率を保った高さ)
https://graph.facebook.com/100002114799115/picture?type=large

参考資料

Graph Api Picture – Facebook公式ドキュメント
fb.developers+ – 各種情報の取得
Graph Api – Facebook開発者向けドキュメントの日本語訳とTips

Read more