Cara menambahkan Twitter Cards di Blogger Blogspot

Kita sering melihat tweet yang memiliki "Summary", contohnya adalah tweet berikut:

Medium: Not too big, not too small. http://t.co/X6sFziZHds— Danang Probo Sayekti (@danpros) June 19, 2013

Di platform Blogger, kita pun bisa membuat hal serupa, jadi ketika artikel di share di Twitter maka akan memiliki informasi tambahan, nama dari fitur ini adalah Twitter Cards, untuk lebih jelasnya baca penjelasan tentang Twitter Cards di Twitter.

Ada bermacam-macam tipe Twitter Cards, sayangnya untuk saat ini yang bisa ditambahkan ke blogspot baru yang model defaultnya yaitu Summary Card.

Berikut cara menambahkan Twitter Cards di Blogger Blogspot:

1. Masuk ke Template -> Edit html. Tambahkan kode berikut di head:

Code:

    <meta content='summary' name='twitter:card'/>
    <meta content='@situsmu' name='twitter:site'/>
    <meta content='@akunmu' name='twitter:creator'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
      <meta expr:content='data:blog.title' name='twitter:title'/>
      <b:else/>
      <b:if cond='data:blog.pageName == ""'>
        <meta expr:content='data:blog.url' name='twitter:url'/>
        <meta content='Search Posts' name='twitter:title'/>
        <b:else/>
        <meta expr:content='data:blog.url' name='twitter:url'/>
        <meta expr:content='data:blog.pageName' name='twitter:title'/>
      </b:if>
    </b:if>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
      <b:else/>
      <meta content='url-ke-gambar-jika-thumbnail-tidak-tersedia' name='twitter:image'/>
    </b:if>
    

2. Sekarang kunjungi Twitter Cards Validator -> Pilih Summary -> Validate & Apply -> Masukkan URL yang ingin dites -> Request approval.

Untuk blog berplatform Tumblr sudah otomatis menyertakan meta untuk Twitter Cards jadi langsung ke tahap dua.

 

kalau drupal tinggal pakai

kalau drupal tinggal pakai modules Meta Tags aja lebih simple , tapi boleh dicoba juga nih di implementasikan ke blog

 

Drupal? bener tapi untuk

Drupal? bener tapi untuk mendapatkan akun Twitter yang beda tiap artikel perlu membuat custom Token baru

 

asyik ada tutorialnya buat

asyik ada tutorialnya buat blogger, langsung praktek lagi nih mas @dan

 

Dan wrote:

kirain bisa langsung pakai meta tag saja, ternyata perlu custom juga ya

 

Bookmarks

Bookmarks

 

belom pengen mencoba, baca

belom pengen mencoba, baca aja dulu ah..

 

tips baru lagi

tips baru lagi

 

sudah bisa simpan

wah kok eror yah,

Code:

Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 723, kolom 5: The element type "meta" must be terminated by the matching end-tag "</meta>".

update : sudah bisa simpan kode dibawah ini tepat diatas - < / head > - dan silakan ganti twitter:site serta twitter:creator

 

Ups sudah diperbaiki ternyata

Ups sudah diperbaiki ternyata kurang

Code:

/>

 

Dan wrote:

agak sedikit beda penulisan kodenya, tapi yang penting sudah jalan

 

Mantab ini. Makin menarik

Mantab ini. Makin menarik buat visitor

 

Pengin nyoba

Pengin nyoba tapi lagi males ngoprek-oprek blog

 

Sinkronisasi di wp gmana ya

Sinkronisasi di wp gmana ya fiturnya masih buat para blogger.

 

royger wrote:

kayanya bisa ko asal tahu menempatkan meta2nya

Code:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://placekitten.com/250/250">

kalau lihat sample mas @dan itu untuk dinamik meta punyaan blogger.

 

ikutan nyoba dlu di tumblr

ikutan nyoba dlu di tumblr

 

mas punya saya kalo dihalaman

mas punya saya kalo dihalaman posting yang twitter:description nya gak kebaca

 

Yaya wrote:

Pastikan kalau meta deskripsi pada postingan tidak kosong.

 

sudah coba mas dan berhasil

sudah coba mas dan berhasil

 

Coba ahh..

ilmu baru mas,