フィード上でのゲーム機能を実装することで、ユーザのエンゲージメントを高めることができます。この機能では、フラッシュオブジェクト付きのウォール投稿をユーザの代理として投稿することが可能です。ユーザの友だちは、その添付ファイルをクリックしてフィード上でゲームをプレイできます。これにより、縮小版のゲームをユーザの友だちに紹介し、ゲームの最後にはアプリのキャンバスページへの遷移を促すような流れを創り出すことになります。
利用例は以下の通りです。
- 特定レベルでのハイスコアをウォール投稿し、友だちに挑戦させる
- ユーザアクティビティのリプレイを投稿し、友だちが参考にしてレベルクリアできるようにする
- 簡単なサンプルゲームを作成し、ユーザがフィード上で遊んでインストールするようにする
実際のゲームからの投稿は以下の通りです。
- Angry Birdsでは、友だちのスコアに挑戦させる。試してみる
- Bubble Witch Sagaはコインを友だちと共有し、スコアに応じて増やせる。試してみる
- Idle Worshipは、ゲーム全体のサンプルが見れるミニゲームを共有させる。試してみる
- Tetris Battle allows publishing a replay of a two-player battle. Try now. Tetris Battleでは、２ユーザ対戦のリプレイを投稿できる。試してみる
注意：フィード上でゲームをプレイするユーザは「匿名」となります。キャンバスページと違ってsigned_requestは渡されませんし、JavaScript SDKを初期化することもできません。ですので、そのユーザがアプリをインストール済みなのかは判別できず、潜在ユーザと既存ユーザの両方にとって有用な設計にしなくてはなりません。
Publishing a Feed Gaming story
Feed Gamingを投稿するには、以下のステップが必要です。
1. Create an Open Graph object for the attachment
まずはog:videoメタタグを実装するOpen Graphオブジェクトを生成します。このオブジェクトは、ユーザの代理として投稿する時、添付ファイルを扱うのに使われます。| 名称 | 説明 | 必須 |
|---|---|---|
fb:app_id |
このオブジェクトを所有するアプリID | true |
og:type |
gameなど、適切なOpen Graph type |
true |
og:url |
ウォール投稿に使うユニークURL |
true |
og:title |
シェアされるウォール投稿のタイトル。例： 'Beat Gareth's high score' | true |
og:description |
ウォール投稿に使われる、このオブジェクト説明文 | true |
og:image |
オブジェクトを象徴する画像のURL。最低でも50 x 50pxで、アスペクト比は最大で3:1です。PNG, JPEG, GIFがサポートされています。 |
true |
og:video |
埋め込まれるSWFファイルのURL | true |
og:video:type |
swfファイルのレンダリングを指定します。application/x-shockwave-flashを指定してください。 | true |
og:video:width |
埋め込み時の横幅 | true |
og:video:height |
埋め込み時の高さ | true |
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://example.com/embed/" />
<meta property="og:title" content="Beat Gareth's high score" />
<meta property="og:description" content="Gareth scored 2800, can you beat it?" />
<meta property="og:image" content="http://example.com/game.png" />
<meta property="og:video" content="http://example.com/game.swf" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="299" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
詳しくはOpen Graph Protocolをご覧ください。
2. Publish the story on behalf of a user
たとえばユーザがレベル達成後に投稿するなど、適切な投稿のタイミングを考慮してください。
Feed Dialog example
推奨される投稿方法はFeed Dialogで、これなら追加でパーミッションを要求する必要がありません。linkプロパティにOpen GraphオブジェクトのURLを指定します。
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'http://example.com/embed/'
};
function callback(response) {
console.log(response);
}
FB.ui(obj, callback);
}
Graph API example
Graph APIを用いて投稿することも可能です。その場合は、Userオブジェクトの/USER_ID/feed コネクションに対してHTTP POSTリクエストを送信します。詳しくはPermissionsをご覧ください。
POST /USER_ID/feed?
link=http://example.com/embed/
access_token=USER_ACCESS_TOKEN
投稿がFacebook上でレンダリングされる時、これは矢印が重なった最大90 x 90pxの画像と一緒にリンクとして表示されます。タイトルと説明文、それからユーザのメッセージも以下のように表示されます。
ユーザが矢印をクリックすると、画像はog:videoタグで指定されたSWFに置き換えられます。Facebook上のレンダリング個所によって表示サイズの制限が変わります。スケールするのを避けたい場合は、横・縦共に398pxを越えないようにしてください。
3. Track story engagement
ユーザの代理として投稿するとき、Facebook Insightsのカテゴリを指定するrefパラメータを指定することができます。これで、ことなる投稿のパフォーマンスを計測することが可能になります。アプリのInsightsを見る時に Traffic の Stream Publish を選択すると、Story Typeというドロップダウンメニューが表示され、それぞれのカテゴリ毎の投稿数、インプレッション、クリック数を見ることができます。これにより、異なる画像や投稿タイミングでのパフォーマンスを比較できます。
ここで指定した値は、ユーザがウォール投稿のタイトルをクリックして直接ゲームへ遷移する時に、fb_refパラメータとしてアプリへ渡されます。これは、埋め込まれたゲームをプレイせずに遷移した場合です。
