Cara Validasi Twitter Card Pada Template Kompi Ajaib

Cara Validasi Twitter Card Pada Template Kompi Ajaib

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×