5 วิธีง่ายๆ ในการติดตั้งการ์ด Twitter บนเว็บไซต์ของคุณ

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

นั่นคือการ์ด Twitter โดยเฉพาะอย่างยิ่ง เป็นการ์ดสรุปเว็บไซต์ ซึ่งเป็นหนึ่งในการ์ด Twitter หลายประเภทที่สามารถรวมเข้ากับเว็บไซต์ได้ มีประเภทไหนอีกบ้าง?

• การ์ดสรุปดังกล่าวเป็นการแสดงตัวอย่างเว็บไซต์ เป็นรูปภาพและข้อความที่กำหนดเองซึ่งดึงมาจากข้อมูลเมตาที่ช่วยให้แสดงตัวอย่างที่ดีว่าผู้ใช้จะเห็นอะไรเมื่อคลิกลิงก์ของคุณ
• การ์ดสรุป (ที่มีรูปภาพขนาดใหญ่) คือ... เหมือนกับการ์ดสรุป ฉันไม่รู้จริง ๆ ว่าทำไมถึงมีความแตกต่าง คลิกแต่ละลิงก์และดูทวีตที่แสดงตัวอย่างและดูว่าฉันหมายถึงอะไร ฉันคิดว่าก่อนการออกแบบใหม่ของ Twitter มันอาจจะดูแตกต่างออกไป แต่วันนี้ทุกอย่างดูเหมือนการ์ดรูปภาพขนาดใหญ่
• การ์ดผู้เล่นไม่ควรสับสนกับเบสบอลหรือการ์ดกีฬาอื่นๆ โดยพื้นฐานแล้วมันคือการ์ดรูปภาพขนาดใหญ่ ยกเว้นรูปภาพนั้นเป็นสื่ออนิเมชั่นบางรูปแบบ ขึ้นอยู่กับวิธีการแสดง พวกเขาอาจเป็นกล่องแสดงตัวอย่างและคำอธิบายขนาดเล็กที่ขยายเป็นสื่อ หรือเฉพาะสื่อที่พร้อมจะเล่น โดยทั่วไปแล้ว วิดีโอเหล่านี้เป็นวิดีโอแบบฝัง เช่น วิดีโอ YouTube แม้ว่าเว็บเอ็มจะได้รับความนิยมเพิ่มขึ้นเรื่อยๆ
• การ์ดแอปคือกล่องที่ดึงข้อมูลจากหน้าร้านแอปเพื่อสร้างหน้าต่างโปรโมตแอปที่กำหนดเอง มันแสดงรายละเอียดที่สำคัญของแอพที่เชื่อมโยงในทวีตพร้อมกับปุ่ม CTA เพื่อให้ผู้ใช้ติดตั้งแอพได้ทันที

การ์ด Twitter เคยซับซ้อนกว่านี้มาก เคยมีการ์ดบางประเภทสำหรับแกลเลอรี่ภาพ ผลิตภัณฑ์ และตัวเลือกอื่นๆ แต่ Twitter ได้ลบการ์ดเหล่านั้นออกไปแล้ว หากคุณต้องการหวนคิดถึงอดีต คุณสามารถดูสิ่งที่พวกเขาดูเหมือนได้ที่นี่ เพียงแค่อย่ายึดติดกับมันมากเกินไป คุณไม่สามารถสร้างมันได้ในวันนี้

พื้นฐานของการ์ด Twitter

คุณสามารถมีการ์ด Twitter ได้เพียงประเภทเดียวต่อเว็บไซต์ หรืออย่างน้อยก็ต่อหน้าเว็บ หากคุณต้องการระบุรหัสสำหรับแต่ละหน้า คนส่วนใหญ่เลือกการ์ดสรุปรูปภาพขนาดใหญ่พื้นฐาน และใส่โค้ดในส่วนหัวของเทมเพลตไซต์ เพื่อให้แสดงขึ้นในทุกหน้า บางไซต์ เช่น YouTube จะใส่การ์ดผู้เล่นไว้ที่ส่วนหัว ประเด็นหลักคือคุณสามารถมีข้อมูลการ์ดได้เพียงชุดเดียวในข้อมูลเมตาของส่วนหัวในหน้าที่กำหนด

การ์ดค่อนข้างแข็งแกร่งในข้อมูลที่สามารถถ่ายทอดได้ คุณสามารถให้การ์ดทราบโดยอัตโนมัติว่าใครเป็นผู้สร้างเนื้อหาและใครเป็นเจ้าของเพจ แม้ทั้งคู่จะต่างกันในเวลาเดียวกันก็ตาม คุณสามารถระบุสื่อที่จะโหลด คุณสามารถระบุชื่อและรหัสติดตาม และอื่นๆ อีกมากมาย อันที่จริง คุณสามารถอ่านหน้านี้เพื่อทำความเข้าใจเกี่ยวกับคุณลักษณะที่คุณสามารถใช้สำหรับการ์ดโดยเฉพาะ คุณยังสามารถผูกแอตทริบิวต์ Open Graph เพื่อให้ได้ข้อมูลที่มีประสิทธิภาพยิ่งขึ้น

สิ่งที่ฉันจะทำในวันนี้คือ บอกวิธีเพิ่มการ์ด Twitter ในไซต์ของคุณ ฉันจะไม่พูดถึงทุกแอตทริบิวต์ – เอกสาร Twitter นั้นดีเพียงพอ – ฉันจะให้บทสรุปเกี่ยวกับวิธีการทำ CMS ต่างๆ

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

1: WordPress

WordPress อาจเป็นแพลตฟอร์มที่ ง่ายที่สุด สำหรับการติดตั้งการ์ด Twitter เพราะมีหลายวิธีที่จะทำ รวมถึงวิธีที่เกือบจะมีอยู่แล้วภายใน

วิธีแนะนำในการใช้การ์ด Twitter คือการ ใช้ปลั๊กอิน Twitter อย่างเป็นทางการ คุณสามารถติดตั้งได้เช่นเดียวกับปลั๊กอินอื่นๆ และจากที่นั่น คุณสามารถสร้างการ์ด Twitter ของคุณโดยอัตโนมัติ นอกจากนี้ยังเปิดใช้งานปุ่มแชร์และทวีต/ติดตาม การจัดการทวีตแบบฝัง และรหัสย่อสำหรับการติดตามการวิเคราะห์ คุณสามารถอ่านเอกสารที่นี่และดาวน์โหลดปลั๊กอินได้ที่นี่

หากคุณไม่ต้องการใช้ปลั๊กอิน Twitter อย่างเป็นทางการ หรือหากคุณใช้โฮสต์บน WordPress.com คุณสามารถใช้ Jetpack ใน Jetpack คุณต้องการค้นหาส่วนการแชร์และกำหนดค่า จะมีส่วน Twitter ที่คุณอนุญาตบัญชี Twitter ของคุณไปยังเว็บไซต์ของคุณ

ตัวเลือกที่สามคือการใช้ปลั๊กอิน JM Twitter Cards ปลั๊กอินนี้โดย Julien Maury เพิ่มความเข้ากันได้กับการ์ด Twitter ด้วยการตั้งค่าพื้นฐานบางอย่าง คุณสามารถเลือกที่จะให้มันใช้ภาพแรกบนเพจของคุณแทนที่จะเป็นภาพเด่น ดูตัวอย่างการแสดงการ์ด Twitter ของคุณ และปรับแต่งการ์ดสำหรับแต่ละโพสต์เมื่อคุณสร้างโพสต์ ในการกำหนดค่าปลั๊กอิน ให้ไปที่แถบด้านข้างและคลิกแผงปลั๊กอินในแดชบอร์ดผู้ดูแลระบบของคุณ เลือกประเภทของการ์ดและกรอกช่องที่เหลือด้วยบัญชี Twitter บัญชีของเว็บไซต์ ความยาวคำอธิบาย และอื่นๆ ที่คุณต้องการเพิ่ม

หากไม่มีสิ่งใดที่ตรงกับความต้องการของคุณ หรือถ้าคุณมีอยู่แล้ว WordPress SEO โดย Yoast ก็จัดการการ์ด Twitter ด้วย ในแผงการดูแลระบบ ให้ไปที่ SEO แล้วคลิกส่วนโซเชียล มีแท็บ Twitter ซึ่งคุณสามารถเพิ่มชื่อผู้ใช้ Twitter ของคุณลงในช่องได้ น่าเสียดายที่ฉันอ่านล่าสุด Yoast รองรับเฉพาะการ์ดสรุป คุณต้องมีปลั๊กอินขั้นสูงกว่านี้หากต้องการการ์ดประเภทอื่น

2: Tumblr

Tumblr เป็นแพลตฟอร์มบล็อกที่ได้รับความนิยมอย่างน่าประหลาดใจที่หลายคนไม่ทราบว่ามีความอุดมสมบูรณ์เท่าที่ควร เครือข่าย Tumblr มีมากกว่าแค่บล็อกที่มีเครื่องหมาย .tumblr.com; อันที่จริงแล้ว เว็บไซต์ชื่อดังบางแห่งใช้ Tumblr เป็นสถาปัตยกรรมพื้นฐาน เมื่อคุณมีโดเมนที่กำหนดเองแล้ว มันก็เหมือนกับสถาปัตยกรรมส่วนหลังอื่นๆ หรือว่า?

ความจริงก็คือสถาปัตยกรรมของ Tumblr นั้นไม่ได้กว้างขวางหรือปรับแต่งได้เหมือนกับ WordPress คุณจะต้องใช้รหัสที่กำหนดเอง เพื่อใช้การ์ด Twitter ที่ปรับแต่งเฉพาะบนบล็อกของคุณ คุณสามารถอ่านโค้ดและคำอธิบายเบื้องหลังได้ที่นี่ ในคำตอบของ Dan Leveille บน Quora

เป็นที่น่าสังเกตว่ารหัสนี้จำเป็นสำหรับการปรับแต่งการ์ดของคุณด้วยตนเอง ไม่จำเป็นต้องมีการ์ดสรุป Twitter ได้อนุญาต Tumblr.com สำหรับการสร้างการ์ดอัตโนมัติในการเผยแพร่ลิงก์ ดังนั้นหากคุณไม่ต้องการการ์ดเฉพาะที่มีข้อมูลเฉพาะ หรือคุณกำลังใช้โดเมนที่กำหนดเอง คุณสามารถใช้สิ่งที่ถูกนำไปใช้โดยค่าเริ่มต้นได้ ฉันจะใช้รหัสของเขาถ้าคุณมีโดเมนที่กำหนดเองสำหรับไซต์ Tumblr ของคุณหรือคุณต้องการข้อมูลที่ Twitter ไม่ได้รับตามธรรมชาติ

3: บล็อกเกอร์

การติดตั้งการ์ด Twitter ในบล็อกของ Blogger จะส่งผลต่อเทมเพลตของคุณ ฉันจะให้คำแนะนำทั่วไปแก่คุณ แต่ถ้าเทมเพลตไซต์ของคุณแตกต่างจากปกติมากเกินไป คุณจะต้องคิดเองตามเงื่อนงำที่ฉันให้คุณ

ขอแนะนำให้คุณสำรองแม่แบบของคุณไว้เสมอก่อนที่จะเข้าไปยุ่งเกี่ยวกับแม่แบบ เผื่อในกรณีที่ ไปที่แดชบอร์ดของคุณ คลิกที่เทมเพลต และคลิกที่ปุ่มสำรองเพื่อบันทึกสำเนาเพื่อการกู้คืนในภายหลัง

ถัดไป ให้คลิกปุ่ม "แก้ไข HTML" ด้านล่างตัวอย่างสดของเทมเพลตบล็อกของคุณ ภายในโค้ดนั้น ให้ค้นหา “<b:includable id='post' var='post'>" เก็บบรรทัดนั้นไว้ที่เดิม แต่ วางสิ่งต่อไปนี้ไว้ด้านล่างโดยตรง:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


แน่นอน คุณจะต้อง แก้ไขข้อมูลที่อยู่เหนือ ตัวคุณเอง เปลี่ยน @yourname เป็นชื่อผู้ใช้ Twitter ของคุณ เปลี่ยน www.yoursite.com เป็น URL ของไซต์ และตรวจสอบให้แน่ใจว่าถูกต้อง

แน่นอน คุณสามารถปรับแต่งโค้ดนี้ตามความต้องการของคุณได้ หากคุณต้องการการ์ดประเภทอื่น ให้เปลี่ยนบรรทัดบนสุดด้วยอย่างอื่นที่ไม่ใช่ "สรุป" และปรับโค้ดที่เหลือให้เข้ากับข้อมูลที่คุณต้องการ

ในกรณีที่โค้ดที่ฉันวางด้านบนใช้ไม่ได้ แสดงว่านี่คือหน้าที่ฉันได้มา คุณสามารถตรวจสอบอีกครั้งเพื่อให้แน่ใจว่าฉันได้คัดลอกอย่างถูกต้องหรือว่าคุณได้คัดลอกไว้ และคุณสามารถตรวจสอบได้ในกรณีที่มีการอัปเดตและโพสต์ของฉันไม่แสดงถึงการอัปเดต พูดถึงถ้าไม่ได้ผลก็บอกฉัน ฉันจะพยายามแก้ไขให้ดีที่สุด

4: Joomla

Joomla มีความเหมือนกันหลายอย่างใน WordPress ตราบใดที่เป็น CMS โดยเน้นที่การปรับแต่งผ่านส่วนขยาย แทนที่จะเป็นแพลตฟอร์มที่จำกัดพร้อมการปรับปรุงด้านความสวยงาม เช่น Tumblr หรือ Blogger ด้วยเหตุนี้ คุณจึงสามารถใช้การ์ด Twitter โดยใช้ ส่วนขยาย Joomla ที่แตกต่างกันได้หลายวิธี

การ์ดทวีตเป็นส่วนเสริมที่คนส่วนใหญ่น่าจะชอบ ดาวน์โหลดและใช้งานได้ฟรี และเพิ่มการ์ด Twitter ลงในเว็บไซต์ที่ใช้ Joomla แค่นั้นแหละ; ไม่มีอะไรพิเศษในการกำหนดค่า ไม่มีอะไรพิเศษเกี่ยวกับฟังก์ชันหรือการใช้งาน มันแค่ทำตามที่เขียนไว้ในกระป๋องเท่านั้น

ตัวเลือกที่สองคือส่วนขยายโปร Open Graph และแท็กการ์ด Twitter เป็นส่วนขยายที่แข็งแกร่งกว่าที่เพิ่มแท็กสำหรับทั้ง Twitter และ Facebook มีตัวเลือกการปรับแต่งมากมายให้เลือกรูปภาพและข้อมูลเฉพาะที่คุณต้องการสำหรับโพสต์ของคุณ การรวม Facebook ของ Open Graph นั้นยอดเยี่ยม แถมยังเพิ่มข้อมูลเมตาเพิ่มเติมสำหรับทั้ง Twitter และ Google เมื่อพวกเขาเข้ามา ข้อเสียเพียงอย่างเดียวคือ ในฐานะส่วนขยายแบบมืออาชีพ คุณจะต้องเสียค่าใช้จ่าย ราคาถูกแม้ว่า; เพียง 7 ยูโรสำหรับใบอนุญาต คุณสามารถซื้อการสนับสนุนเพิ่มเติมได้หากต้องการ แต่บอกตามตรง นี่เป็นเพียงข้อมูลเมตา มันเป็นงานคัดลอกและวางที่น่ายกย่องสำหรับผู้ที่กลัวโค้ด คุณไม่จำเป็นต้องได้รับการสนับสนุน

ตัวเลือกที่สามที่ฉันมีให้คุณคือการใช้ TEXTman ซึ่งเป็นเครื่องมือแก้ไขโพสต์ส่วนหน้าสำหรับการสร้างและเผยแพร่บทความของคุณบนไซต์ Joomla คุณไม่จำเป็นต้องกำหนดค่าใดๆ เพื่อให้การ์ด Twitter ทำงานได้ เพียงใช้ TEXTman เป็นเครื่องมือแก้ไขและนำคุณสมบัติมาใช้โดยอัตโนมัติ ข้อเสียคือเป็นเครื่องมือระดับมืออาชีพและมีราคาแพงกว่ามาก เนื่องจากเป็นโปรแกรมแก้ไขข้อความทั้งหมดและเครื่องมือที่เกี่ยวข้อง จึงเป็นสิทธิ์ใช้งานขนาดใหญ่ที่เพิ่มส่วนขยายหลายรายการ มีค่าใช้จ่าย $99 สำหรับการสมัครสมาชิกพร้อมทุกอย่าง หรือ 40 ดอลลาร์สำหรับ TEXTman เอง และการสนับสนุนที่จำกัดและใบอนุญาตอัปเดต แพงมากถ้าคุณต้องการแค่การ์ด Twitter

สุดท้าย คุณสามารถใช้วิธีการด้านล่างหรืออธิบายไว้ในโพสต์นี้เพื่อดำเนินการด้วยตนเอง

5: ระบบจัดการเนื้อหาแบบกำหนดเอง

ฉันได้โพสต์ตัวอย่างข้อมูลเมตาในโค้ดด้านบนแล้ว นั่นคือรหัสเดียวกันกับที่คุณวางลงในส่วนหัวของไซต์ของคุณ ไม่ว่าคุณจะใช้สถาปัตยกรรมแบบใด ปรับแต่งสิ่งต่างๆ ตามความต้องการของไซต์ของคุณและคัดลอกโค้ดลงในส่วนหัวของไซต์ ไม่สำคัญว่าจะอยู่ที่ใด ตราบใดที่มันอยู่ระหว่างแท็ก <head> และ </head> ที่ด้านบนของไซต์

อย่าลืมปรับแต่งแท็ก สิ่งสำคัญที่คุณต้องใส่ใจคือการ์ด ไซต์ ผู้สร้าง และแท็กโดเมน ควรกรอกประเภทการ์ดที่คุณต้องการ ตัวจัดการ Twitter ของไซต์ของคุณและของผู้สร้างเนื้อหา และ URL ของโดเมนของคุณ จากนั้นให้ตรวจสอบความถูกต้องของบัตรเมื่อคุณได้ทำการเปลี่ยนแปลงแล้ว

หากบัตรของคุณยังคงใช้งานไม่ได้หลังจากการตรวจสอบความถูกต้อง คุณควรอ่านคู่มือการแก้ไขปัญหาของ Twitter มีโอกาสเกิดข้อผิดพลาดง่ายๆ ที่คุณสามารถแก้ไขได้ภายในไม่กี่วินาที