Facebookアプリを加速させるOpen Graphに対応させる方法
こんにちは、jAction の萩原です。
以前、【解説】リアルタイムに拡散させるOpen Graphのやり方という記事でOpenGraphについて触れました。その後、OpenGraphを使っていくうちに詳細な部分もわかってきたので追記して解説していきます。
まず、Open Graphとは？以下のリンクが詳しく書かれていますのでご参照ください。
今話題の「Facebook Open Graphアプリ」とは何か
簡単に言うと、リアルタイムでアプリ内の行動が共有される機能です。
この記事では、通常のfacbookモバイルアプリの設定は完了している前提で解説していきます。
facebookモバイルアプリの設定は以下の記事を参照ください。
行うことは以下の7つです。
1.認証ダイアログを設定する
2.Actionを設定する
3.Objectを設定する
4.Aggregationsを設定する
5.Actionをテストする
6.Actionの認証を申請する
7.Actionを実装する
それぞれ見ていきます。
1.認証ダイアログを設定する
アプリの設定から認証ダイアログを選択します。
認証ダイアログ
Authenticated ReferralsのUser & Friend Permissionsにpublish_actionsを設定します。
Authenticated Referrals
これで認証ダイアログの設定は完了です。
2.Actionを設定する
OpenGraph
Open Graphに必要な要素としてActionとObjectがあります。Open GraphとはUSERが「何」を「どうした(どうする)」かを拡散する機能です。「何」に当たる部分がObjectで「どうした」かの部分がActionです。まず、このActionとObjectを設定します。
Open Graphでは独自のAction、Objectを登録できます。今回はActionにPlay、Objectにgameを登録します。
アプリの設定からオープングラフのGetting Startedを選択します。
ActionとObjectを入力して、「スタート」をクリックします。
アプリの設定>Open Graph>Getting Started
上からパラメータを解説していきます。
■Define Action Type
Define Action Type
Actionの名前とプロパティを設定します。
・名前：Actionの名前です。
・プロパティ：
Action投稿時に指定出来るプロパティが記載されています。新たにプロパティを設定することも出来ます。
■Configure Story Text
Configure Story Text
Actionの時制を設定します。Actionの現在/過去時制を両方使用するかや、Actionの前置詞を設定することができます。
■Configure Story Attachment
Configure Story Attachment
Actionがフィードさせるときのレイアウトなどを設定することができます。
-Attachment Layout：
Actionがフィードされるときのレイアウトを以下から選択します。
・Item:：画像の横にキャプションを表示します
・Number：数字の下にキャプションを表示します
・Map：Actionをマップに表示します
詳細設定をいくつかピックアップして解説します。
-Graph API URL：
Graph APIでActionを呼び出すときのURLを設定します。
-Unique Action
このActionを別のObjectにも所属させるかどうかを設定します。
-Linked Action
Action LinksのActionを設定します。Action Linksとはフィード上で、ユーザーにActionをさせることができる機能です。
アプリに遷移せずにActionをさせることがきるため、非常に敷居が低くなります。
-Action Link Preview
フィード上でどうAction Linksが表示されるか確認出来ます。
-Action Link URL
Action Linksを行うためのエンドポイントを設定します。
3.Objectを設定する
続いてObject,の設定をします。
上からパラメータを解説していきます。
■Define Object Type
Define Object Type
-名前；
Objectの名前です。
-プロパティ；
Objectとともに設定できるパラメータです。既存のもの以外に独自に設定も可能です。
Define Object Type(詳細設定)
-Singular Noun：
Objectの単数系を指定します。
-Plural Noun：
Objectの複数系を指定します。
4.Aggregationsを設定する
続いて、Aggregationを設定します。
InstagramのAggregation
上のキャプチャはInstagramのAggregationの表示です。Aggregationはタイムライン上で月や年の単位などでまとめてアプリのActionを表示できる機能です。パラメータを紹介していきます。
Aggregationの設定
-Date to Display：
Aggregationで表示させるObjectもしくは、Actionを表示させます。
-Layout Style：
タイムライン上で表示されるレイアウトを選択します。
-Sort By：
Aggregationで表示させるアイテムの優先順位を決定します。
-Aggregation Title ：
Aggregationのタイトルを設定します。
-Caption Lines：
Aggregationの説明文を設定します。
-Filters / Group By：
Aggregationで表示させるアイテムに対してフィルターをかけて選別することができます。
5.Actionをテストする
独自のアクションを使うためには、申請をしてFacebookの許可を取る必要があります。その申請を行うために、開発者がテストをする必要があります。許可が降りる前の独自Actionは開発者のみであれば実装は可能です（開発者のタイムラインにのみ表示されます）。
オープングラフのDashboardを開いてください。
Open Graphの実装
Action Typesの右端にあるGet Codeを選択してください。
すると以下のようなダイアログが出てきます。
Get Code
この中の「Create a new Appreciate action」のコードを選択し、Macの場合はターミナル(コマンドライン)で実行します。
すると、自分のタイムラインに以下のようなアクティビティが表示されます。
タイムラインのアクティビティ
これでテストは完了です。これを元にFacebookへ申請することができます。
6.Actionの認証を申請する
登録が出来たら次はActionの申請です。申請については以下のリンクが参考になりますのでご参照ください。
Auth Dialog Facebook開発者向けドキュメントの日本語訳とTips
Facebookの許可がおりるまで数日かかりました。
7.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の良い活用方法を研究していくつもりです。
【参考リンク】
以下のリンクを参考にしました。
