Maret 08, 2014

Twitter Cards Dinamis untuk Blogger

Twitter Cards Dinamis untuk Blogger - Twitter card dinamis ini sangat cocok untuk digunakan pada platform blogger. Dengan twitter card dinamis ini blog anda tidak akan terlihat kaku jika di share melalui twitter. Sangat berbeda dengan default twitter cards pada twitter developers. Jika sobat hanya mengambil langsung kode meta tag dari twitter developers dan memasangnya ke blog sobat, ketika blog sobat di share melalui twitter maka hanya akan menampilkan data yang kaku. Artinya data yang sobat masukan ke meta tersebut adalah data yang dijadikan acuan twitter post. Untuk melihat demonya secara live view silahkan klik tombol dibawah ini.

DEMO TWITTER CARDS
(silahkan tekan tombol diatas untuk melihat hasilnya)

Twiter Cards Dinamis untuk Blogger

Apa Itu Twitter Cards Dinamis

Twitter cards dinamis untuk Blogger ini adalah twitter cards yang telah di modifikasi untuk menampilkan data blog secara dinamis (berbeda pada setiap halaman blog). Twitter card dinamis ini sangat cocok untuk di gunakan pada blog yang menggunakan blogger sebagai platform atau CMS (content management system). Twitter card dinamis menggunakan tag conditional sebagai dasar pembuatannya. Sehingga ketika halaman - halaman blog di share melalui twitter, data dari halaman tersebutlah yang menjadi acuan.

Mengapa Menggunakan Twitter Cards Dinamis

Sebagai seorang blogger sudah sewajarnya kita menyajikan informasi yang dikemas secara menarik. Dengan Twitter Cards dinamis ini kita dapat menampilakan setiap post yang kita share ke twitter dengan tampilan yang tidak monotone. Sehingga pembaca yang berasal dari twitter tidak merasa jenuh dengan tampilan text biasa yang kita share. Hal ini dikarenakan dengan twitter card dinamis pada blog yang berplatfom blogger maka halaman - halaman yang kita share tidak terlihat kaku dimata pembaca. Kita dapan menampilkan gambar, video, gallery, dan konten menarik yang ada di blog kita.

Perbedaan Twitter Cards Dinamis dan Twitter Card Default

Twitter card dinamis akan menampilkan setiap halaman post dengan penampilan berbeda, hal ini dikarenakan data yang diambil dari meta tag tersebut menggunakan data dinamis. Sedangkan jika menggunakan data default pada meta tag yang diambil dari twitter developers akan membuat data statis, sehingga ketika postingan atau artikel blog yang berplatform blogger di share hanya akan menampilkan data blog default tersebut.

Cara Menambahkan Twitter Cards Dinamis Pada Platform Blogger

Cara menambahkan twittercards pada platform blogger ini, sobat perlu sedikit memodifikasi meta tag diatas. tidak cukup sulit, kita harus sedikit memahami sedikit tentang struktur template kita. Sebagai contoh akan saya jelaskan sedikit agar dapat dipahami dan sobat bisa bereksplorasi sendiri. Hal ini agar sobat blogger dapat memahami cara kerja twitter cards ini dan dapat membuatnya menjadi dinamis ketika halaman - halaman lain di share ke twitter. Penjelasan lebih mudahnya adalah setiap halaman blog pasti mempunyai title dan deskripsi berbeda - beda. Nah hal ini yang akan kita jadikan acuan ketika halaman tersebut di share ke twitter.

Dibawah ini adalah meta twitter card ketika di halaman homepage :


<meta expr:content='data:blog.pageTitle' name='twitter:title'>
<meta content='DESKRIPSI BLOG ANDA' name='twitter:description'>

Dibawah ini adalah meta twitter card ketika di halaman post dan static/page :


<meta expr:content='data:blog.pageName' name='twitter:title'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'>

Keterangan :
meta tag diatas akan mengambil data title dan deskripsi homepage saat homepage di share ke twitter, dan ketika di halaman post yang diambil adalah data judul dan deskripsi artikel/postingan. Sehingga akan menghasilkan post yang dinamis ketika halaman - halaman blog sobat di share ke twitter.

Twiter Card Dinamis Devilzart.com

Dalam mengimplementasikan kode meta diatas untuk membuat twitter card dinamis sobat harus mengenal tag conditional blogger. Cara tersebut dapat di implementasikan dengan menggunakan tag conditional tag <b:if>. Silahkan baca artikel "conditional tags untuk blogger" untuk memahami tag tersebut. Tag conditional tersebut sangat bermanfaat untuk mengatur elemen - element pada setiap halaman.

Dibawah ini adalah meta tag twitter cards summary with large image milik saya, twitter card ini sudah saya modifikasi sehingga lebih dinamis dan cocok untuk blogger. Silahkan ganti contentnya menyesuaikan kondisi blog sobat.


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@DevilzArt' name='twitter:site'/>
<meta content='@DevilzArt' name='twitter:creator'/>
<meta content='www.devilzart.com' name='twitter:domain'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'>
<meta content='DESKRIPSI BLOG ANDA' name='twitter:description'>
<meta content='IMAGES BLOG/LOGO ANDA'name='twitter:image:src'>
<b:else/>
<meta expr:content='data:blog.pageName' name='twitter:title'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'>
</b:if>

Keterangan tambahan :
- content pada twiter:card yaitu summary_large_image dapat diganti sesuai dengan konten blog sobat, berikut kode meta contentnya:
  • Summary : summary
  • Photo : photo
  • Player : player
  • Gallery : gallery
  • App : app
  • Product : product
- content pada twitter:site dan twitter:creator diganti dengan nama website atau blog sobat.
- content pada twitter:domain silahkan ganti dengan domain blog atau website anda.
- kata yang dicetak dengan huruf besar yaitu DESKRIPSI BLOG ANDA dan IMAGES BLOG/LOGO ANDA silahkan ganti sesuai deskripsi dan log blog atau website anda.

Selanjutnya, sobat bisa berekplorasi dengan Twiter Cards Dinamis ini untuk disesuaikan dengan blog atau website sobat sendiri. Jika ada pertanyaan silahkan berkomentar dengan sopan, saya akan mencoba membantu sebisa mungkin. bagi copaser mohon sertakan link sumber. Mohon di ingat etika blogger. Kita semua sahabat. Terima kasih telah berkunjung di blog devilzart.com ini. Kurang dan lebihnya mohon maaf. Sukses selalu.

8 comments » Twitter Cards Dinamis untuk Blogger

bagaimana caranya membuat blog???

Balas

coba akses situs blogger.com biar mudah. ntar ikutin aja petunjuk2nya.

Balas

http://4.bp.blogspot.com/-OLV4n6aGWkk/UyQeNgUn_HI/AAAAAAAAACg/75GdwYWLB4E/s1600/x.jpg

Cara Membuat Gini Kek Mana Bang ?
Back : www.dhack.co.vu
Nyari Domain Gratis Ada ga ya Selain homestead ?

Thanks

Balas

ntar ane buatin tutor nya sob, untuk domain gratis selain homestead banyak, tapi yang segampang homestead jarang bahkan gak ada.

Balas

Saya Tunggu Mas Rian :D
visit Back aja yah
www.dhack.co.vu

Diperhatikan Bang Mana Yang Kurang di Blog gw
Terima Kasih

Balas

oke sob siap meluncur :D

Balas

Mana Gan Post nya ?
saya Tunggu nih !!

Balas

besok pasti ane update sob, sabar, belum ada waktu buat post ane. sabar yup..

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top