Tin đăng bằng Open Graph trên web

Tài liệu này mô tả các bước chính để đăng tin đầu tiên của bạn bằng Open Graph.

Trước khi bắt đầu, bạn cần:

Sau khi hoàn thành với hướng dẫn này, bạn cũng có thể tìm hiểu về các bước tiếp theo có thể có.

Tạo ID ứng dụng trên Facebook

Bạn có thể đã có ID ứng dụng trên Facebook cho dự án của mình. Bạn có thể sử dụng cùng một ID ứng dụng trên nhiều nền tảng, ví dụ: iOS, Android và Trang web.

Nếu chưa có ID ứng dụng trên Facebook cho dự án, trước tiên bạn cần tạo một ID:

Tạo ID ứng dụng mới

 
Thao tác này sẽ tạo hộp bật lên, hộp này nhắc bạn nhập hai nội dung:

  • Tên hiển thị. Đây là tên ứng dụng được sử dụng khi đăng tin lên Facebook và ở một số nơi khác. Sử dụng Bắt đầu với Open Graph hoặc thứ gì đó tương tự.
  • Vùng tên. Không bắt buộc đối với hướng dẫn này vì vậy hãy để trống.
  • Danh mục. Danh mục sẽ xác định loại ứng dụng mà ứng dụng của bạn đang tạo. Hiện tại, chỉ cần chọn Giao tiếp.

Sau khi tạo ứng dụng, bạn sẽ được cung cấp một bảng điều khiển hiển thị Người dùng và Số liệu thống kê API. Từ màn hình này, nhấp vào Cài đặt ở bên trái.

Hoàn thành các trường sau, như minh họa trong ảnh chụp màn hình bên dưới:

  • Email liên hệ. Địa chỉ email của nhà phát triển.
  • Miền ứng dụng. Miền sẽ lưu trữ ứng dụng của bạn (không có tiền tố http:// hoặc https://.)

Ví dụ này là trang web cơ bản, vì vậy bạn sẽ cần thêm web dưới dạng một nền tảng. Nhấp vào Thêm nền tảng ở cuối trang và chọn Trang web.

Nhập đường dẫn nơi bạn sẽ muốn lưu trữ tệp của mình. Đường dẫn sẽ được cung cấp cho bạn dưới đây.

Khi bạn hoàn tất, nhấp vào Lưu thay đổi ở dưới cùng.

Thiết lập ứng dụng

Đặt tệp sau vào URI mà bạn đã chỉ định trong cài đặt bên trên.

Trong tệp, bạn cần thay đổi một mục đó là ID ứng dụng. Tìm kiếm 'fbAppId' trong tệp và thay thế giá trị của tệp bằng ID ứng dụng được liệt kê ở đầu trang Cài đặt trong Bảng điều khiển ứng dụng.

<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>

Đăng tin

Nếu tải ứng dụng, bạn sẽ nhìn thấy nội dung sau:

Đăng nhập, cho phép ứng dụng đăng lên dòng thời gian của bạn và nhấp vào nút "Tạo tin...". Bạn sẽ nhìn thấy nội dung như sau:

Bạn sẽ nhận thấy rằng kết quả được liệt kê bên dưới nút. Nếu bạn nhấp vào kết quả, bạn sẽ được đưa đến hoạt động được tạo trên Facebook. Kết quả sẽ như sau:

Bạn cần lưu ý một vài điều về hoạt động trên Facebook:

Quyền riêng tư

Đường viền bằng nét gạch màu xanh lam nhạt phía bên ngoài biểu thị rằng bài viết chỉ hiển thị cho bạn. Bài viết hiển thị cho bạn bè hoặc công khai sẽ không có đường viền, tuy nhiên sẽ có biểu tượng để thay thế khóa nhằm biểu thị mức độ rộng rãi khi chia sẻ bài viết. Bạn có thể đặt quyền riêng tư của bài viết bằng thông số quyền riêng tư, kèm theo mã demo. Nhà phát triển thường không bao gồm thông số quyền riêng tư, thay vào đó cho phép quyền riêng tư mặc định của ứng dụng để biểu thị mức độ rộng rãi khi chia sẻ nội dung nào đó.

Hành động và đối tượng

Phần giữa của tin rất quan trọng. Phần này cho biết "[subject] thích một bài viết trên [app]". 'Lượt thích' bị chi phối bởi API mà bạn đã sử dụng. og.likes sẽ tạo tin thích. Nếu bạn đã sử dụng API book.reads, tin có thể sẽ cho biết nội dung nào đó như "..đang đọc..." hoặc "...đọc... ." API thích, chúng tôi gọi là Hành động, thường tương tự như một động từ.

Phần "bài viết" của tin cũng rất quan trọng. Trang được nói đến có thẻ mô tả nội dung của trang và cách trang được hiển thị trên Facebook. Nếu bạn nhìn vào nguồn cho trang, bạn sẽ thấy rằng nguồn chứa thẻ cho Facebook biết loại nội dung của trang:

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

Đây là cách để Facebook biết rằng đó là một bài viết, trái với, một cuốn sách.

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

Đây là những thẻ mà chúng tôi sử dụng để mô tả Đối tượng. Đối tượng thường tương đương với các danh từ. Đối tượng có liên quan mật thiết đến Hành động bạn sử dụng. Ví dụ: books.reads có thể lấy đối số book. fitness.runs yêu cầu đối tượng course. og.likes đặc biệt ở chỗ có thể chấp nhận mọi đối tượng.

Đăng hành động của bạn để xét duyệt

Nếu ứng dụng của bạn tạo tin, thì hành động của bạn cần xét duyệt. Nhấp vào Xét duyệt ứng dụng ở bên tay trái của Bảng điều khiển ứng dụng và bạn sẽ nhìn thấy nội dung như sau:

Nhấp vào Bắt đầu gửi và bạn sẽ nhìn thấy một màn hình như sau:

Ở Bước 3, chúng tôi đã nói về cách tạo tin gồm hành độngđối tượng. Trong trường hợp này, tin của bạn đã sử dụng hành động like và hành động đó cần được phê duyệt. (Cần có phê duyệt của Trung tâm ứng dụng nếu bạn muốn gửi ứng dụng của mình lên trung tâm ứng dụng của Facebook. Trung tâm ứng dụng là nơi mọi người sẽ tìm thấy các ứng dụng thú vị và là thứ bạn cần xem xét để tăng mức phân phối ứng dụng của mình khi bạn đã sẵn sàng.)

Để hoàn tất quy trình gửi, bạn cần cung cấp logo ứng dụng (hình ảnh 75x75px) và biểu tượng ứng dụng (hình ảnh 16x16px), hướng dẫn về cách thử nghiệm ứng dụng kèm theo ảnh chụp màn hình và người dùng thử nghiệm được tạo tự động. Quy trình gửi sẽ không ngăn cản khả năng thử nghiệm các thay đổi của riêng bạn vì bạn và bất kỳ ai khác mà bạn thêm làm nhà phát triển luôn có thể đăng tin và thử nghiệm tin của riêng bạn.

Nếu bạn muốn tìm hiểu thêm về quy trình gửi, hãy xem tài liệu Tìm hiểu quy trình gửi bằng Open Graph của chúng tôi. Tài liệu này cung cấp hướng dẫn chung về những gì Facebook mong đợi khi phê duyệt tin mà ứng dụng có thể tạo. Ví dụ chi tiết hơn, cung cấp hướng dẫn cụ thể về cách sử dụng hành động like trong ứng dụng của bạn. Chúng tôi thường hoàn tất việc xét duyệt trong vòng ba ngày làm việc.

Các hành động không hiển thị trong danh sách cần phê duyệt cho đến khi bạn sử dụng chúng một lần từ ứng dụng của mình. Vì vậy khi bạn đã sẵn sàng thêm hành động của riêng mình, bạn sẽ cần tạo ít nhất một hành động từ ứng dụng trước khi có thể gửi hành động đó để phê duyệt.

Các bước tiếp theo

Dưới đây là các bước tiếp theo bạn có thể thực hiện khi tìm hiểu Open Graph: