สร้าง Open Graph Protocol ของ Facebook เชื่อมต่อกับ WordPress

25/12/2015 11:00 AM คอมพิวเตอร์ 668 views

หลังจากที่ได้เขียนบล๊อกด้วย wordpress มานานพอสมควรแล้วก็ได้แชร์เรื่องที่เขียนบน Facebook ก็พบปัญหาอยู่อย่างนึง ก็คือรูปที่แสดงจะมีขนาดแตกต่างกัน บางครั้งรูปเล็ก บางครั้งรูปใหญ่ บางครั้งไม่มีรูป เลยหาวิธีแก้จนพบว่า ต้องเพิ่ม Meta Tag เข้าไปด้วย ลองดูตัวอย่างที่ได้ http://ogp.me/

สำหรับวิธีเพิ่ม Meta Tag Open Graph Protocol ของเว็บไซต์ทั่วไปกับของ WordPress จะต่างกันอยู่เล็กน้อยตรงค่าใน content ดังตัวอย่างด้านล่างครับ ก่อนอื่นมารู้จักความหมายของแต่ละตัวก่อน

og:title – ชื่อหรือหัวข้อเว็บที่ต้องการให้แสดง
og:type – ประเภทของเว็บเช่น เป็นบทความ วิดีโอ ฯลฯ
og:image – รูปภาพตัวอย่าง ที่ต้องการให้แสดงบนหน้าเว็บ
og:url – url เว็บไซต์ของเราเช่น www.dechathon.com/travel
og:description – คำอธิบายย่อๆ บนหน้าเว็บไซต์ เพื่อให้ผู้อ่านอ่านแล้วรู้สึกสนใจ

Meta Tag บนหน้าเพจทั่วไป เป็นข้อความที่ต้องกำหนดแบบตายตัว เช่นของของเว็บแบบ static ถ้าเว็บไซต์มีหลายหน้าก็ต้องมี Meta Tag ทุกหน้า หากมีหน้าเว็บจำนวนมากก็จะต้องแก้ไขทุกหน้าเพื่อให้ค่าที่จะแสดงแตกต่างกันโดยแทรกข้อความไว้ในส่วน header ของเว็บเพจ

<meta property=”og:title” content=”The Rock” />
<meta property=”og:type” content=”video.movie” />
<meta property=”og:url” content=”http://www.imdb.com/title/tt0117500/” />
<meta property=”og:image” content=”http://ia.media-imdb.com/images/rock.jpg” />

 

Meta Tag ของ WordPress จะเปลี่ยนค่าใน content เป็น php tage ค่าจะเปลี่ยนให้อัตโนมัติในแต่ละเพจ โดยใช้คำสั่ง php ดึงข้อมูลมาและไม่ต้องแก้เหมือนวิธีด้านบน รูปภาพที่แสดงจะดึงมาจาก Featured Image ดังนั้นต้องไปเลือกรูปภาพใน Featured Image ก่อนและค่า ,‘large’ หมายถึง ต้องการให้แสดงภาพขนาดใหญ่ เพราะขณะที่เราอัพโหลดภาพขึ้น wordpress มันจะปรับรูปให้เราหลายขนาด og:image ก็จะไปดึงภาพที่มีขนาดเล็กมาแสดง ถ้าต้องการให้แสดงรูปเล็กก็สามารถลบ ,‘large’ ออกและทดสอบดูได้ครับ

ก่อนอื่นต้องไปสร้าง Appliacation ใน Facebook เพื่อเอาเลข App ID มาใช้ร่วมกับ Mata Tag ในลิ้ง https://developers.facebook.com/apps/

<meta property=”fb:app_id” content=”fb_app_id” />
<meta property=”og:url” content=”<?php the_permalink() ?>“/>
<meta property=”og:title” content=”<?php single_post_title(”); ?>” />
<meta property=”og:description” content=”<?php echo strip_tags(get_the_excerpt($post->ID)); ?>” />
<meta property=”og:type” content=”article” />
<meta property=”og:image” content=”<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),‘large’); echo $post_thumbnail[0]; ?>” />

 

เมื่อแก้ค่า Meta Tag ด้านบนแล้วนำ code ไปแทรกไว้ในไฟล์ Header ของธีมที่ใช้งานอยู่ จากนั้นทดสอบหน้าเพจของเราว่าแสดงค่าถูกต้องหรือมีค่าไหนผิดพลาดบ้าง จาก Open Graph Object Debugger ที่ลิ้ง https://developers.facebook.com/tools/debug/og/object/ จะได้ค่าทดสอบดังรูป หรือจะลองเอาเว็ยคนอื่นมาลองดูก็ได้เหมือนกัน

จากนั้นเมื่อเอา Link ไปโพสหน้า Facebook ก็จะได้ค่าดังรูปประกอบด้วยค่าต่างๆ ในรูป ได้แก่

og:title – Trip : เที่ยวสิงคโปร์…
og:image – รูปลูกโลก
og:url – DECHATHON.COM
og:description – วันนี้ทั้งวันไปที่…

เพียงเว็บไซต์ของเราที่โพสหน้า Facebook ก็เหมือนคนอื่นแล้ว…