เชื่อมต่อเว็บไซต์ของเราเข้ากับ 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 ของคนๆ นั้นโดยทันที

ตัวอย่างเช่นในภาพ เมื่อมีคนกด Like ภาพยนตร์เรื่อง The Rock นอกจากจะไปอยู่ใน Feed ของคนๆ นั้นแล้ว ยังไปอยู่ในหน้า Info ส่วน Like and Interest ด้วย :D ถ้ามีคนกดมาดูประวัติหมอนี่ปุ๊บก็จะอ๋อออ ชอบ The Rock นี่เอ๊ง รสนิยมเข้ากับเราเรยย์ แบบนี้คุยกันได้ XD (ฮา)

(อนึ่ง เว็บที่ผูกกับ Open Graph Protocol เมื่ออยู่ใน Facebook จะเป็น Page ในรูปแบบหนึ่ง ที่สามารถกดเข้าไปดูได้ว่า มีใครร่วมกด Like หรือพูดถึงอะไรยังไงกันบ้าง เช่นแบบนี้

โดย 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 บรรทัด

หลังจากนั้นเมื่อเราติดปุ่ม Like ลงในส่วนใดๆ ของเว็บไซต์ มันจะผูกเกี่ยวกับเว็บเรา ตาม Open Graph protocol ที่เราได้ตั้งค่าเอาไว้แล้ว :D
การติดปุ่ม Like ก็ไม่ยาก เข้าไปเอา Code ได้ที่ Like Button เลือกรูปแบบปุ่ม Like ที่เราต้องการ กรอกเว็บไซต์แล้วเอาโค้ดมาแปะไว้ในเว็บตามจุดที่ต้องการโลด

มาว่ากันต่อในส่วนของ Open Graph วันนี้ Facebook ได้อนุญาตให้เปลี่ยน op:type กันได้แล้ว
แต่ต้องเป็นเว็บที่มีคนกด Like น้อยกว่า 10,000 Likes นะ
ของเดิมที่ใครใช้ประเภทแบบไหนอยู่ อยากจะเปลี่ยนแปลงก็เข้าไปเปลี่ยนได้เลยค่ะ ^^

หมายเหตุ: เอนทรี่นี้จะกลับมาเปลี่ยนชื่อเป็น Open Graph protocol ในภายหลัง

ที่มา – Developer Blog
Share.

About Author

I come from B612 star, nerd, greedy, moody, lazy, Facebook Development, social Networking. almost Blog in Thai but English OK. ^^

Comments

11 Comments

  1. Pingback: Tweets that mention Facebook อนุญาตให้เปลี่ยน Open Graph objects types (og:type) ได้แล้ว – Faceblog -- Topsy.com

  2. Pingback: [Dev] เพิ่ม Migration ใน Apps, สามารถใช้ Opengraph กับคลิปภาพหรือคลิปเสียงได้แล้ว [Ext.Link] – Faceblog

  3. Pingback: [howto] ทำหน้าจัดการคอมเมนต์ที่มาจาก Facebook Social Plugin – Faceblog

  4. Pingback: Facebook vs Google ศึกนี้ ใครจะอยู่ ใครจะไป? – Faceblog

  5. Pingback: Content ที่เรากด Like ปรากฎเป็น Full Feed เหมือน Share แล้ว – Faceblog.in.th

  6. Pingback: [Social Plugins] เชื่อมเว็บเรากับ Facebook ด้วยระบบ Comments ใหม่สุดเมพ! – Faceblog.in.th

  7. Pingback: [Dev] Facebook อนุญาตให้เล่นคลิปวิดีโอใน News Feed แล้ว – Faceblog.in.th

  8. Pingback: [Like Button] คอมเมนต์หลังกดปุ่ม Like มี Preview ให้ดูก่อนโพสต์ด้วย – Faceblog.in.th

  9. Pingback: [howto] Facebook บนบล็อก – Faceblog.in.th

  10. Pingback: Facebook Marketing คืออะไรนะ? | Faceblog.in.th

  11. Pingback: [WordPress][Howto] เชื่อม Facebook เข้ากับเว็บไซต์ด้วย “Open Graph Tag” | Faceblog.in.th