5 Cara Mudah Memasang Kartu Twitter di Situs Web Anda

Jadi tahukah Anda bagaimana di Twitter, ketika seseorang memposting tautan ke situs web mereka, Twitter membuat kotak yang memiliki gambar mini, judul, deskripsi, dan URL untuk halaman tujuan? Ini sangat umum. Itu membuat posting tautan standar lebih terlihat di garis waktu, ini menampilkan sedikit tentang tujuan tautan, dan mendorong lebih banyak interaksi pengguna.

Itu Kartu Twitter. Secara khusus, ini adalah kartu ringkasan situs web, salah satu dari beberapa jenis kartu Twitter yang dapat diintegrasikan ke dalam situs web. Apa jenis lain yang ada?

• Kartu ringkasan, seperti yang disebutkan, adalah pratinjau situs web. Ini adalah gambar dan teks khusus yang diambil dari informasi meta yang memastikan pratinjau bagus tentang apa yang akan dilihat pengguna saat mereka mengeklik tautan Anda.
• Kartu ringkasan (dengan gambar besar)… identik dengan kartu ringkasan. Sejujurnya saya tidak tahu mengapa ada perbedaan. Klik setiap tautan dan lihat tweet yang dipratinjau dan lihat apa yang saya maksud. Saya kira sebelum desain ulang terbaru Twitter mereka mungkin terlihat berbeda, tetapi hari ini semuanya tampak seperti kartu gambar besar.
• Kartu pemain tidak boleh disamakan dengan baseball atau kartu olahraga lainnya. Mereka pada dasarnya adalah kartu gambar besar, kecuali gambar itu adalah beberapa bentuk media animasi. Bergantung pada bagaimana mereka ditampilkan, itu mungkin kotak pratinjau dan deskripsi kecil yang diperluas ke media, atau hanya media itu sendiri yang siap untuk diputar. Umumnya ini adalah video yang disematkan, seperti video YouTube, meskipun webm semakin populer.
• Kartu aplikasi adalah kotak yang menarik data dari halaman toko aplikasi untuk membuat jendela promosi aplikasi yang disesuaikan. Ini menunjukkan detail penting dari aplikasi yang ditautkan dalam tweet, bersama dengan tombol CTA untuk membuat pengguna segera menginstal aplikasi.

Kartu Twitter dulu jauh lebih kompleks. Dulu ada jenis kartu khusus untuk galeri gambar, produk, dan beberapa opsi lain, tetapi Twitter telah menghapusnya. Jika Anda ingin nostalgia, Anda dapat melihat seperti apa mereka di sini, jangan terlalu terikat; Anda tidak dapat membuatnya hari ini.

Dasar-dasar Kartu Twitter

Anda hanya dapat memiliki satu jenis kartu Twitter per situs web, atau setidaknya per halaman web, jika Anda ingin menentukan kode individual untuk setiap halaman. Kebanyakan orang memilih kartu ringkasan gambar besar dasar dan meletakkan kode di header template situs mereka, sehingga muncul di setiap halaman. Beberapa situs, seperti YouTube, akan menempatkan kartu pemain di header mereka. Takeaway utama di sini adalah bahwa Anda hanya dapat memiliki satu set informasi kartu di meta data header Anda pada halaman tertentu.

Kartu cukup kuat dalam data yang dapat mereka sampaikan. Anda dapat membuat kartu secara otomatis mengetahui siapa yang membuat konten dan pemilik halaman, bahkan keduanya pada saat yang sama jika berbeda. Anda dapat menentukan media yang akan dimuat, Anda dapat menentukan nama dan kode pelacakan, dan banyak lagi. Bahkan, Anda dapat membaca halaman ini untuk mendapatkan gambaran tentang atribut yang dapat Anda gunakan untuk kartu secara khusus. Anda juga dapat mengikat atribut Open Graph untuk data yang lebih kuat.

Apa yang akan saya lakukan di sini hari ini adalah memberi tahu Anda cara menambahkan kartu Twitter ke situs Anda. Saya tidak akan membahas setiap atribut – dokumentasi Twitter cukup bagus – saya hanya akan memberi Anda ikhtisar tentang cara melakukannya untuk berbagai CMS.

Sebelum kita mulai; untuk setiap metode instalasi, Anda memerlukan validasi. Untuk memastikan Anda melakukannya dengan benar, setelah kartu diaktifkan, salin URL ke validator ini. Ini akan memberi tahu Anda apakah kartu itu benar-benar berfungsi atau tidak.

1: WordPress

WordPress mungkin merupakan platform termudah untuk mengimplementasikan kartu Twitter, karena ada begitu banyak cara berbeda untuk melakukannya, termasuk yang hampir terintegrasi.

Cara yang disarankan untuk menerapkan kartu Twitter adalah dengan menggunakan plugin Twitter resmi . Anda dapat menginstalnya seperti plugin lainnya, dan dari sana Anda dapat membuat kartu Twitter Anda secara otomatis. Ini juga memungkinkan tombol berbagi dan tweet/ikuti, penanganan tweet yang disematkan, dan kode pendek untuk pelacakan analitik. Anda dapat membaca dokumentasi di sini dan mengunduh plugin itu sendiri di sini.

Jika Anda tidak ingin menggunakan plugin Twitter resmi, atau jika Anda menggunakan WordPress.com yang dihosting, Anda dapat menggunakan Jetpack. Di Jetpack, Anda ingin menemukan bagian Berbagi dan mengonfigurasinya. Akan ada bagian Twitter, di mana Anda mengotorisasi akun Twitter Anda ke situs web Anda.

Opsi ketiga adalah menggunakan plugin JM Twitter Cards. Plugin ini, oleh Julien Maury, menambahkan kompatibilitas kartu Twitter dengan beberapa pengaturan dasar. Anda dapat memilih untuk menggunakan gambar pertama di halaman Anda daripada gambar unggulan, Anda dapat melihat pratinjau rendering kartu Twitter Anda, dan Anda dapat menyesuaikan kartu untuk setiap posting saat Anda membuat posting. Untuk mengonfigurasi plugin, navigasikan ke bilah sisi dan klik panel plugin di dasbor admin Anda. Pilih jenis kartu dan isi kotak lainnya dengan akun Twitter Anda, akun situs Anda, panjang deskripsi, dan apa pun yang ingin Anda tambahkan.

Jika tidak ada yang sesuai dengan kebutuhan Anda, atau jika Anda sudah memilikinya, WordPress SEO by Yoast juga menangani kartu Twitter. Di panel admin Anda, navigasikan ke SEO dan klik bagian Sosial. Ada tab Twitter di sana, di mana Anda dapat menambahkan nama pengguna Twitter Anda ke dalam kotak. Sayangnya, terakhir saya baca, Yoast hanya mendukung kartu ringkasan; Anda memerlukan plugin yang lebih canggih jika Anda menginginkan jenis kartu lainnya.

2: Tumblr

Tumblr adalah platform blogging yang sangat populer yang tidak disadari banyak orang telah menjadi seproduktif itu. Jaringan Tumblr lebih dari sekadar blog yang ditandai dengan .tumblr.com; Bahkan, beberapa situs besar menggunakan Tumblr sebagai arsitektur dasarnya. Setelah Anda memiliki domain khusus, itu sama seperti arsitektur back-end lainnya. Atau itu?

Faktanya adalah, arsitektur Tumblr tidak ekspansif atau dapat disesuaikan seperti sesuatu seperti WordPress. Anda harus menggunakan beberapa kode khusus untuk menerapkan kartu Twitter khusus yang disesuaikan di blog Anda. Anda dapat membaca kode dan deskripsi di baliknya di sini, dalam jawaban yang diberikan oleh Dan Leveille di Quora.

Perlu dicatat di sini bahwa kode ini diperlukan untuk menyesuaikan kartu Anda secara manual; tidak diharuskan hanya memiliki kartu ringkasan. Twitter telah memasukkan Tumblr.com ke daftar putih untuk pembuatan kartu otomatis pada publikasi tautan, jadi kecuali Anda menginginkan kartu tertentu dengan data tertentu, atau Anda menggunakan domain khusus, Anda bisa menggunakan apa yang diterapkan secara default. Saya hanya akan menggunakan kodenya jika Anda memiliki domain khusus untuk situs Tumblr Anda, atau Anda ingin data yang tidak diambil secara alami oleh Twitter.

3: Blogger

Memasang kartu Twitter di blog Blogger turun ke template Anda. Saya akan memberi Anda petunjuk umum, tetapi jika templat situs Anda terlalu bervariasi dari biasanya, Anda harus mencari tahu sendiri berdasarkan petunjuk yang saya berikan kepada Anda.

Itu selalu disarankan agar Anda membuat cadangan template Anda sebelum Anda mengutak-atiknya, untuk berjaga-jaga. Buka dasbor Anda, klik templat, dan klik tombol cadangan untuk menyimpan salinannya untuk keperluan pemulihan nanti.

Selanjutnya, klik tombol “edit HTML” di bawah live preview template blog Anda. Di dalam kode itu, jalankan pencarian untuk “<b:includable id='post' var='post'>”. Pertahankan baris itu di tempatnya, tetapi rekatkan yang berikut ini langsung di bawahnya:


<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'/>


Jelas, Anda perlu mengedit data di atas sendiri. Ubah @namaanda menjadi nama pengguna Twitter Anda, ubah www.situsanda.com menjadi URL situs Anda, dan pastikan itu akurat.

Anda tentu saja dapat menyesuaikan kode ini untuk kebutuhan Anda. Jika Anda lebih suka jenis kartu yang berbeda, ubah baris teratas dengan sesuatu selain "ringkasan" dan sesuaikan sisa kode dengan data yang Anda butuhkan.

Jika kode yang saya tempel di atas tidak berfungsi, ini adalah halaman tempat saya mendapatkannya. Anda dapat memeriksa ulang untuk memastikan saya menyalinnya dengan benar, atau Anda melakukannya, dan Anda dapat memeriksa di sana jika telah diperbarui dan posting saya tidak mencerminkan pembaruan. Omong-omong, jika tidak berhasil, beri tahu saya. Saya akan melakukan yang terbaik untuk memperbaikinya.

4: Joomla

Joomla memiliki banyak kesamaan dengan WordPress, sejauh menjadi CMS dengan penekanan pada penyesuaian melalui ekstensi daripada platform terbatas dengan peningkatan kosmetik seperti Tumblr atau Blogger. Dengan demikian, ada beberapa cara berbeda untuk menerapkan kartu Twitter menggunakan ekstensi Joomla yang berbeda.

Tweet Cards adalah salah satu ekstensi yang disukai kebanyakan orang. Ini gratis untuk diunduh dan digunakan, dan menambahkan kartu Twitter ke situs web berbasis Joomla Anda. Itu dia; tidak ada yang mewah dalam konfigurasi, tidak ada yang luar biasa dengan fungsionalitas atau implementasinya, ia hanya melakukan apa yang tertulis di kaleng.

Opsi kedua adalah ekstensi pro Open Graph dan Twitter Card Tags. Ini adalah ekstensi yang lebih kuat yang menambahkan tag untuk Twitter dan Facebook. Ini memiliki banyak opsi penyesuaian untuk memilih gambar dan data spesifik yang Anda inginkan untuk posting Anda. Integrasi Facebook dari Open Graph sangat bagus, ditambah itu menambahkan meta data ekstra untuk Twitter dan Google saat mereka mengetuk. Satu-satunya downside adalah, sebagai ekstensi pro, yang satu ini akan dikenakan biaya. Ini murah, meskipun; hanya 7 euro untuk lisensi. Anda dapat membeli dukungan ekstra jika Anda mau, tapi jujur ​​saja; ini hanya meta data, ini adalah pekerjaan salin dan tempel yang dimuliakan untuk orang yang takut kode. Anda tidak perlu dukungan.

Opsi ketiga yang saya miliki untuk Anda adalah menggunakan TEXTman, editor pos ujung depan untuk membuat dan menerbitkan artikel Anda di situs Joomla. Anda tidak perlu mengonfigurasi apa pun agar kartu Twitter berfungsi; cukup gunakan TEXTman sebagai editor Anda dan itu membawa fitur secara otomatis. Kelemahannya di sini adalah bahwa itu adalah alat pro juga, dan yang jauh lebih mahal. Karena ini adalah editor teks lengkap dan alat terkait, ini adalah lisensi besar dengan beberapa ekstensi yang ditambahkan. Anda akan dikenakan biaya $99 untuk berlangganan semuanya, atau $40 hanya untuk TEXTman itu sendiri dan lisensi dukungan dan pembaruan terbatas. Sangat mahal jika yang Anda inginkan hanyalah kartu Twitter.

Terakhir, tentu saja, Anda dapat menggunakan metode di bawah ini atau yang dijelaskan dalam posting ini untuk menerapkannya secara manual.

5: Sistem Manajemen Konten Kustom

Saya sudah memposting contoh data meta dalam kode di atas. Itu pada dasarnya adalah kode yang sama yang Anda tempelkan ke header situs Anda, terlepas dari arsitektur apa yang Anda gunakan. Sesuaikan hal-hal sesuai dengan kebutuhan situs Anda dan salin kode ke header situs Anda. Tidak masalah secara spesifik di mana itu, asalkan berada di antara tag <head> dan </head> di bagian atas situs.

Jangan lupa untuk menyesuaikan tag. Yang utama yang perlu Anda perhatikan adalah kartu, situs, pembuat, dan tag domain. Itu harus diisi dengan jenis kartu yang Anda inginkan, pegangan Twitter situs Anda dan pembuat konten, dan URL domain Anda. Kemudian validasi kartu setelah Anda menerapkan perubahan.

Jika kartu Anda masih tidak berfungsi setelah validasi, Anda harus membaca panduan pemecahan masalah Twitter. Kemungkinan ada kesalahan sederhana di suatu tempat yang dapat Anda perbaiki dalam beberapa detik.