like button case

ปรับปรุง : 2560-10-05 (นำเข้า font จากภายนอก)

like button case

พบปัญหา
ทดสอบการใช้งาน Javascript SDK ของ Like button เป็น plug-in สำหรับ webpage ที่บริการโดย Facebook ใช้งานจริงที่ http://www.thaiall.com/handbill พบว่ามีคลิ๊ปหนึ่ง ที่ไม่แสดง Like button ตามที่ควรจะเป็น
และ
อีกกรณี ที่ http://www.thaiall.com/marry.htm หากปรับขนาดของ data-width="320" ก็จะไม่เป็นตามค่า default คือ 450px;

ปัญหาที่ 1 : ไม่แสดง Like button
clip 1 : คลิ๊ปนี้ไม่แสดง Like button
กำลังใจ - โฮป (Keesamus cover)
Youtube.com/watch?v=jxmshNNpf0A

clip 2 : คลิ๊ปนี้ หรือคลิ๊ปอื่น ๆ แสดง Like button ได้ปกติ
รักเดียว - พงษ์สิทธิ์ คำภีร์ (Keesamus Cover)
Youtube.com/watch?v=SnXAz0mQbXk

เล่าถึงปัญหา และการตรวจสอบ : การไม่แสดง Like button

เริ่มต้น .. เข้าบริการของ Like Button ที่ https://developers.facebook.com/docs/plugins/like-button
นำลิงค์ของ youtube ไปวางใน [URL เพื่อกดถูกใจ]
https://www.youtube.com/watch?v=jxmshNNpf0A
คลิ๊กที่อื่น หรือ รับรหัส จะพบว่า preview ไม่แสดงผลตามปกติ แต่ถ้านำลิงค์อื่นของ youtube.com มาใช้ ก็จะแสดงผลได้ปกติ
เรียกใช้ Developer tools ของ chrome หรือกด F12 ใน chrome แล้ว Select an element จาก icon มุมบนซ้าย แล้วไปเลือก Like button หรือ element ที่มีปัญหา
ในหน้าต่าง element คลิ๊กลงไป จะพบ iframe มีขนาด width:0px; height: 0px; ซึ่งเป็น code ที่ส่งมาจากบริการของ like button ทำให้ไม่ปรากฎอะไรเลย
ในกรณีไม่มีปัญหา iframe จะมีขนาด width: 450px; height: 24px;

ตัวอย่างปัญหา

กรณีมีปัญหา : https://www.youtube.com/watch?v=jxmshNNpf0A

กรณีไม่มีปัญหา : https://www.youtube.com/watch?v=SnXAz0mQbXk

"Imagination is more important than knowledge" - Albert Einstein

http://goo.gl/72BPC