เรื่องราวจาก Open Graph บนเว็บ

เอกสารนี้อธิบายถึงขั้นตอนที่สำคัญเพื่อเผยแพร่เรื่องราวเรื่องแรกของคุณด้วย Open Graph

ก่อนเริ่มต้น คุณจำเป็นต้อง:

เมื่อคุณทำตามคู่มือนี้เสร็จแล้ว คุณยังสามารถศึกษาขั้นตอนต่อไปที่เป็นไปได้อีกด้วย

สร้าง ID แอพของ Facebook

คุณอาจมี ID แอพของ Facebook สำหรับโครงการของคุณเรียบร้อยแล้ว คุณสามารถใช้ ID ของแอพเดียวกันกับแพลตฟอร์มต่างๆ เช่น iOS, Android และเว็บไซต์

หากคุณยังไม่มี ID ของแอพบน Facebook สำหรับโครงการของคุณ คุณควรสร้าง ID ขึ้นมาก่อน:

สร้าง ID แอพใหม่

 
ซึ่งจะสร้างกล่องป็อปอัพที่จะขอให้คุณป้อนข้อมูลสองส่วน ได้แก่

  • ชื่อที่แสดง นี่คือชื่อแอพที่นำมาใช้เมื่อมีการเผยแพร่เรื่องราวบน Facebook และในสถานที่อื่นๆ ใช้ การเริ่มต้นใช้งาน Open Graph หรือรายการอื่นที่ใกล้เคียง
  • เนมสเปซ ไม่จำเป็นต้องใช้กับคู่มือนี้ แนะนำให้ปล่อยว่างไว้
  • หมวดหมู่ ซึ่งจะกำหนดประเภทของแอพที่คุณกำลังสร้าง สำหรับตอนนี้ แค่เลือก การสื่อสาร

เมื่อคุณสร้างแอพของคุณเสร็จแล้ว คุณจะเห็นแดชบอร์ดที่แสดงสถิติผู้ใช้และสถิติ API จากหน้าจอนี้ ให้คลิก การตั้งค่า ทางด้านซ้าย

กรอกรายละเอียดลงในช่องต่างๆ ต่อไปนี้ตามที่ปรากฎในภาพหน้าจอด้านล่าง:

  • อีเมลติดต่อ ที่อยู่อีเมลของผู้พัฒนาของคุณ
  • โดเมนของแอพ โดเมนที่จะใช้โฮสต์แอพของคุณ (ไม่ต้องมีคำนำหน้า http:// หรือ https://)

ตัวอย่างนี้คือเว็บเพจพื้นฐาน คุณจะต้องเพิ่มเว็บเพื่อใช้เป็นแพลตฟอร์ม คลิก เพิ่มแพลตฟอร์ม ที่ด้านล่างของเพจและเลือก เว็บไซต์

ป้อนเส้นทางที่คุณต้องการจัดเก็บไฟล์ของคุณ ไฟล์จะแสดงไว้ให้กับคุณที่ด้านล่าง

เมื่อทำเสร็จแล้ว ให้คลิก บันทึกการเปลี่ยนแปลง ที่ด้านล่าง

ตั้งค่าแอพ

วางไฟล์ต่อไปนี้ไว้ใน URI ที่คุณระบุไว้ในการตั้งค่าด้านบน

คุณจำเป็นต้องเปลี่ยนข้อมูลหนึ่งรายการในไฟล์ ซึ่งก็คือ 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 = "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 ดังนี้

ความเป็นส่วนตัว

ขอบเส้นประสีฟ้าอ่อนรอบๆ ด้านนอกแสดงว่า คุณเป็นคนเดียวที่มองเห็นโพสต์นั้น โพสต์ที่เพื่อนหรือสาธารณะมองเห็นได้จะไม่มีเส้นขอบแม้จะมีไอคอนที่แทนการล็อกเพื่อระบุว่าโพสต์ดังกล่าวแชร์ออกไปกว้างขวางเพียงใด คุณสามารถตั้งความเป็นส่วนตัวของโพสต์ด้วยพารามิเตอร์ความเป็นส่วนตัวที่รวมอยู่ในโค้ดสาธิต ผู้พัฒนามักจะไม่รวมพารามิเตอร์ความเป็นส่วนตัว แต่เลือกอนุญาตให้ความเป็นส่วนตัวที่เป็นค่าเริ่มต้นของแอพกำหนดระดับความแพร่หลายของสิ่งที่จะแชร์

การดำเนินการและอ็อบเจ็กต์

ส่วนที่เป็นศูนย์กลางของเรื่องราวนั้นมีความสำคัญมาก มีคำกล่าวว่า "[ชื่อเรื่อง] เหมือนบทความบน [แอพ]" “ถูกใจ” ได้มาจาก 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 ศูนย์รวมแอพคือที่ที่ผู้คนจะพบแอพที่น่าสนใจ และเป็นส่วนที่คุณควรพิจารณาเพื่อใช้แจกจ่ายแอพของคุณเมื่อคุณพร้อมแล้ว)

หากต้องการดำเนินการส่งให้แล้วเสร็จ คุณจำเป็นต้องมีโลโก้ของแอพ (ภาพขนาด 75 x 75 พิกเซล) และไอคอนของแอพ (ภาพขนาด 16 x 16 พิกเซล) พร้อมคำแนะนำวิธีทดสอบแอพด้วยภาพหน้าจอ และผู้ใช้การทดสอบที่สร้างขึ้นโดยอัตโนมัติ การดำเนินการส่งไม่ควรขัดขวางความสามารถที่คุณจะทดสอบการเปลี่ยนแปลงของคุณเอง เนื่องจากคุณและใครก็ตามที่คุณเพิ่มเป็นผู้พัฒนาสามารถโพสต์และทดสอบเรื่องราวของคุณเองได้เสมอ

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับกระบวนการส่ง โปรดดูที่เอกสาร การทำความเข้าใจกระบวนการส่ง Open Graph ของเรา เอกสารนี้จะให้คำแนะนำโดยรวมถึงสิ่งที่ Facebook มองหาเมื่ออนุมัติเรื่องราวที่แอพสามารถสร้างขึ้น ตัวอย่างนี้แสดงคำแนะนำเฉพาะเกี่ยวกับวิธีใช้การดำเนินการ like ในแอพของคุณ เรามักจะตรวจสอบเสร็จภายในสามวันทำการ

การดำเนินการจะไม่แสดงในรายการอนุมัติจนกว่าคุณจะใช้การดำเนินการนั้นอีกครั้งจากแอพของคุณ ดังนั้น เมื่อคุณพร้อมที่จะเพิ่มการดำเนินการของคุณ คุณจะต้องสร้างการดำเนินการอย่างน้อยหนึ่งอย่างจากแอพของคุณก่อนจะส่งให้อนุมัติ