เทคนิคการกำหนดภาพใน Thumbnail เมื่อโพสต์ Link ใน Facebook

เข้าใจว่าผู้อ่านหลายคนที่(หลง)เข้ามาอ่านบล็อกนี้ ..และใช้บริการ Facebook ด้วย คงเคยโพสต์ Link อะไรสักอย่างลงใน Wall บ้างอย่างน้อยก็ครั้งหนึ่งนะครับ  ตัวอย่างเช่นภาพด้านล่าง..

ทันทีที่ระบุ Link อะไรสักอย่างลงในการโพสต์ปกติ (หรือระบุ Link ลงในช่องระบุเฉพาะ..ตามภาพประกอบ)
Facebook จะแสดงภาพ Thumbnail ในหน้านั้นขึ้นมาอัตโนมัติ
(ยกเว้นบางกรณี เช่น ถ้าเป็น Link ของหน้าวิดีโอใน Youtube ก็จะเป็นภาพ Thumbnail ของวิดีโอโดยตรง)

ประเด็นที่ผมพบจากการ(พยายาม) detected ภาพของ Facebook เพื่อเลือกแสดงเป็นภาพเล็กๆ (Thumbnail) ใน Link ใดๆ คือ..

  • บางที..ภาพเนื้อหาหลักที่ต้องการเลือก เสือกไม่มีให้เลือกเป็น Thumbnails ซะอย่างนั้น
    (ปัญหานี้ผมพบกับที่อื่นประปรายครับ ..แต่กับบล็อกผมนี่เป็นสรณะเลย
    ส่วนหนึ่งน่าจะเป็นที่ความผิดพลาดอะไรสักอย่างของ Facebook
    แต่อีกประเด็น(กรณีผม)น่าจะเป็นเพราะการเรียกอ่านไฟล์ภาพผ่าน Server-side script (PHP) อีกทอดหนึ่งของผม..เพื่อกันการถูก Hotlink
    น่าจะเป็นเพราะ Facebook มันดันทะลึ่งมองภาพที่ว่าไม่ออก ..ก็เลยได้อย่าง-เสียอย่าง ซวยไป)
  • บางที..เราก็ต้องการภาพ Thumbnail ของหน้าเว็บหน้านั้นๆ โดยตรงเลย (Screenshot, Print Screen ฯลฯ)
    ไม่ใช่ Thumbnail ของภาพใดภาพหนึ่งในหน้านั้น
  • บางที..เราก็ต้องการเจาะจงภาพ Logo เว็บ (หรือภาพอื่นๆ) ให้แสดงใน Thumbnails Choose ด้วย
    แม้ว่าภาพนั้นจะไม่แสดงผลในหน้าเว็บเพจนั้นๆ ก็ตาม

ประเด็นที่ว่ามา ในแง่ของผู้โพสต์ Link ที่ไม่ใช่ผู้ดูแลเว็บไซต์ อาจทำได้แค่นั่งมองตาปริบๆ เท่านั้นนะครับ 
แต่ถ้าในแง่ของผู้ดูแลเว็บไซต์นั้นๆ ที่ต้องการเตรียมเว็บตัวเองให้รองรับลักษณะที่ว่า –
สองประเด็นหลังมีวิธีครับ..เพียงแต่ในประเด็นของ Screenshot ผมไม่ทราบวิธีทำ Screenshot อัตโนมัติ
คงต้องอาศัย PrtScn ด้วยตัวเองสักเล็กน้อย


 

เริ่มต้นด้วยการเตรียมภาพที่จะใช้ทำเป็น Thumbnail ซะก่อน
หากเป็นรูป Logo เว็บไซต์ ก็เตรียมรูปขนาดเหมาะสมเอาไว
(หรือหากเป็นรูป Screenshot ก็ PrtScn รูปหน้าเว็บเพจนั้นๆ ของตัวเอง..ไปจัดการในโปรแกรมตกแต่งรูป แล้ว Save เตรียมไว้เองนะครับ)
อันนี้ผมคิดว่าคงไม่ต้องลงรายละเอียดนะ.. เพราะเป็นเรื่องของการจัดการไฟล์ภาพทั่วๆ ไป

เข้าใจว่าขนาด (Dimension – กว้างxยาว) ของภาพที่เหมาะสมในการแสดงผลเป็น Thumbnail
จะมีขนาดไม่เกิน 90×90 pixel นะครับ (สังเกตุมาจากการคลิกขวาดู Properties ของภาพ Thumbnail ต่างๆ ใน Link ใดๆ)
อย่างไรก็ดี.. หากภาพขนาดใหญ่กว่าขนาดที่ว่า คงไม่เป็นประเด็น เพราะ Facebook มันคงอ่านและสร้างภาพใหม่ขึ้นมาเองอยู่แล้ว
ผมบอกเผื่อในกรณีที่ไม่ต้องการให้มีการ resample ภาพใหม่เท่านั้น
(..เช่น กรณีภาพเป็นลักษณะ Pixel Art (แบบโลโก้ตัวอย่างข้างบน) เป็นต้น)


 

ต่อมาก็..ที่หน้าเว็บเพจที่ต้องการเตรียม
ให้เพิ่ม HTML ด้านล่างเข้าไปในช่วง tag <HEAD>..</HEAD> ของหน้าเว็บเพจครับ

<link rel=”image_src” href=”URL ของไฟล์ภาพที่ต้องการให้ระบุเป็น Thumbnail (ระบุเป็น Absolute Path เลยจะดีมาก)” />

(ในกรณีของระบบเว็บบล็อกอย่าง WordPress อาจเลือกเพิ่มเข้าไปที่ไฟล์ header.php ของไฟล์ Theme ที่เว็บบล็อกนั้นใช้อยู่ครับ
จริงๆ เลือกเมนู Appearance / Editor ในระบบภายในของ WordPress ก็ได้ ..สะดวกดี)


 

เสร็จแล้วก็ลองโพสต์ Link ใน Facebook ดูครับ
(ในภาพจะเห็นว่ามัน resample ภาพ Thumbnail จนเยินเชียว ไม่เป็น Pixel ชัดๆ แบบต้นฉบับ
ตรงนี้อย่าเพิ่งตกใจไปนะครับ คงเป็นการดึงภาพต้นฉบับมาแสดงผลโดยไม่ resample ภาพจริงๆ ..ของจริงจะหลังจาก Share แล้ว)

หมายเหตุ! เข้าใจว่าในการแปะ Link แต่ละครั้ง Facebook มีการเก็บ Cache ไว้ด้วยนะครับ
ถ้าคุณเคยแปะ Link ก่อนหน้าที่จะเปลี่ยนแปลงตามข้างต้น ..อาจทำให้ผลลัพธ์เป็นแบบเดิม (ก่อนหน้า) อยู่
อาจต้องทิ้งไว้สักพัก..ผลลัพธ์ที่ต้องการให้เป็นถึงจะเกิดขึ้น
ในการทดสอบ..อาจอาศัยการยัด _GET Method พ่วงแบบมั่วๆ เข้าไปสักหนึ่งตัวเพื่อหลอกให้ Facebook คิดว่าเป็นหน้าที่ต่างกันก็ได้
เช่น http://whatsite/?p=555 ก็เป็น http://whatsite/?p=555&a


 

ถ้าไม่มีอะไรผิดพลาด
ผลลัพธ์ก็จะเป็นตามภาพ เมื่อมีคนแปะ Link ครับ 

Credit : Sovoboy.net

One thought on “เทคนิคการกำหนดภาพใน Thumbnail เมื่อโพสต์ Link ใน Facebook

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s