Facebook Open Graph Application

การสร้าง Facebook Application โดยใช้ Open Graph จะช่วยให้เราสามารถใช้งานความสามารถต่างๆบน Facebook Platform ได้ อาทิเช่น Timeline, News Feed และ Ticker สำหรับส่วนประกอบหลักที่สำคัญในการพัฒนา Open Graph Application คือ Actions และ Objects

Actions คือสิ่งที่ User สามารถกระทำกับ Application (เป็น Verb) ส่วน Objects คือวัตถุที่ถูกกระทำโดย User (เป็น Noun) User สามารถ Connect กับ Object ใน Application ได้โดยการกดปุ่ม Like (Like Action) นอกจากนั้นเรายังสามารถสร้าง Custom Actions และ Objects ขึ้นมาเองได้โดยเข้าไปกำหนดใน App Dashboard ยกตัวอย่างเช่น Cooking Application อาจจะสร้าง Object Type ที่ชื่อว่า "Recipe" และ "Menu" และสร้าง Action Type ที่มีชื่อว่า "Cook" เป็นต้น

เมื่อเราได้กำหนด Action Type และ Object Type ใน App Dashboard เสร็จเรียบร้อย ขั้นตอนต่อไปเราจะต้อง create และ publish Object ของเราบน Open Graph เราสามารถสร้าง Open Graph Object ขึ้นมาจาก Web Page โดยการใส่ meta tag (ที่กำหนดไว้ใน Open Graph Protocol) ซึ่ง meta tag

เมื่อ User มีการ take action บน Application ของเรา สิ่งที่จะเกิดขึ้นก็คือ Application จะเรียกใช้งาน Graph API เพื่อสร้าง Connection ระหว่าง User และ Object โดยการ publish New Instance ของ Action และ Object ซึ่งทั้งหมดนี้เกิดขึ้นโดยการสร้าง HTTP POST request ไปที่ me/: พร้อมกับส่ง URL ของ Object ไปด้วย จากนั้น Facebook ก็จะทำการ Crawl ไปยัง URL ที่เป็นตัวแทนของ Object ดังกล่าว เพื่ออ่าน meta data และจะทำการสร้าง connection ระหว่าง user และ object ตาม Action ที่กำหนด

Diagram แสดงการทำงานเมื่อ User มีการ take Action บน Application

เมื่อกระบวนการ POST เสร็จสิ้นสมบูรณ์ Open Graph Action ดังกล่าวก็จะไปปรากฎอยู่ในทุกๆ Social Channel ได้แก่ News Feed, Ticker และ Timeline

แหล่งที่มา: http://developers.facebook.com/docs/opengraph/keyconcepts/

Facebook Open Graph Protocol

การใช้งาน Open Graph Protocol จะทำให้เราสามารถเปลี่ยน Web Page ของเราให้กลายเป็น Object หนึ่งใน Social Graph ซึ่งจะมีความสามารถต่างๆเหมือนกับ Facebook Page บน Facebook นั่นหมายความว่าถ้าหาก User กดปุ่ม Like บน Web Page ก็จะมีเกิด Connection ระหว่าง User กับ Web Page และ Web Page ของเราจะถูกนำไปแสดงไว้ในส่วนของ "Likes and Interests" ในหน้า User Profile นอกจากนั้นเรายังสามารถ publish update ไปยัง User ที่กดปุ่ม Like Web Page ของเราไว้ได้อีกด้วย สำหรับวิธีในการเปลี่ยน Web Page ของเราให้กลายเป็น Graph Object เราจะใช้การเพิ่ม meta tag เข้าไปใน Web Page สำหรับ meta tag ที่จำเป็นต้องใส่ มีดังต่อไปนี้

og:title - เป็นชื่อของ Object ที่ปรากฎบน Social Graph ยกตัวอย่างเช่น "The Rock"
og:type - ชนิดของ Object ยกตัวอย่างเช่น "video.movie"
og:image - URL ของรูปที่ใช้แทน Object บน Social Graph
og:url - URL ของ Object (ซึ่งจะถูกนำไปใช้เป็น ID บน Social Graph)

ตัวอย่างการใช้งาน Open Graph ของภาพยนตร์เรื่อง The Rock บน IMDB

สำหรับ meta tag อื่นๆ (เป็น optional แต่ควรใส่) ได้แก่

og:audio - URL สำหรับ Audio File ที่เกี่ยวกับ Object
og:description - ข้อมูลสั้นๆที่อธิบายเกี่ยวกับ Object
og:determiner - คำที่ใช้แสดงนำหน้าชื่อของ Object (อย่างเช่น a, an, the,"",auto)
og:locale - ค่า locale ประจำ Object นั้นๆ ค่า default จะเป็น en_US
og:video - URL สำหรบ Video File ที่เกี่ยวกับ Object

สำหรับ Properties บางตัว เราสามารถกำหนด Extra Metadata เข้าไปได้อีก ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Extra Metadata ของ Image Property

สำหรับในกรณีที่ property นั้น สามารถมีได้หลาย value เราสามารถกำหนดโดยใช้ meta tag เดิม (แต่เปลี่ยน value) ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Property ที่มีได้หลาย Value

สำหรับการตรวจสอบว่าเราใส่ Property ได้ถูกต้องตาม Open Graph Protocol หรือไม่นั้น เราสามารถใช้ Object Debugger ที่ Facebook เตรียมไว้ให้ โดยเข้าไปที่ http://developers.facebook.com/tools/debug แล้วใส่ URL ของ Web Page เข้าไป จากนั้น Debugger ก็จะทำการตรวจสอบ Web Page ตาม URL ที่เราใส่เข้าไป แล้วก็จะรายงานผลออกมาให้เราเห็นครับ

แหล่งที่มา: http://ogp.me/