Skip to main content

Cara Validasi Twitter Card Pada Template Kompi Ajaib

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.


Pada template Kompi Ajaib terdapat kode Open Graph dan Twitter Card seperti di bawah ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' 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='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' 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.


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB