Kalo doyan main twitter, udah pasti pernah lihat tweet yang
isinya kek gini:
Gimana sih bikinnya?
Untuk awam seperti gue, kalau manual bikinnya agak
susah-susah gampang karena jujur aja gue gak ngerti bahasa html, xml, atau
apapun itulah pokoknya. Tapi masih bisa dikerjain kok.
Yang akan gue jelasin adalah cara manual untuk share
konten blog, artikel dll ke dalam twitter dengan twitter card khususnya summary with larger image.
Apa sih untungnya pakai twitter card?
Percaya gak percaya.. visual is important. Berapa banyak
media yang sekarang pakai infografik buat nyebar berita? Berapa banyak media
yang bikin video pendek buat nyebarin konten? Semua orang berlomba-lomba bikin
konten visual yang menarik dan bagus karena jaman sekarang emang begitu pasarannya.
Cerita lewat gambar dan video. Sebentar… Kok jadi melebar…
Gini aja deh, lebih menarik mana?
Tweet berisi link panjang yang ujungnya cuma titik-titik
atau tweet yang ada gambarnya dan link yang rapi? Gue bakal pilih yang rapi
sih.
Biar lebih paham kenapa lo harus pake twitter card: about twitter cards
Jadi, gimana buat manualnya. Ini khusus buat blogger ya, gue
gatau kalau wordpress gimana, belom nyoba soalnya. Dan ini adalah tutorial buat
bikin Summary With Larger Image
1. Kalau udah punya Blogger, LOGIN, lalu klik THEME, klik
EDIT HTML.
2. Di kotak HTML, cari </head> lalu tempel kode ini
sebelum kode </head>
<meta content='summary_large_image' name='twitter:card'/><meta expr:content='data:blog.pageTitle' name='twitter:title'/><meta content='@username' name='twitter:site'/><meta content='@username' name='twitter:creator'/><meta expr:content='data:blog.metaDescription' name='twitter:description'/><b:if cond='data:blog.postImageUrl'><meta expr:content='data:blog.postImageUrl' name='twitter:image'/><meta expr:content='data:blog.pageName' name='twitter:image:alt'/><b:else/><b:if cond='data:blog.postImageThumbnailUrl'><meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/><meta expr:content='data:blog.pageName' name='twitter:image:alt'/><b:else/><meta content='link photo yang mau dipake' name='twitter:image'/><meta expr:content='data:blog.title' name='twitter:image:alt'/><link expr:href='data:blog.url' rel='canonical'/></b:if></b:if>
Perhatian:
-
Ganti @username dengan username twitter lo
-
Di meta content untuk twitter image, ganti
dengan link foto yang mau ditampilin.
Abis itu
save. Kalau ada error, cek dan ubah aja.
Boleh preview dulu buat ngecek meta
tags nya berhasil apa gak. Kode diatas ini pake b:if yang artinya gue lupa
apaan. Hehehehehehehe Tapi kalau gak
salah sih ntar kalo dalam post lo ada foto, yang nampil di twitter itu
foto dalam post. Kalau dalam post lo gak ada foto, maka yang dipake adalah
foto yang lo pake dalam html ini.
 |
| edit HTML |
Ini kode
nyari di google dan gue utak-atik sampe gak ada yang error. Jadi itu emang kode
yang gue pakai saat ini. Setelah edit, jangan lupa save.
3. Kalau
berhasil save, lalu ke halaman card validator
Disitu lo
bisa cek.
Kalau udah
whitelisted, berarti berhasil. Blog lo udah siap.
4. Abis dari
card validator, coba copy url salah satu entry dari blog ke twitter, lalu
tweet. Dan tadaaaaa.. twitter card lo udah siap. Sekarang bisa share konten
dari blog ke dalam twitter dengan lebih kece! Wk
K
