Home > Facebook, Tip & Trick > เชื่อมต่อเว็บกับ Facebook ด้วย Open Graph protocol

เชื่อมต่อเว็บกับ Facebook ด้วย Open Graph protocol

Open Graph protocol ถูกสร้างขึ้นเพื่อใช้กำหนดข้อมูลที่เราต้องการแสดง ในหน้า facebook เวลาที่มีคนกด Like หรือนำลิ้งค์ของเว็บเราไปใส่ comment หรือ wall ยกตัวอย่างเช่น เวลาที่คุณนำลิ้งค์ไปโพสต์ ข้อมูลของหน้าเพจนั้นจะถูกดึงมาแสดงด้วย มี title, short description, thumbnail



ตัวข้อมูลนั้น facebook จะดึงมาจาก Tag <title> ,<meta description>, <img> ส่วนของ title มักไม่ค่อยมีปัญหา หน้าเว็บส่วนใหญ่มี title หรือ ไม่ก็ <H1> อยู่แล้ว ถ้าเว็บคุณไม่มี รีบทำด่วนครับ แต่ตัว ,<meta description> บางหน้าอาจจะไม่มี facebook จะวิ่งไปดึงข้อมูลจากแท็ก <p> ในหน้านั้นแทน ถ้าใครใส่ข้อมูลโดยไม่ได้ใช้ แท็ก <p> ก็รีบเติมด่วนครับ และที่เป็นปัญหาที่สุดคือรูปครับ ในหน้าเว็บนึงมีรูปเยอะแยะ จะรู้ได้ไงว่าเราอยากได้รูปไหน facebook ก็จะดึงรูปจากแท็ก <img> มาทั้งหมดเลย แล้วให้คุณกดเลือกเอง ถ้าไม่เลือก รูปแรกก็มักจะถูกแสดงผล

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

กล่อง Recommendations ที่แสดงลิ้งค์ของเว็บเราที่คนเอาไปแชร์ แสดงรูปผิด

ดังนั้น เรามากำหนด ข้อมูลให้ facebook กันเลย ดีกว่า หากมีใครเอาลิ้งค์ของเราไปแชร์ที่ไหน จะได้แสดงผลอย่างที่เราต้องการ

อันดับแรก เพิ่มส่วนนี้เข้าไปในหน้าเพจของเรา

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

จากนั้น กำหนดข้อมูลในส่วน <head> ดังนี้


  <head>
    <meta property="og:title" content="......"/>
    <meta property="og:type" content="......"/>
    <meta property="og:url" content="......"/>
    <meta property="og:image" content="......"/>
    <meta property="og:site_name" content="......"/>
    <meta property="fb:admins" content="USER_ID"/>
OR <meta property="fb:app_id" content="APP_ID"/>
    <meta property="og:description" content="......"/>
  </head>

โดยที่แต่ละอันก็เป็นตัวกำหนดข้อมูล

  • og:title – หัวข้อเรื่อง
  • og:type – ประเภทของลิ้งค์ เช่น product, restaurant ใส่คำว่าอะไรได้บ้างดูที่นี่.
  • og:image -URL ของรูปที่ต้องการ รูปจะต้องมีขนาดอย่างน้อย 50x50px หรือใหญ่กว่า และมีอัตราส่วนสูงสุด คือ 3:1 ใช้ได้ทั้ง PNG, JPEG และ GIF ตัวog:image ใส่เพิ่มได้หลายอัน ถ้าคุณต้องการจะมีรูปไว้เลือกหลายๆรูป
  • og:url – ลิ้งค์ที่ต้องการ
  • og:site_name – ชื่อเว็บไซต์ของคุณที่อ่านได้สะดวก
  • fb:admins หรือ fb:app_id – ใส่ Facebook user IDs หรือ a Facebook Platform application ID จะใส่อันใดอันหนึ่ง หรือ ทั้ง 2 อันก็ได้
  • og:description – คำบรรยายประมาณ 1-2 บรรทัด

เพียงเท่านี้ ข้อมูลสินค้าและบริการของคุณก็จะไม่พลาดการสื่อสารอีกต่อไป

ถาม : แล้วลิ้งค์เก่าๆ ที่ facebook เคยแสดงรูปและข้อมูลผิดเพี้ยน ทำอย่างไร กำหนด meta แล้วก็ยังไม่หาย
ตอบ : หลังจากกำหนดข้อมูล meta ต่างๆแล้ว ให้นำลิ้งค์ไป Debug ที่หน้านี้ http://developers.facebook.com/tools/debug facebook จะตรวจสอบความถูกต้อง และอัพเดทข้อมูลให้ทันที

นอกจากนี้ยังมีแท็กอื่นให้ใส่อีกมากมาย เช่น ถ้าเว็บของคุณเป็นร้านอาหาร ก็สามารถใส่ข้อมูล ตำแหน่งที่ตั้ง og:latitude ได้ หรือถ้าเป็นเพจของเพลง ก็สามารถใส่ og:audio:artist ได้ ลองศึกษาดูตามความเหมาะสมครับ ตามลิ้งค์ด้านล่างนี้เลย

ข้อมูลเพิ่มเติม
http://developers.facebook.com/docs/opengraph/

ขอบคุณภาพประกอบจาก
http://www.facebook.com/toysmile
http://www.toysmile.com/

Related Articles


Share
Categories: Facebook, Tip & Trick
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. November 9th, 2011 at 12:14 | #1

    ลองใช้ดูแล้วครับ เจ๋งมากเลย
    เพราะลิงค์แบบนี้ใน fb มันค่อนข้างดูน่าเชื่อถือ น่ากดมาก ๆ
    พอเราสามารถกำหนดการแสดงผลแบบนี้ได้เลยทำให้คนกดลิ้งค์เยอะแยะเลย

    ขอบคุณสำหรับบทความดี ๆ นะครับ

  2. September 8th, 2012 at 11:34 | #2

    ขอบคุณสำหรับคำแนะนำครับ

  1. September 15th, 2012 at 14:49 | #1