วิธีตั้งค่า Blogger ให้พรีวิวบทความบน Twitter พร้อมรูปประกอบ และคำอธิบายสวยๆ

สำหรับคนที่เล่น Twitter เป็นประจำ คงสังเกตุได้ว่า ทวิทที่เราเห็นบน Timeline หรือทวิทที่เราแชร์ลิงค์ มันจะมีพรีวิว ที่มีรูปภาพประกอบ พร้อมคำอธิบายสั้นๆ

ซึ่งบล็อกนี้จะมาสอนทำให้ Blogger ของเราสามารถพรีวิวแบบนั้นได้

ตัวอย่าง

จะเห็นว่าพอเราทวิท ลิงค์ของเว็บที่ทำการใส่ Twitter Metadata มันจะพรีวิวบทความออกมาอย่างสวยงาม และหากเว็บนั้นไม่ได้ใส่ Metadata มันจะแสดงเป็นเพียงลิงค์ตัวอักษรธรรมดาๆ

โดยเราจะเรียกตัวแสดงผลบน Twitter นี้ว่า Cards มีด้วยกัน 4 รูปแบบ แต่ผมจะอธิบายแค่ 2 รูปแบบ

1. Summary Card
รูปแบบนี้จะแสดงชื่อบทความ คำอธิบาย และ thumbnail ดังตัวอย่างด้านล่าง


2. Summary Card with Large Image
รูปแบบนี้ข้อมูลจะคล้ายตัวแรก แค่รูปจะใหญ่กว่า ดังตัวอย่างด้านล่าง


เราก็สามารถเลือกได้ตามความเหมาะสมของเว็บเรา

การตั้งค่า ใน Blogger
  1. ไปที่ Theme > เลือก Edit HTML
  2. จะพบโค๊ดเยอะๆ มองหา Tag <head> และนำคำสั่งด้านล่างไปใส่ข้างล่าง <head> แล้วกด Save
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@Algobaleno' name='twitter:site'/>
<meta content='@Algobaleno' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' 
      name='twitter:description'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

พอเสร็จแล้ว ก็ไปทดสอบว่าใช้งานได้หรือเปล่าที่ Twitter Card Validate

เท่านี้เราก็สามารถทวิทเว็บเราอวดเพื่อนๆแบบชิคๆได้แล้วครับ

Referent : Twitter Cards

วิธีตั้งค่า Blogger ให้พรีวิวบทความบน Twitter พร้อมรูปประกอบ และคำอธิบายสวยๆ


Comments

Popular posts from this blog

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?

แปลง Word to PDF เนียนขั้นเทพ บรรทัดตรงแป๊ะอย่างกะจับวาง

ทำความรู้จักกับ IC 555