Cara Validasi Twitter Card Pada Template Kompi Ajaib

Validasi Twitter Card
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='http://4.bp.blogspot.com/-OfeQoqmUe2E/U4LGtr7aVMI/AAAAAAAAc7g/GQB8vBxrIE8/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.

Validator Twitter Card

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.

Request Approval

Kemudian setelah itu akan muncul notifikasi "whitelist request for card is pending approval".

Pending Approval

Nah silahkan Anda buka kotak masuk email Anda dan buka email dari Twitter Card.

Validation 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.

Twitter Card Approved

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.

Tweet

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments