Ditulis oleh: Ditulis pada: 1/07/2015
Postingan ini untuk melanjutkan postingan yang lalu tentang template yang saya bagikan. Baik template Kompi Ajaib maupun Dark Template Kompi Ajaib memiliki dasar template yang sama, hanya tampilan saja yang berbeda.
Nah pada kedua template tersebut sudah saya lengkapi dengan Open Graph dan Twitter Card. Untuk Open Graph sebenarnya tidak ada masalah karena itu akan otomatis bekerja, namun untuk Twitter Card perlu ada tindakan lanjutan yaitu validasi Twitter Card.
Nah untuk itu postingan ini dibuat untuk melengkapi cara validasi Twitter Card pada kedua template Kompi Ajaib tersebut. untuk lebih jelas tentang Twitter Card ini, silahkan simak postingannya.
Silahkan baca: Memasang Meta Twitter Card Markup Di Blogger
Pada template Kompi Ajaib terdapat kode Open Graph dan Twitter Card seperti di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan baca artikel " + data:blog.pageName + " ini selengkapnya di " + data:blog.title + ""' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Blog Description Here.' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK34rJQWFB6QsWqZwSsZPvgZ1OGCYA9SrChv1xUIedVFubeZMNtMoDIUO-mVhyfI3zkV7cDvwGqtRErjDYuYDEm5laq2JY4FPSfMWjQQrt52fP2scKbX_I7LcXFqPY_BpZ-1hvReFnmFKm/s1600/Graphic1.png' property='og:image'/>
</b:if>
</b:if>
<meta content='xxxxxxxxxxxxxx' property='fb:admins'/>
<meta content='xxxxxxxxxxxxxx' property='fb:profile_id'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@UsernameTwitter' name='twitter:creator'/>
Yang perlu Anda sesuaikan adalah untuk
fb:admins dan fb;profil silahkan ganti xxxxxxxxxxx dengan id unik profil fb Anda. Dan untuk UsernameTwitter silahkan ganti dengan username Twitter Anda.
Setelah kedua hal di atas disesuaikan masing-masing dengan akun fb dan twitter Anda, maka kini tinggal melakukan validasi Twitter Card. Silahkan akses link di bawah ini.
https://cards-dev.twitter.com/validator
Silahkan masukan URL blog Anda pada kolom yang tersedia kemudian klik tombol Preview card seperti pada gambar di bawah ini.
Setelah muncul Card preview di sebelah kanan, silahkan klik tombol Request approval dan akan muncul beberapa data tentang akun Twitter Anda, jika perlu silahkan lengkapi Deskripsi Blog kemudian klik lagi tombol Request approval.
Kemudian setelah itu akan muncul notifikasi "whitelist request for card is pending approval".
Nah silahkan Anda buka kotak masuk email Anda dan buka email dari Twitter Card.
Setelah itu silahkan refresh halaman validasi Twitter Card tadi. Maka jika Twitter Card blog Anda sudah di-approval, halaman validasi Twitter Card akan seperti gambar di bawah ini.
Kemudian silahkan cek halaman Twitter Anda, maka tweet postingan Anda akan seperti gambar di bawah ini, muncul view summary untuk menampilkan thumbnail dan summary postingan.