目次

リンク集

開発ページ

SDK ダウンロード

公式のページを日本語訳しているサイト

参考サイト

テストユーザーの作成方法は参考になるかも

Facebook ページの作成

以下のリンクからガシガシ進んで行くだけ!

https://www.facebook.com/pages/create.php

Facebook 開発登録

http://www.facebook.com/developers/

Facebook for Websites

Facebook 開発登録

開発ページに移動

まずはコチラにアクセス

http://www.facebook.com/developers/

作成ボタンをクリック

website_regist_1.png が画面の右上にあるのでクリック

アプリケーションの初期設定

website_regist_2.png

項目1 : App Name : アプリケーション名

[原文]

The name of the app, using no more than 32 characters and no less than 3.Please make sure that your app name does not violate the trademark or other rights of a third paty.Otherwise, we may be forced to remove your app.

[意訳]

3 - 32文字で入力して下さい.商標または第三者を侵害する名前は使用できません.守れない場合は削除される可能性があります.

項目2 : App Namespace :

[原文]

The app namespace is used for defining custom Open Graph actions and objects (e.g., namespace:action) and for the URL for Apps on Facebook (e.g., http://apps.facebook.com/namespace)

項目3 : Web Hosting :

[原文]

"Yes, I would like free web hosting provided by Heroku"

Webspace created with one of our hosting parthers for your app

セキュリティチェック

画面に表示されている文字を入力して下さい

website_regist_3.png

Facebook アプリの設定

【App ID】と【App Secret】のメモ

画面の上部に表示されている【App ID】と【App Secret】をメモしておく事!

もし、アプリ登録後に移動してしまった場合は左のメニューから[設定>基本設定]へ移動してアプリの設定画面を開く

タブの選択

【Facebook上のアプリ】と【ページタブ】を選択して下さい

website_setting_1.png

必要事項の入力

赤文字は必須項目

【Facebook上のアプリ】

キャンバスURL : Facebookアプリのデータの設置予定のURL(ファイルではなくフォルダを指定する事!)

例) http://batako.net/facebook/

セキュリティで保護されたキャンバスのURL : 上記のSSL対応のURL(ファイルではなくフォルダを指定する事!)

例) https://batako.net/facebook/

キャンバスの幅 : 作成するページに合わせて適宜変更

キャンバスの高さ : 作成するページに合わせて適宜変更

【ページタブ】

ページタブ名 : 表示されるアプリの名前

Page Tab URL : 表示させるファイルのURL

例) http://batako.net/facebook/index.php

Secure Page Tab URL : 表示させるファイルのSSL対応のURL

例) https://batako.net/facebook/index.php

Page Tab Edit URL :

ページタブの画像 : 適宜アップロード

Page Tab Width :

保存して終了

website_setting_2.png をクリックして保存

エラーを吐かず登録できればOK

サーバー側の設定

SSL 設定

Facebookアプリで自分のサーバーデータを表示させるには サーバーが SSL に対応している必要がある

CentOS に関しては コチラ を参照

ただし、サーバー自身が発行するタイプのSSLの場合、セキュリティの問題があり正常に表示されない事があるので注意!

他のOSに関して Google先生 に聞いて下さい

表示ファイルの作成

PHP または JavaScript のSDKを用いた開発ベースの作り方

PHP SDK の取得

Facebook は各プラットフォームに向けのSDKを用意されています

[JavaScript] [PHP] [iOS 3.0] [Android] に 対応

SDKs - Facebook開発者

今回はPHPを使用して作成していきます

PHP用のSDKは以下からダウンロードできる

facebook/facebook-php-sdk · GitHub

今回は表示させるだけなので以下の証明書ファイルだけ使用します

facebook-php-sdk / src / fb_ca_chain_bundle.crt

ファイル構成

ファイル構成は以下のようになります

作成しなければいけないファイルは「index.php」「index.html」「facebook.js」の3つです

アプリを登録した際のフォルダー
│  index.php
│  fb_ca_chain_bundle.crt
└ html
  │  index.html
  └js
   └facebook.js

ファイルの作成

index.php

<?php
	ini_set("display_errors","Off");
	echo "<meta charset='UTF-8'>";
	echo "<script>document.location.href='./html/index.html';</script>";
?>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ページのタイトル</title>
		<script src="facebook.js"></script> 
	</head>
	<body>
		<!-- 表示させたい内容 -->
	</body>
</html>

facebook.js

App ID/API Key は アプリ作成の際にメモした App ID を入力して下さい

var myappId = 'App ID/API Key';

window.fbAsyncInit = function() {
	FB.init({appId: myappId , status: true, cookie: true, xfbml: true, oauth : true});
	FB.Canvas.setAutoGrow();
};
(function() {
	var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
	document.getElementById('fb-root').appendChild(e);
}());

FacebookページにFacebookアプリを追加

登録した対象の Facebookページ の作成

もしFacebookページを登録してない場合は Facebook ページの作成 を参照

アプリ追加用のURLに移動

下記のURLの[App ID]を作成したApp IDに変更してアクセス

http://www.facebook.com/dialog/pagetab?app_id=[App ID]&next=https://www.facebook.com

ページタブに追加

表示させたい Facebookページ を選択して website_add_app_2.png をクリック

website_add_app_1.png

Facebookページのタブを確認

タブを確認すると【ページタブの画像】と【ページタブ名】が表示されている

今回は Sample を作成したので表示されているのが確認できる

website_add_app_3.png

対象をクリックする事でページを確認できる

動作確認

Facebookページのタブをクリックすると作成したものがFacebook上で表示されます

注意点としてサーバーで証明書を発行するタイプのSSLだとセキュリティ上の問題でブラウザによっては表示ができない

FireFox?だと以下のように表示される

website_verify_alert.png

Facebook SDK for JavaScript

https://developers.facebook.com/docs/reference/javascript/

初期設定

BODYタグ内の先頭に以下のコードを設置

FB.init の設定内容は下のリンク先を参照

FB.init : Facebook開発者向けドキュメントの日本語訳とTips

<script>
	// SDKスクリプトとSDKコンテナの生成
	(function(d, sId, cId, appId){
		// SDKコンテナがなければ生成
		if(!d.getElementById(cId)){
			var e=d.createElement('div');
			e.id=cId;
		}
		// SDKスクリプトが存在すれば終了
		if(d.getElementById(sId)) {return;}
		// SDKスクリプト生成
		js=d.createElement('script');
		js.id = sId;
		js.async = true;
		js.src='//connect.facebook.net/ja_JP/all.js#xfbml=1&appId='+appId;
		d.getElementsByTagName('body')[0].appendChild(js);
	}(document, 'facebook-jssdk', 'fb-root', 'アプリケーションID'));
	// 初期設定
	window.fbAsyncInit = function() {
		FB.init({ 
			appId   : 'アプリケーションID',
			status  : true, 
			cookie  : true,
			xfbml   : true,
			logging : true
		});
		// キャンパスサイズの自動調節
		FB.Canvas.setAutoGrow();
		// キャンバスサイズの指定
		//FB.Canvas.setSize({ width : '横幅', height : '縦幅' });
	}
</script>

Facebook SDK for PHP

https://developers.facebook.com/docs/reference/php/

初期設定

SDK for PHP のダウンロード

以下のリンクからSDKをダウンロード

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

必須ファイル

facebook-php-sdk / src
・facebook.php
・base_facebook.php
・fb_ca_chain_bundle.crt

サンプルがついてるから参考にするといいかも

ソース

App ID と App Secret は作成したアプリのものに書き換える事!

<?php

// facebook sdk for php の読み込み
require_once("facebook.php");

// 設定値
$config = array(
	$config = array(
	// App ID
	'appId' => 'App ID',
	// App Secret
	'secret' => 'App Secret',
	// Cookie
	'cookie' => true,
	// optional
	//'fileUpload' => false,
);
$facebook = new Facebook($config);

?>

データの取得/登録方法

API関数を用いた Graph API Methods / FQL Queries / (DEPRECATED) REST APIs各関数を用いる方法がある

Graph API Methods

$ret = $facebook->api($path, $method, $params);
名前説明
pathThe Graph API path for the request, e.g. "/me" for the logged in user's profile.

$path は 対象のオブジェクトを指定する.

https://developers.facebook.com/docs/reference/api/

例)
フィード取得 => "/me/feed"
フレンド取得 => "/me/friends"
いいね!取得 => "/me/likes"

"/me" は接続しているユーザをさすが,ユーザーIDを指定する事でそのユーザー情報を取得できる.
method(optional) Specify the HTTP method for this request: 'GET', 'POST', or 'DELETE'.

'DELETE' を使用する場合は path には 対象のオブジェクトのIDをセットする.

例)

/記事のID

/記事のID/likes # このようにする事でいいね!の削除も可能
params(optional) Parameters specific to the particular Graph API method you are calling.Passed in as an associative array of 'name' => 'value' pairs.

params は Graph API method の path に依存する

https://developers.facebook.com/docs/reference/api/

例) フレンド や いいね! の取得の場合

例)

$path = 'パス';

$method = 'POST';

$params array(
  :オプション1 => 値1,
  :オプション2 => 値1,
);

$facebook->api($path, $method, $params);

上記の設定で実行すると下記のURLにPOST/GETで送信

https://graph.facebook.com/パス?オプション1=値1&オプション2=値2

サーバーが返したJSONのデータを取得し連想配列に変換した値を戻り値としている

JSON

{
   "name1": "value1",
   "name2": "value2",
}

戻り値

array(
   [name1] => "value1",
   [name2] => "value2",
);

SDK for javascript も仕組みは同じ

どこに何を送信したら何が得られるかは下記のURLに詳しく書いてる

https://developers.facebook.com/docs/reference/api/

FQL Queries

Facebook には SQL のような FQL が用意されている

$ret = $facebook->api( array(
                        'method' => 'fql.query',
                        'query' => 'SELECT . . . ',
                    ));

(DEPRECATED) REST APIs

$ret = $facebook->api( array(
                        'method' => 'link.getStats',
                        'urls' => 'facebook.com,developers.facebook.com',
                    ));

関数

$ret = $facebook->関数();

Graph API Methods のパス一覧

MethodDescriptionArguments
/PROFILE_ID/feedPublish a new post on the given profile's feed/wallmessage, picture, link, name, caption, description, source, place, tags
/OBJECT_ID/commentsComment on the given object (if it has a /comments connection)message
/OBJECT_ID/likesLike the given object (if it has a /likes connection)none
/PROFILE_ID/notesPublish a note on the given profilemessage, subject
/PROFILE_ID/linksPublish a link on the given profilelink, message, picture, name, caption, description
/PROFILE_ID/eventsCreate an eventname, start_time, end_time
/EVENT_ID/attendingRSVP "attending" to the given eventnone
/EVENT_ID/maybeRSVP "maybe" to the given eventnone
/EVENT_ID/declinedRSVP "declined" to the given eventnone
/PROFILE_ID/albumsCreate an albumname, message
/ALBUM_ID/photosUpload a photo to an albummessage, source, place (multipart/form-data)
/PROFILE_ID/checkinsCreate a checkin at a location represented by a Pagecoordinates, place, message, tags

オブジェクト一覧

セッション情報

$_SESSION

Array
(
    [fb_(App ID)_state] => e77f006b0db02d2657af6f8376a88345
    [fb_(App ID)_user_id] => ログインユーザのID
    [fb_(App ID)_access_token] => アクセストークン
)

Signed Request

詳しい説明は下記のリンクに書いてある

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

必須条件

初期設定時にクッキーを有効にする必要がある

$config = array(
	$config = array(
	// App ID
	'appId' => 'App ID',
	// App Secret
	'secret' => 'App Secret',
	// Cookie
	'cookie' => true,
);
$facebook = new Facebook($config);

取得方法

$facebook->getSignedRequest()

戻り値の構造

Array
(
    [algorithm] => HMAC-SHA256
    [expires] => 1347613200
    [issued_at] => 1347607161
    [oauth_token] => アクセストークン
    [page] => Array
        (
            [id] => タブページID
            [liked] => 接続しているユーザがいいね!をしているかどうか( いいね! : 1 / なし : ブランク)
            [admin] => 接続しているユーザがページの管理者かどうか ( いいね! : 1 / なし : ブランク)
        )

    [user] => Array
        (
            [country] => jp
            [locale] => ja_JP
            [age] => Array
                (
                    [min] => 年齢
                )

        )

    [user_id] => ユーザーID
)

プロフィール取得

取得方法

$facebook->api('/オブジェクト名 または オブジェクトID')

例)

ユーザーIDだけではなくページIDやフィードIDなども対象となる

"/me"
"/13484596932"

戻り値の構造

対象のユーザが情報範囲を友達までとしている場合

Array
(
     [id] => ユーザーID           (例)827458475083741
     [name] => フルネーム         (例)Tarou Yamada
     [first_name] => 名前         (例)Tarou
     [last_name] => 名字          (例)Yamada
     [link] => ユーザーアクセスURL(例)http://www.facebook.com/ユーザー名
     [username] => ユーザー名     (例)tarou.yamada.83749602
     [quotes] => 好きな言葉       (例)現実を見ろ!俺たちには仮想現実(バーチャル)しかないんだぞ!
     [gender] => 性別             (例)male または female
     [email] => メールアドレス    (例)tarou.yamada@xxx.co.jp
     [timezone] => 9
     [locale] => ja_JP
     [updated_time] => 更新日     (例)2012-09-11T21:40:42+0000
)

友達の取得

取得方法

オプション

$params = array(
   // 取得数 : default => 5000
   :limit => 5000,
   // 取得開始位置 (0-????)
   :offset => 0,
);

取得

$facebook->api('/ユーザーID/friends', $params);

戻り値の構造

1度に取得できる数が限られているので previous と next から再取得すればOK

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [name] => Tarou Tanaka
                    [id] => 3485028437529384
                )

        )

    [paging] => Array
        (
            [previous] => https://graph.facebook.com/ユーザーID/friends?limit&offset=0&__after_id=100001498851811
            [next] => https://graph.facebook.com/ユーザーID/friends?limit&offset=0&__after_id=100001498851811
        )

)

例)

"/me"
"/13484596932"

Facebook SDK 3.0 for iOS Reference

https://developers.facebook.com/docs/sdk-reference/iossdk/3.0/

Android SDK Reference

https://developers.facebook.com/docs/reference/androidsdk/


添付ファイル: filewebsite_verify_alert.png 560件 [詳細] filewebsite_regist_step1.png 271件 [詳細] filewebsite_regist_1.png 634件 [詳細] filewebsite_setting_1.png 540件 [詳細] filewebsite_regist_3.png 559件 [詳細] filewebsite_regist_2.png 525件 [詳細] filewebsite_setting_2.png 579件 [詳細] filewebsite_add_app_2.png 592件 [詳細] filewebsite_add_app_1.png 606件 [詳細] filewebsite_add_app_3.png 588件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-16 (土) 18:03:29 (435d)