網絡上的開放式圖表動態

本文件說明使用開放式圖表第一次發佈動態的重要步驟。

開始之後,您需要進行下列操作:

完成本指南後,您還可以學習可用的後續步驟

建立 Facebook 應用程式編號

您可能已經為您的專案備妥 Facebook 應用程式編號。您可以在多個平台(亦即 iOS、Android 和網站)上使用相同的應用程式編號。

如果您的專案尚未備妥 Facebook 應用程式編號,您首先應該建立一個:

建立新應用程式編號

 
將會建立彈出方塊,提示您輸入兩個項目:

  • 顯示名稱。當動態發佈至 Facebook 以及多個其他位置時,會使用此應用程式名稱。請使用開放式圖表新手指南或其他類似的指南。
  • 命名空間。在本指南中不需要,因此請保留空白。
  • 類別。 此項目將決定您當前建立之應用程式的種類。 現在,只要選擇通訊即可。

應用程式建立完成後,將會提供顯示「用戶和 API 狀態」的管理中心。 在此畫面上,點擊左邊的設定

填寫下列欄位,如以下螢幕截圖所示:

  • 聯絡電郵。您的開發人員電郵地址。
  • 應用程式網域。您的應用程式在其中託管的網域(沒有 http:// 或 https:// 字首。)

此範例是一個基本網頁,因此您需要新增網站作為平台。 點擊網頁底端的新增平台,然後選擇網站

輸入您要儲存檔案的路徑,將在以下提供給您。

完成後,請點擊底端的儲存變更

設定應用程式

將下列檔案放置在您在上述設定中指定的 URI 中。

您需要變更檔案中的「應用程式編號」項目。在檔案中搜尋「fbAppId」,然後將其值取代為「應用程式管理中心」中設定頁面頂端列出的應用程式編號。

<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 = "https://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.reads API,則動態可能類似「……正在閱讀……」或「……已經閱讀…… 我們稱為動作的讚好 API 大致可視為動詞。

動態的「文章」部分也是非常重要。我們討論的網頁具有標籤,用以描述其內容以及在 Facebook 上應該呈現的樣貌。如果您查看網頁原始嗎,您會看到其中有一個標籤告訴 Facebook,內容是什麼:

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

這是 Facebook 知道文章是什麼(例如是一本書)所依據的方法。

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

這些是我們用來描述物件的標籤。物件大約等同於名詞。物件和您使用的動作密切關聯。舉例來說,books.reads 可接受 book 引數。fitness.runs 需要 course 物件。og.likes 的特別性在於可接受任何物件。

提交您的動作供審查

如果您的應用程式會建立動態,則您的動作需要審查。點擊應用程式管理中心左側的應用程式審查,您就會看到類似以下的內容:

點擊開始提交,您將會看到類似以下的畫面:

在步驟 3 中,我們討論了動作物件如何構成動態。在此情況下,您的動態使用了 like 動作,就是該動作需要批准。(如果您要將應用程式提交至 Facebook 的應用程式中心,則您要面對應用程式中心批准。用戶可以在應用程式中心找到有趣的應用程式,當您準備好推出應用程式時,也值得考慮在這裡推廣。)

若要完成提交程序,您需要提供應用程式標誌(75x75 像素圖像)以及應用程式圖示(16x16 像素圖像),附隨螢幕截圖的測試指示,以及自動建立的測試用戶。由於您以及您新增作為開發人員的任何人能隨時帖子以及測試您自己的動態,因此提交程序不應該阻止您測試所做的變更。

如果您要深入瞭解提交程序的相關資訊,請參閱我們的瞭解開放式圖表提交程序文件。該文件涵蓋有關 Facebook 在批准應用程式可建立的動態時會尋找哪些內容的整體指引。這個小型範例提供如何在您的應用程式中使用 like 動作的具體指引。我們通常會在三個工作天內完成審查。

動作要在您從應用程式使用過之後,才會顯示在批准清單中。 因此,當您準備好自行新增時,您需要先從應用程式至少建立一個動作,才能夠將應用程式提交批准。