Anda Ingin menjual produk digital atau ingin menjadi affiliate marketer?

KLIK DI SINI UNTUK SELENGKAPNYA!

Mau Tahu Bagaimana Cara Melewati 1 Tahun Pertama Anda di Dunia Internet Marketing?

KLIK DI SINI SEKARANG!

Bisnis Online

Cara Memasukkan Twitter Card di Blog WordPress

by on 27/11/2012

Ini ada artikel blogger tamu oleh Syaiful Bahri. Jika Anda ingin menjadi blogger tamu di blog ini, silahkan cek ketentuan submit artikel saya.

Tutorial ini menjelaskan bagaimana menggunakan Twitter Card di blog Anda. Jika Anda ingin menerapkannya di blog Anda, pastikan Anda membackup-nya terlebih dahulu. Hasil akhir dari tutorial ini akan terlihat seperti ini:

twitter-card

Kenapa Menggunakan Twitter Card

Apa itu twitter card? (baca juga dokumentasinya). Seperti yang Anda lihat di gambar, dengan menggunakan Twitter Card, tweet yang berisi link blog atau website Anda akan berbeda dengan tweet biasa. Tweet tersebut memiliki tanda [Lihat Ringkasan]. Kemudian jika diklik akan keluar ringkasan artikel beserta gambar di sampingnya.

twitter-card-actions

Sebenarnya fitur ini sudah diumumkan oleh pihak Twitter di bulan Juni 2012. Tapi saya baru mengetahuinya bulan lalu, karena penasaran dengan tweet orang lain yang menggunakannya. Contohnya: Gizmodo, Lifehacker, dll.

Fitur yang dikembangkan oleh tim developer Twitter ini hampir sama dengan Facebook Opengraph. Yang memungkinkan pemilik website menampilkan artikelnya yang dishare atau dilike di Facebook terlihat lebih menarik. Saya juga menggunakannya di blog pribadi saya dan artikel saya yang berisi video, ternyata bisa ditonton dari share artikel tersebut.

Jadi, intinya memakai Twitter Card akan membantu strategi social media Anda. Sejak saya memakainya, traffik blog saya dari Twitter meningkat.

Anda juga bisa menggunakan Twitter Card bersamaan dengan Facebook Opengraph. Tapi sekarang saya akan fokus dengan tujuan artikel ini ditulis. Barangkali lain waktu saya akan membahas Facebook Opengraph.

Bagaimana Memasang Twitter Card?

Sebenarnya ada banyak cara mengimplementasikannya. Prinsipnya Anda harus memasukkan meta data yang diperlukan di tag <head> website Anda dan sebelum tag </head>. Anda tidak bisa memasukkan meta data itu di footer. Tenang saja, itu tidak akan menurunkan kecepatan loading blog Anda.

Jika Anda menggunakan WordPress, maka berbahagialah! Sangat gampang mengimplementasikannya. Meski pun begitu, saya akan membimbing Anda pelan-pelan. Jadi tetap duduk dengan tenang. Sebelumnya mari kita pelajari struktur meta datanya.

<meta name=”twitter:card” content=”summary”> <!– Card type: summary, photo or video player !–>
<meta name=”twitter:site” content=”@pengunjungblog”> <!– Twitter ID Pemilik Blog !–>
<meta name=”twitter:creator” content=”@pengunjungblog”> <!– Twitter ID Penulis !–>

Jika Anda telah menggunakan Facebook Opengraph, maka Anda hanya harus menambah tag tersebut. Dan spider Twitter akan mengambil data lain dari tag Opengraph yang Anda pasang. Terlihat mudah, bukan? Jika Anda tidak memasang Opengraph, maka tag di bawah ini juga harus Anda masukkan.

<meta name=”twitter:url” content=”http://example.com”> <!– URL Kontent !–>
<meta name=”twitter:title” content=”Example Post”> <!– Judul Konten !–>
<meta name=”twitter:description”content=”This is an example post”> <!– Deskripsi singkat konten !–>
<meta name=”twitter:image” content=”http://example.com/image.png”> <!– URL gambar yang ada di konten tersebu !–>
<meta name=”twitter:image:width” content=”400″> <!– Lebar Gambar !–>
<meta name=”twitter:image:height” content=”300″> <!– Tinggi Gambar !–>

Kini Anda sudah tahu struktur meta datanya. Jika Anda sudah familiar dengan hook di WordPress, maka Anda sudah bisa mengira-ngira bagaimana mengimplementasikannya. Seperti yang sudah saya katakan, ada banyak cara memasukkan meta data Twitter Card di WordPress. Mari kita lihat satu per satu.

Cara I: Menggunakan Functions.php

Cara ini gampang diimplementasikan, cukup buka file funcitons.php theme Anda kemudian copy-paste kode berikut. Jika theme yang Anda pakai tidak memiliki file itu, maka buatlah sendiri file php dan beri nama functions.

Jika sudah dibuka maka copy-paste kode ini:

//Add Twitter Cards Meta Data

function pengunjungblog_add_twittercard()  {
if  (is_single() || is_page())  {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb)  {
$twitter_thumb = ‘http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75′;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:url” content=”<?php echo $twitter_url; ?>” />
<meta name=”twitter:title” content=”<?php echo $twitter_title; ?>” />
<meta name=”twitter:description” content=”<?php echo $twitter_desc; ?>” />
<meta name=”twitter:image” content=”<?php echo $twitter_thumb; ?>” />
<meta name=”twitter:site” content=”@pengunjungblog” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}  }
add_action( ‘wp_head’,  ’pengunjungblog_add_twittercard’ );

Cara II: Mengedit header.php

Meski pun cara ini tidak saya suka, karena di sampaing repot jika theme yang dipakai update hilanglah kerja keras Anda. Tapi saya tampilkan di sini, dengan alasan tutorial/education. Jadi buka file header.php Anda dan masukkan kode ini sebelum tag.

<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = ‘http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75′;
}
$twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
?>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:url” content=”<?php echo $twitter_url; ?>” />
<meta name=”twitter:title” content=”<?php echo $twitter_title; ?>” />
<meta name=”twitter:description” content=”<?php echo $twitter_desc; ?>” />
<meta name=”twitter:image” content=”<?php echo $twitter_thumb; ?>” />
<meta name=”twitter:site” content=”@pengunjungblog” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}
?>

Cara III: Menggunakan Plugin

WordPress memiliki banyak plugin. Jadi gunakan plugin jika Anda tidak ingin repot memasukkan kode di atas. Jika Anda menggunakan plugin WordPress SEO by Yoast, Anda tinggal klik [SEO] > [Social]

wpseo-twitter

Selain plugin WordPress SEO, ada plugin lain yang bisa Anda gunakan. Seperti Plugin Twitter Card yang ditulis oleh Niall Kennedy.

Silakan memilih salah satu cara yang saya tulis di atas. Ingat! Hanya pilih satu cara, jangan dipakai semua. Jika sudah, untuk memastikan, kita bisa testing di alat yang disediakan pihak Twitter.

Bonus Tips:

Perhatikan juga robots.txt blog Anda, jangan memblokir spider twitter dengan robots.txt atau pun meta robots. Jadi jika artikel Anda tidak bisa tampil seperti contoh di atas di alat testing. Maka Anda butuh memasukkan ini di robots.txt blog Anda:

User-agent: Twitterbot
Disallow:

Oke, ada pertanyaan? Silakan berkomentar. Saya akan menjawabnya dengan senang hati. :)

 

Download EBOOK Eksklusif Saya GRATIS !

Miliki 2 Ebook Gratis bagaimana cara memulai bisnis online yang menghasilkan profit hingga ribuan dollar plus ebook 125 Sumber Backlink High PR 7-9 GRATIS!

  • Mengenal Jenis-Jenis Bisnis Online Yang Menguntungkan Dan Mudah Dilakukan
  • Memahami Mindset Serta Cara Bisnis Online Yang Salah Dan Yang Benar
  • Rekomendasi Produk Eksklusif Dan Berkualitas Untuk Memulai Bisnis Online Anda
  • Gratis 125 Sumber Backlink Gratis Yang Memiliki Pagerank 7 hingga pagerank 9!

Masukkan nama dan email Anda:



Sponsor

GoBlog Theme

{ 4 comments… read them below or add one }

Mukti Effendi December 2, 2012 at 15:47

Bagus sekali infonya. Tapi agak mumet nich memahaminya. Oke dech saya akan simpan dulu informasi ini. Terima kasih mas. Eh ya, contoh blog yang memakai Twitter Card yang mana ? Kasih contoh ya mas…

Reply

script gratis December 3, 2012 at 21:57

detail banget penjelasannya berguna bagi semua yang suka twitter. ok

Reply

Yogie Share March 10, 2013 at 02:17

makasih mas atas tutorial nya nih . siapa tau aja nnti saya buat wp hehe

Reply

Jasa Company Profile May 24, 2013 at 08:34

seeep :D ini yang aku cari cari :) agar twitter cardnya masuk di wordpress , makasih yah :)

Reply

Leave a Comment

*