ก่อนหน้านี้ Twitter สามารถแชร์ข้อมูลได้เพียงแค่ Text กับ Link เท่านั่น แต่ตอนนี้ Twitter ได้มีการเพิ่มลูกเล่นให้กับตัวเองที่เรียกกันว่า Twitter card ที่เป็นรูปแบบแสดงผลในหน้า Twitter ที่สามารถแสดงรูปภาพ หรือ วิดีโอได้ ที่เหมือนๆกับ Facebooks ซึ่งวิธีก็คลายๆกัน เพียงแค่ไปเพิ่มค่าใน mata ของหน้าต่างๆเท่านั่น
ชนิดของ Card
1. Summary Card : เป็นการแสดงรายละเอียดเพิ่มเติมให้มากกว่าที่ Twitter กำหนดไว้
ตัวอย่าง
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@flickr" /> <meta name="twitter:title" content="Small Island Developing States Photo Submission" /> <meta name="twitter:description" content="View the album on Flickr." /> <meta name="twitter:image" content="xxx.jpg" />
2. Summary Card and Image : คล้ายกับแบบแรก แต่สามารถแสดงรูป พร้อมกับเนื้อหาเพิ่มเติมได้ ตัวอย่าง
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <meta name="twitter:description" content="Test"> <meta name="twitter:image" content="/wp-content/uploads/2015/10/cropped-iconutu1.png">
3. Photo Card : รูปแบบแสดงรูปภาพเป็นหลัก
ตัวอย่าง
<meta name="twitter:card" content="photo" /> <meta name="twitter:site" content="@flickr" /> <meta name="twitter:title" content="Mountain sunset" /> <meta name="twitter:image" content="xxx.jpg" /> <meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />
4. Gallery Card : รูปแบบนี้สามารถแสดงหลายๆรูป ออกมาเป็น Gallery ได้ ตัวอย่าง
<meta name="twitter:card" content="gallery" /> <meta name="twitter:site" content="@fodorstravel" /> <meta name="twitter:creator" content="@fodorstravel" /> <meta name="twitter:title" content="America's Best Small Towns"> <meta name="twitter:description" content="Test"> <meta name="twitter:url" content="http://www.fodors.com/news/photos/americas-best-small-towns" /> <meta name="twitter:image0" content="vvv.jpg"> <meta name="twitter:image1" content="xxx.jpg"> <meta name="twitter:image2" content="yyy.jpg"> <meta name="twitter:image3" content="zzz.jpg">
5. App Card : รูปแบบแสดงผลคลายๆ การแสดงผลของ App ใน Smart Phone
ตัวอย่าง
<meta name="twitter:card" content="app"> <meta name="twitter:site" content="@TwitterDev"> <meta name="twitter:description" content="Test"> <meta name="twitter:app:country" content="US"> <meta name="twitter:app:name:iphone" content="Cannonball"> <meta name="twitter:app:id:iphone" content="929750075"> <meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef"> <meta name="twitter:app:name:ipad" content="Cannonball"> <meta name="twitter:app:id:ipad" content="929750075"> <meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef"> <meta name="twitter:app:name:googleplay" content="Cannonball"> <meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball"> <meta name="twitter:app:url:googleplay" content="http://xxx/5149e249222f9e600a7540ef">
6. Player Card : เป็นรูปแบบรองรับการแสดง Video ซึ่งการเซตก็แล้วแต่ Plugin ที่เราใช้งาน
7. Product Card : เป็นรูปแบบที่เราสามารถเขียนออกมาเป็น List ที่มีหลายๆ หัวข้อได้
ตัวอย่าง
<meta name="twitter:card" content="product"> <meta name="twitter:site" content="@iHeartRadio"> <meta name="twitter:creator" content="@iHeartRadio"> <meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania"> <meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png"> <meta name="twitter:label1" content="Genre"> <meta name="twitter:data1" content="Classic Rock"> <meta name="twitter:label2" content="Location"> <meta name="twitter:data2" content="National">
ข้อมูลอ้างอิง : https://dev.twitter.com/cards/getting-started