ปัญหา
เวลา click share article บน zendesk guide ด้วยปุ่ม facebook button ภาพที่ปรากฏบน facebook ไม่แสดงภาพของ article นั้น ๆ
ทางแก้ปัญหา
วิธีถาวร คือ ต้องทำ API นำ article ไปแสดงที่เว็บอื่น ที่ไม่ใช่ zendesk guide
วิธีชั่วคราว ต้องทำทุกครั้งก่อนคลิ๊ก share facebook
ให้ไป upload ภาพที่ต้องการแสดงเวลา share แทนภาพ logo ใน zendesk guide
แล้วลอง share article ตามปกติ ถ้าภาพที่ share ไม่เป็นไปตามภาพ ที่ upload เข้ามา ให้ทำการ refresh facebook data ที่ https://developers.facebook.com/tools/debug/
ปล. เมื่อแชร์เสร็จแล้ว อย่าลืม เปลี่ยน logo กลับมาเป็น logo ของ netway อย่างเดิม (เวลาคนอื่น แชร์ article นี้ facebook จะยังคงใช้ภาพเดิมที่ facebook เคยเห็นเสมอ)
สาเหตุของปัญหา
Facebook ใช้ระบบที่เรียกว่า Open Graph โดยทำการ look up ค่า <meta:og .....> ที่ปรากฏบนเว็บเพจ เพื่อใช้ประกอบเวลามีการ share web page เกิดขึ้น รายละเอียดของ open graph เพิ่มเติมดูที่ https://blog.kissmetrics.com/open-graph-meta-tags/
Zendesk guide รองรับ Open Graph สำหรับ article ถ้าเรา view HTML source code แต่ละหน้า จะเห็นส่วน meta og ที่แตกต่างกันในแต่ละ article ตามตัวอย่างด้านล่าง ยกเว้น รูปประกอบการแชร์ ณ ตอนนี้ ใช้ logo มาประกอบ
<meta property="og:image" content="http://p13.zdassets.com/hc/assets/logo.png" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Netway Communication" />
<meta property="og:title" content="การ share zendesk article ไปยัง facebook ให้เห็นภาพบน article" />
<meta property="og:description" content="ปัญหา เวลา click share article บน zendkes guide ด้วยปุ่ม facebook button ภาพที่ปรากฏบน facebook ไม่แสดงภาพของ article นั้น ๆ..." />
ปัญหาของ Open Graph ที่มักเจอบ่อย ๆ คือ
- Facebook มีการ cache ไว้ การเปลี่ยนแปลงใด ๆ บนเว็บเพจ จะไม่มีผล วิธีที่จะทำ clear cache ของ facebook คือ ให้ทำผ่าน https://developers.facebook.com/tools/debug/ facebook จะ clear cache ให้
- ปัญหาของ Dynamic content ที่ URL เดียวกัน อันนี้ต้องหาทางตั้ง URL ที่ต่างกัน ไม่มีทางอื่น
- facebook สนใจแต่ค่าใน meta:og ที่อยู่ใน <head>....</head> เท่านั้น และไม่สามารถใช้ JavaScript ในการ control ได้
- เว็บที่ใช้ Client side dynamic content บางประเภทมีปัญหา แนวทางแก้ไข ต้อง serve content ที่แตกต่างกันระหว่างเว็บปกติ และ facebook bot https://www.michaelbromley.co.uk/blog/enable-rich-social-sharing-in-your-angularjs-app/
AFFILIATE WEBSITES
