株式会社カネアカ|企画・分析・開発

インターネットは道具です。

【翻訳】Facebookポイントの実装方法-デベロッパーブログ-Facebookより

| 0 comments

Facebookはデベロッパーブログで技術情報を公開しています。

開発や制作、マーケティングをするうえで、重要な資料なので、日本語訳して公開します。

この翻訳の内容に関して、正確に翻訳できるよう努力していますが、その内容やそれに基づいて行った行動の結果については保証しません。
間違いがあればどんどん教えてください。

技術情報の翻訳に関しては、確実に情報を提供するスキームを用意しています。ご興味がある方はお問い合わせください。


http://developers.facebook.com/blog/post/489 2011/4/30現在
以下翻訳

Facebook クレジットの実装方法

By Daniel Schultz – 2011年4月12日 10:45

Facebookクレジットはデジタル商品とサービスをFacebook上で買う、いちばん簡単な方法です。 今年の1月と、ほかにも私達の開発者ロードマップアナウンスした通り、私達は Facebook上のキャンバスゲームの開発者のみなさんに、2011年7月1日以降、すべての支払いは Facebookクレジットを通すように要求するつもりです。以下に、 Facebookクレジットをあなたのアプリに簡単に実装する方法の概要を示しました。

ステップ 1: アプリを登録する

Facebookクレジットをあなたのキャンバスアプリで使うための最初の一歩は、あなたの会社を開発者アプリの’Credits’タブで登録することです。(下にある例の通り) あなたの会社を登録したら、その会社を’Company Name’ドロップダウンメニューから選択し、’Save Changes’をクリックしてください。これであなたのアプリはクレジットを受け取る準備ができました。

ステップ 2: JavaScript SDKを使って支払いダイアログを作成する

あなたのアプリの中で、ユーザーに直接 Facebookクレジットで買うよう促してください。このオススメの組み合わせ例では、ゲームRavenwood Fairはプレミアムアイテムの対価を直接 Facebookクレジットに設定しており、プレミアムアイテムでないものの対価はエクスペリエンス通貨(ユーザーがアプリに参加するアクションをとると得られるもの)に設定しています。

次に示すのは、適切なアイテム情報を Facebookに送信するシンプルなフォームを表示させるコードの1例です。


<html>
  <head>
	<title>Facebook Credits sample
  </head>
  <body>
  <form name ="place_order" id="order_form" action="#">
   <img src="http://www.facebook.com/images/gifts/21.png">
   <input type="hidden" name="item_id" value="1a" id="item_id">
    <img src="http://developers.facebook.com/attachment/credits_sm.png"
      height="25px">
 <a onclick="placeOrder(); return false;"> <img src="https://www.facebook.com/images/credits/paybutton.png"> </a> </form> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"> </script> <script> FB.init({appId: ‘YOUR_APP_ID’, status: true, cookie: true}); function placeOrder() { var item_id = document.getElementById('item_id').value; // Assign an ID - usually points to a db record // found in your callback var order_info = item_id; // calling the API ... var obj = { method: 'pay', order_info: order_info, purchase_type: 'item' }; FB.ui(obj, callback); } var callback = function(data) { if (data['order_id']) { // Success, we received the order_id. The order states can be // settled or cancelled at this point. return true; } else { //handle errors here return false; } }; </script> </body> </html> 


あなたのappidをFB.initメソッドに入力し、IDを変数order_infoに設定してください。order_infoは後ほど、決済前のアイテムの作成のためにコールバックで使われることになります。(例:私達はitem_idの値を”1a”に設定しました。)

ステップ 3: callback.phpを作成する

クライアント側のコードの準備が終わったら、オーダーを処理するためのコードも書かなくてはいけません。オーダー一巡のフローの概観は下の図のようになっています。                                                                                                                                                                                                                                                                                                                       クリックして買う                   オーダーを送信する                   payments_get_itemsに要求する                   オーダー情報で応答する 購入ダイアログを表示する クリックして購入する                   payments_status_updateに要求                   オーダー決済済みで応答 確認ダイアログを表示する

あなたのアプリがオーダーを送信すると、 Facebookはユーザーの購入の前にあなたのアイテム情報を作成するためpayments_get_itemsメソッドに要求を送ります。

下のコード例のように、$_REQUESTからの payments_get_itemsメソッドをチェックし、一意のorder_info(この例で言えば、ステップ2で設定した’1a’)を探し、要求されたアイテム変数を設定してください。Facebookはそれを受けてアイテムの名前、説明、クレジットでの値段、画像イメージを含んだモーダルなダイアログボックスを表示します。

ユーザーが購入するボタンをクリックすると、 Facebookは payments_status_updateメソッドで2回目のコールを送り、あなたのコールバックを要求します。payments_status_updateメソッドでは、あなたは購入の処理と、ユーザーのオーダーフォームのplacedからsettledへの切り替えを行います。


<?PHP  // Enter your app information below
  $api_key = 'YOUR_API_KEY';
  $secret = 'YOUR_APP_SECRET';

// prepare the return data array
$data = array('content' => array());

// parse signed data
$request = parse_signed_request($_REQUEST['signed_request'], $secret);

if ($request == null) {
  // handle an unauthenticated request here
}

$payload = $request['credits'];

// retrieve all params passed in
$func = $_REQUEST['method'];
$order_id = $payload['order_id'];

if ($func == 'payments_status_update') {
  $status = $payload['status'];

  // write your logic here, determine the state you wanna move to
  if ($status == 'placed') {
	$next_state = 'settled';
	$data['content']['status'] = $next_state;
  }
  // compose returning data array_change_key_case
  $data['content']['order_id'] = $order_id;
  } else if ($func == 'payments_get_items') {
    // remove escape characters
    $order_info = stripcslashes($payload['order_info']);
    $item_info = json_decode($order_info, true);
    //Per the credits api documentation,
    //you should pass in an item reference
    // and then query your internal DB for the proper
    //information. Then set the item
    //information here to be returned to facebook
    //then shown to the user for confirmation.
    if ($item_info == "1a") {
     $item['title'] = 'BFF Locket';
     $item['price'] = 1;
     $item['description']='This is a BFF Locket...';
     $item['image_url']='http://www.facebook.com/images/gifts/21.png';
     $item['product_url']='http://www.facebook.com/images/gifts/21.png';
    }
    //for url fields, if not prefixed by http:,
    //prefix them
    $url_key = array('product_url', 'image_url');
    foreach ($url_key as $key) {
      if (substr($item[$key], 0, 7) !http        $item[$key] = 'http://'.$item[$key];
      }
    }
    $data['content'] = array($item);
}

  // required by api_fetch_response()
  $data['method'] = $func;
  echo json_encode($data);
?>


ステップ 4: コールバックのロケーションを設定する

両方のファイルを作成したら、コールバックファイルのロケーションを開発者アプリの’Credits’タブに、下の例のように入力してください。

ステップ 5:取引を完了する

これで、最初の Facebookクレジット取引を試す準備が整いました! Facebookキャンバスアプリのある場所まで移動し、FB.ui call を起動してください。

“Pay Now”をクリックし、支払いダイアログを表示させてください。

“Buy BFF Locket”をクリックし、確認ダイアログを表示させてください。

もっと情報がいる場合は、私達のCredits API documentationを参照してください。

質問するため、 Facebook Liveに参加してください。

まだ Facebookクレジットの実装について質問があれば、私達は午前11時(太平洋標準時刻)からlive Q&A方式でこの情報をカバーするセッションを開催しています。

キャンバスゲーム開発者のみなさんに、機能の実装を最適化し、 必要とあればFacebookクレジットサポートチームからサポートを受ける時間を確保するために、マイグレーションのプロセスを今すぐ始めることをおすすめします。

Daniel は、新規参入した開発者がクレジットを革新的な方法で使うのを見てワクワクしています。


コメントをどうぞ

Required fields are marked *.

*