เชื่อมต่อเว็บไซต์ของเราเข้ากับ Facebook ด้วย Open Graph Protocol และ Social Plugin
เดิมบล็อกตอนนี้มีชื่อว่า
“Facebook อนุญาตให้เปลี่ยน Open Graph objects types (og:type) ได้แล้ว” แต่ขอเปลี่ยนชื่อใหม่นะคะ จะได้ง่ายต่อการกลับมาค้นหาอีกครั้ง ^^
ก่อนจะพูดถึง op:type คงต้องเกริ่นถึง Open Graph protocol กันเสียก่อน :D
Open Graph protocol เป็นตัวที่จะช่วยเชื่อมต่อระหว่างผลิตภัณฑ์ของเรากับ Facebook สมมติว่าเราทำเว็บไซต์เกี่ยวกับดารา, ค่ายเพลง, ภาพยนตร์ หรืออะไรต่อมิอะไรก็ตาม ถ้าเราได้ลง Open Graph protocol และลง Social Plugin ต่างๆ (เช่นปุ่ม Like) ปุ๊บ เมื่อมีคนกด Like เว็บของเรา มันก็จะไปขึ้นในหน้า Feed ของคนๆ นั้นโดยทันที
![open-graph](http://faceblog.in.th/wordpress/wp-content/uploads/2010/11/open-graph.png)
ตัวอย่างเช่นในภาพ เมื่อมีคนกด Like ภาพยนตร์เรื่อง The Rock นอกจากจะไปอยู่ใน Feed ของคนๆ นั้นแล้ว ยังไปอยู่ในหน้า Info ส่วน Like and Interest ด้วย :D ถ้ามีคนกดมาดูประวัติหมอนี่ปุ๊บก็จะอ๋อออ ชอบ The Rock นี่เอ๊ง รสนิยมเข้ากับเราเรยย์ แบบนี้คุยกันได้ XD (ฮา)
(อนึ่ง เว็บที่ผูกกับ Open Graph Protocol เมื่ออยู่ใน Facebook จะเป็น Page ในรูปแบบหนึ่ง ที่สามารถกดเข้าไปดูได้ว่า มีใครร่วมกด Like หรือพูดถึงอะไรยังไงกันบ้าง เช่นแบบนี้
![20-11-2553 16-40-56](http://faceblog.in.th/wordpress/wp-content/uploads/2010/11/20-11-2553-16-40-56.png)
โดย Page นี้จะมี Admin เห็นเพียงคนเดียวเท่านั้น จะสามารถเช็ก Insight ได้ว่ามีใครมากด Like เราบ้าง)
ในส่วนของการเพิ่ม Open Graph protocol ก็ไม่ยาก เพียงแค่เราใส่โค้ดพวกนี้ลงใน head ของเรา
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>
|
โดยที่
- og:title คือชื่อเว็บที่เราจะให้แสดง
- og:type คือประเภท (ในภาพข้างล่างจะเป็น Movie ดูประเภททั้งหมดที่ Facebook อนุญาตให้ใช้ได้ที่นี่)
- og:url คือ url ของเว็บไซต์เรา
- og:image คือภาพตัวอย่าง (ดูจากรูปข้างล่างได้)
- og:site_name คือชื่อเว็บของเรา
- fb:admins จะตั้งให้ใครเป็น admin ให้ใส่ user id ของคนๆ นั้นลงไป
- og:description เป็นคำอธิบายเว็บสั้นๆ 1-2 บรรทัด
-
|