【解説】リアルタイムに拡散させるOpen Graphのやり方 | jAction

【解説】リアルタイムに拡散させるOpen Graphのやり方



こんにちは、jAction の萩原です。

SOCIAL BLOCK KUZUSHIがOpen Graphに対応しました。

そのやり方を解説してきます。

 

まず、Open Graphとは?以下のリンクが詳しく書かれていますのでご参照ください。

今話題の「Facebook Open Graphアプリ」とは何か

簡単に言うと、リアルタイムでアプリ内の行動が共有される機能です。

行うことは以下の5つです。

1.認証ダイアログを設定する

2.独自Actionを設定する

3.独自アクションをテストする

4.Actionの認証を申請する

5.Actionを実装する

それぞれ見ていきます。

1.認証ダイアログを設定する

アプリの設定から認証ダイアログを選択します。

認証ダイアログ

Authenticated ReferralsのUser & Friend Permissionsにpublish_actionsを設定します。

Authenticated Referrals

これで認証ダイアログの設定は完了です。

2.独自Actionを設定する

Open Graphではアプリ独自のアクションを登録できます。今回はPlayというアクションを申請しました。

まずは、Open Graphで独自のアクションを設定する必要があります。 

Open Graph

こちらの手順は以下のリンクに詳しく書かれていますのでご参照ください。

Facebookのタイムラインにアプリを追加する方法(オープングラフアプリ・タイムラインアプリ)

3.独自アクションをテストする

独自のアクションを使うためには、申請をしてFacebookの許可を取る必要があります。その申請を行うために、開発者がテストをする必要があります。許可が降りる前の独自Actionは開発者のみであれば実装は可能です(開発者のタイムラインにのみ表示されます)。

 

オープングラフのDashboardを開いてください。

Open Graphの実装

Action Typesの右端にあるGet Codeを選択してください。

すると以下のようなダイアログが出てきます。

Get Code

この中の「Create a new Appreciate action」のコードを選択し、Macの場合はターミナル(コマンドライン)で実行します。

すると、自分のタイムラインに以下のようなアクティビティが表示されます。

タイムラインのアクティビティ

これでテストは完了です。これを元にFacebookへ申請することができます。

4.Actionの認証を申請する

登録が出来たら次はActionの申請です。申請については以下のリンクが参考になりますのでご参照ください。

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

Facebookの許可がおりるまで数日かかりました。

5.Actionを実装する

許可がおりたら、いよいよ実装です。

javascript SDKを使うと以下のようにして実装することができます。

FB.api(
        '/me/[YOUR_APP_NAMESPACE]:cook?recipe=http://fbwerks.com:8000/zhen/cookie.html',
        'post',
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Cook was successful! Action ID: ' + response.id);
           }
        });

ここに出てくる、cookがActionでrecipeがオブジェクトです。

これでリアルタイムでアプリのActionがフィードされ拡散が広がるでしょう。

今後もこのOpen Graphの良い活用方法を研究していくつもりです。