Cara Menerapkan Twitter Summary Card di WordPress

Rabu, 01 Mei 2013

Twitter card (kartu Twitter) memungkinkan suatu tweet yang mengandung tautan memiliki lampiran media dari tautan tersebut. Contoh yang umum adalah suatu tweet yang memiliki tautan dari Twitpic memiliki gambar/foto yang dapat langsung dibuka di Twitter. Sebelum dihapus beberapa bulan yang lalu, Instagram juga memiliki dukungan untuk Twitter card sehingga para pengguna Twitter dapat melihat gambar/foto yang ada di Instagram secara langsung dari sebuah tweet. Namun setelah dukungannya dihapus, gambar/foto yang ada di Instagram tidak dapat lagi dilihat secara langsung dari sebuah tweet di Twitter (bukan Twitter client). Twitter card juga digunakan oleh YouTube untuk menampilkan video-video yang ada di YouTube langsung di sebuah tweet.
Ada 6 jenis Twitter card yang dapat dilampirkan ke sebuah tweet yaitu; summary cardlarge image summary cardphoto cardgallery cardapp cardplayer card, dan product card. Jenis-jenis Twitter card tersebut tidak akan dijelaskan satu-persatu di sini. Hanya summary card yang akan dijelaskan. Silakan klik tautan di setiap jenis Twitter card tersebut untuk mengetahui lebih lanjut.
Kembali ke pembahasan utama, yaitu cara menerapkan Twitter summary card di WordPress. Apa sih Twitter summary card itu? Twitter summary card adalah perluasan tweet yang menampilkan judul, deskripsi, thumbnail, dan akun Twitter dari sebuah tautan websiteSummary card dapat digunakan untuk berbagai jenis konten web, mulai dari postingan blog, artikel berita, suatu produk, dan sebagainya. Screenshot di bawah ini menunjukkan tampilan dari sebuah tweet yang diperluas dari sebuah artikel di blog anashir.com ini;

Nah, langkah pertama untuk menerapkan Twitter summary card di WordPress adalah buka header.php yang ada di folder tema WordPres. Lalu tambahkan script di bawah ini sebelum </head>:
<!-- TWITTER -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@usernamesitus">
<meta name="twitter:creator" content="@usernamecreator">
<meta name="twitter:title" content="<?php wp_title("",true); ?>">
<?php
if(is_single()): ?>
<meta name="twitter:url" content="<?php echo get_permalink($post->ID); ?>">
<meta name="twitter:description" content="<?php echo get_the_excerpt($post->ID); ?>">
<?php
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
if(isset($imgsrc[0])): ?>
<meta name="twitter:image" content="<?php echo $imgsrc[0];?>">
<?php endif; ?>
<?php endif;?>
Ganti @usernamesitus dengan username Twitter situs Anda dan @usernamecreator dengan username Twitter milik Anda.
Lalu silakan buka halaman validator, pilih Summary dan pilih tab Validate & Apply. Kemudian masukkan URL dari salah satu postingan situs Anda untuk memvalidasi kode tersebut. Jika masih terdapat error silakan ganti code:
<?php echo get_the_excerpt($post->ID); ?>
dengan:
<?php setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); ?>
Jika semua sudah berwarna hijau (artinya telah valid) Anda dapat mengajukan penerapan Twitter card untuk website Anda. Twitter akan menerapkannya kurang lebih 1x24 jam sejak pengajuan (menurut pengalaman saya). Setelah diterapkan Anda akan dikirimi sebuah surel (email) yang berisi pemberitahuan bahwa Twitter card telah diterapkan. Setelah itu, siapa pun yang menulis tweet yang berisi tautan situs Anda ke Twitter, maka akan memiliki ringkasan di bawahnya.

 

Tulisan Terbaru