ウェブのOpen Graph Story

このドキュメントは、Open Graphで最初の記事を公開する主なステップについて説明します。

ステップを開始する前に、次を実行する必要があります。

このガイドの手順が完了したら、次のステップに進むこともできます。

FacebookアプリIDを作成する

すでにプロジェクト用としてFacebookアプリIDが取得済みであればそれを使用します。複数のプラットフォームをまたいで(iOS、Android、ウェブサイトなど)同じアプリIDを使用できます。

まだFacebookアプリIDがない場合、まずIDを作成してください。

新しいアプリIDを作成

 
ポップアップボックスが作成され、次の2つの項目を入力するよう指示されます。

  • 表示名。これは記事をFacebookやその他の場所に公開するときに使用されるアプリの名前です。ここでは、Open Graph Getting Started (Open Graphスタートガイド)またはそれに近い名前を付けます。
  • ネームスペース。このガイドでは不要なため、空白のままにします。
  • カテゴリ。 これにより、構築するアプリの種類が決定します。 ここでは、[コミュニケーション]を選択します。

アプリを作成すると、「ユーザー」および「APIデータ」が掲載されたダッシュボードが表示されます。 この画面の左側にある[設定]をクリックします。

下のスクリーンショットを参考に、各項目を設定します。

  • 連絡先メールアドレス -開発者の電子メールアドレス。
  • アプリドメイン -アプリがホストされるドメイン(http://またはhttps://プリフィックスなし)。

この例は基本的なウェブページです。したがってプラットフォームとしてのウェブを追加する必要があります。 ページ下部の[プラットフォームを追加]をクリックし、[ウェブサイト]を選択します。

次のとおり、ファイルを格納する場所へのパスを入力します。

完了したら、下部にある[変更を保存]をクリックします。

アプリの設定

先ほど指定したURIに次のファイルを配置します。

ファイル内で、変更が必要なアイテムが1つあります。それがアプリIDです。ファイル内で「fbAppId」を検索し、その値をアプリダッシュボードの[設定]ページの上部にリストされているアプリIDの値に置き換えます。

<html>
<head>
<title>Open Graph Getting Started App - og.likes</title>
<style type="text/css">
div { padding: 10px; }
</style>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
  // You probably don't want to use globals, but this is just example code
  var fbAppId = 'replace me';
  var objectToLike = 'http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/';

  // This check is just here to make sure you set your app ID. You don't
  // need to use it in production. 
  if (fbAppId === 'replace me') {
    alert('Please set the fbAppId in the sample.');
  }

  /*
   * This is boilerplate code that is used to initialize
   * the Facebook JS SDK.  You would normally set your
   * App ID in this code.
   */

  // Additional JS functions here
  window.fbAsyncInit = function() {
    FB.init({
      appId      : fbAppId, // App ID
      status     : true,    // check login status
      cookie     : true,    // enable cookies to allow the
                            // server to access the session
      xfbml      : true,     // parse page for xfbml or html5
                            // social plugins like login button below
      version     : 'v2.7',  // Specify an API version
    });

    // Put additional init code here
  };

  // Load the SDK Asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  /*
   * This function makes a call to the og.likes API.  The
   * object argument is the object you like.  Other types
   * of APIs may take other arguments. (i.e. the book.reads
   * API takes a book= argument.)
   *
   * Because it's a sample, it also sets the privacy
   * parameter so that it will create a story that only you
   * can see.  Remove the privacy parameter and the story
   * will be visible to whatever the default privacy was when
   * you added the app.
   *
   * Also note that you can view any story with the id, as
   * demonstrated with the code below.
   *
   * APIs used in postLike():
   * Call the Graph API from JS:
   *   https://developers.facebook.com/docs/reference/javascript/FB.api
   * The Open Graph og.likes API:
   *   https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
   * Privacy argument:
   *   https://developers.facebook.com/docs/reference/api/privacy-parameter
   */

  function postLike() {
    FB.api(
       'https://graph.facebook.com/me/og.likes',
       'post',
       { object: objectToLike,
         privacy: {'value': 'SELF'} },
       function(response) {
         if (!response) {
           alert('Error occurred.');
         } else if (response.error) {
           document.getElementById('result').innerHTML =
             'Error: ' + response.error.message;
         } else {
           document.getElementById('result').innerHTML =
             '<a href=\"https://www.facebook.com/me/activity/' +
             response.id + '\">' +
             'Story created.  ID is ' +
             response.id + '</a>';
         }
       }
    );
  }
</script>

<!--
  Login Button

  https://developers.facebook.com/docs/reference/plugins/login

  This example needs the 'publish_actions' permission in
  order to publish an action.  The scope parameter below
  is what prompts the user for that permission.
-->

<div
  class="fb-login-button"
  data-show-faces="true"
  data-width="200"
  data-max-rows="1"
  data-scope="publish_actions">
</div>

<div>
This example creates a story on Facebook using the
<a href="https://developers.facebook.com/docs/reference/ogaction/og.likes">
<code>og.likes</code></a> API.  That story will just say
that you like an
<a href="http://techcrunch.com/2013/02/06/facebook-launches-developers-live-video-channel-to-keep-its-developer-ecosystem-up-to-date/">
article on TechCrunch</a>.  The story should only
be visible to you.
</div>

<div>
<input
  type="button"
  value="Create a story with an og.likes action"
  onclick="postLike();">
</div>

<div id="result"></div>

</body>
</html>

記事の公開

アプリをロードすると、次のように表示されます。

ログインし、利用者のタイムラインに投稿する権限をアプリに許可して、記事を作成するボタンをクリックします。 次のように表示されます。

操作の結果がボタンの下にリンク表示されます。このリンクをクリックすると、Facebook上に作成されたアクティビティが次のようになります。

Facebook上のアクティビティについては、次の点に注意してください。

プライバシー

外側を囲んでいる薄水色の境界線は、この投稿が本人にのみ表示されていることを示しています。友達や一般に公開されている投稿には、境界線がついていません。ただし、投稿がどれくらいの範囲でシェアされているかを示す鍵に置き換わるアイコンが付いています。デモコードに含まれているプライバシーパラメーターを使用することで、投稿のプライバシーを設定できます。たいていの場合、開発者はプライバシーパラメーターを含めることはせず、代わりにアプリのデフォルトのプライバシー設定で投稿のシェア範囲を決定させています。

アクションとオブジェクト

記事の上中央部分は非常に重要です。ここには、「[subject]さんが[app]の記事について「いいね!」と言っています」と表示されています。「いいね!」は、使用したAPIによってトリガーされたものです。og.likesを使用すると、「いいね!」記事が作成されます。代わりにbook.readsAPIを使用していれば、記事には「..は...を読んでいます」または「...が...を読みました」と表示されます。 「いいね!API」は、アクションとも呼ばれますが、ほぼ動詞と同義です。

中央に表示されている記事の紹介部分も非常に重要です。ここで例に挙げているページには、これが何であり、Facebook上でどのように表示されるべきかを説明するタグが付けられています。このページのソースを見れば、これがどのようなコンテンツかをFacebookに知らせる次のようなタグを確認できます。

<meta property="og:type" content="article" />

こうしてFacebookは、これが本ではなく記事であることを認識します。

<meta property="og:type" content="book" />

これらのタグはオブジェクトを説明するために使用されます。オブジェクトは、名詞とほぼ同義です。オブジェクトは、使用するアクションに深く関連しています。たとえば、books.readsbookイン数を取ります。fitness.runsにはcourseオブジェクトが必要です。og.likesは、どのオブジェクトも受け入れるという点で特殊です。

アクションのレビュー申請

アプリで記事を作成する場合、アクションのレビューを申請する必要があります。アプリダッシュボードの左側にある[アプリレビュー]をクリックすると、次のように表示されます。

[審査を開始]をクリックすると、次のような画面が表示されます。

ステップ3では、記事がどのようにアクションオブジェクトで構成されるかについて説明しました。この場合、記事はlikeアクションを使用しているため、承認が必要です(アプリをFacebookのアプリセンターに送信する場合に、アプリセンターからの承認が必要となります。アプリセンターとは、利用者にとっては欲しいアプリを見つける場所であり、開発者にとっては完成したアプリの普及促進に役立つ場所です)。

申請プロセスを完了するには、アプリのロゴ(75x75ピクセルの画像)とアプリのアイコン(16x16ピクセルの画像)、テスト方法についてのスクリーンショット付きの解説、自動作成されたテストユーザーを提供する必要があります。申請プロセスは、開発者が施した変更を自らテストする能力を妨げません。開発者や、開発者として追加された人は、常に自身の記事を投稿しテストすることが可能です。

申請プロセスの詳細については、「Understanding the Open Graph Submission Process (Open Graph申請プロセスの理解)」をご覧ください。このドキュメントは、Facebookがアプリによって作成可能な記事を承認する際、どのような点に着目するかについて概説しています。簡単な手本として、アプリ内のlikeアクションの使用法についての具体的な手順を記載してください。通常、レビューは3営業日で完了します。

アクションは、アプリから1回使用しないと承認リストに表示されません。 従って、アプリの準備ができたら、承認申請をする前に、アプリから少なくとも1つのアクションを作成する必要があります。

次のステップ

Open Graphに関する説明の次のステップは以下のとおりです。