https://developers.facebook.com/docs/feed-gaming/


フィード上でのゲーム機能を実装することで、ユーザのエンゲージメントを高めることができます。この機能では、フラッシュオブジェクト付きのウォール投稿をユーザの代理として投稿することが可能です。ユーザの友だちは、その添付ファイルをクリックしてフィード上でゲームをプレイできます。これにより、縮小版のゲームをユーザの友だちに紹介し、ゲームの最後にはアプリのキャンバスページへの遷移を促すような流れを創り出すことになります。


attachment

利用例は以下の通りです。

  • 特定レベルでのハイスコアをウォール投稿し、友だちに挑戦させる
  • ユーザアクティビティのリプレイを投稿し、友だちが参考にしてレベルクリアできるようにする
  • 簡単なサンプルゲームを作成し、ユーザがフィード上で遊んでインストールするようにする
これは、潜在ユーザに対してプレビューを提供し、競争させて既存ユーザと共有させるのに最適な方法となります。

実際のゲームからの投稿は以下の通りです。

  • Angry Birdsでは、友だちのスコアに挑戦させる。試してみる
  • Bubble Witch Sagaはコインを友だちと共有し、スコアに応じて増やせる。試してみる
  • Idle Worshipは、ゲーム全体のサンプルが見れるミニゲームを共有させる。試してみる
  • Tetris Battle allows publishing a replay of a two-player battle. Try now. Tetris Battleでは、2ユーザ対戦のリプレイを投稿できる。試してみる

注意:フィード上でゲームをプレイするユーザは「匿名」となります。キャンバスページと違ってsigned_requestは渡されませんし、JavaScript SDKを初期化することもできません。ですので、そのユーザがアプリをインストール済みなのかは判別できず、潜在ユーザと既存ユーザの両方にとって有用な設計にしなくてはなりません。

Publishing a Feed Gaming story

Feed Gamingを投稿するには、以下のステップが必要です。

  1. 添付用のOpen Graphオブジェクトを生成する
  2. ユーザの代理として投稿する
  3. 投稿のエンゲージメントを追跡する

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);
 }
詳しくはFeed Dialogのドキュメントをご覧ください。


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の画像と一緒にリンクとして表示されます。タイトルと説明文、それからユーザのメッセージも以下のように表示されます。


attachment2

ユーザが矢印をクリックすると、画像はog:videoタグで指定されたSWFに置き換えられます。Facebook上のレンダリング個所によって表示サイズの制限が変わります。スケールするのを避けたい場合は、横・縦共に398pxを越えないようにしてください。


attachment3

3. Track story engagement

ユーザの代理として投稿するとき、Facebook Insightsのカテゴリを指定するrefパラメータを指定することができます。これで、ことなる投稿のパフォーマンスを計測することが可能になります。アプリのInsightsを見る時に Traffic の Stream Publish を選択すると、Story Typeというドロップダウンメニューが表示され、それぞれのカテゴリ毎の投稿数、インプレッション、クリック数を見ることができます。これにより、異なる画像や投稿タイミングでのパフォーマンスを比較できます。


attachment4

ここで指定した値は、ユーザがウォール投稿のタイトルをクリックして直接ゲームへ遷移する時に、fb_refパラメータとしてアプリへ渡されます。これは、埋め込まれたゲームをプレイせずに遷移した場合です。