Twitter Card & Facebook Open Graphs

Senang banget kalau udah ngutak-ngatik tampilan blog. Memoles cantik biar sedap dipandang mata. Padahal mah cuma diper-simple aja dengan ganti template dan main sedikit warna. Tujuannya biar pas ngeblog jadi lebih bersemangat. Jadi mood booster. Tapi sayangnya ganti template gratisan ini suka banyak minus nya, masih bertebaran bug yang kadang ngeselin buat dibenerinnya. Salah satunya padalah Twitter card dan Facebook Open Graph yang sering kita gunakan untuk sharing link. Kalau hanya ganti-ganti warna, jenis hurus, padding size, dan pengaturan lainnya yang tidak ada di bagian Customize sih kita tinggal klik kanan > inspect page, terus mainin deh css nya (*too much leisure time).

Working with HTML editor

1. Lakukan backup template terlebih dahulu. Buka halaman blogger, Theme > Backup / Restore > Download Theme
2. Buka editor HTML. Theme > Edit HTML. 
3. Kalau udah di sini, we can do any magical thing! Kalau kata Hana, kalau udah mulai ngoding, aku kayak penyihir katanya hahaha.

Twitter Card

Cari sintaks <b:includable id='post' var='post'>

Untuk pembuatan twitter card berbentuk thumbnail, tambahkan sintaks berikut dibawahnya:
<meta content='summary' name='twitter:card'/>

Atau jika ingin twitter card nya berbentuk large image, maka sintaks nya seperti berikut (pilih salah satu):
<meta content='summary_large_image' name='twitter:card'/>

Lalu tambahkan lagi sintaks berikut:

<meta content='@yourname' name='twitter:site'/>

<meta content='@yourname' name='twitter:creator'/>

<meta content='www.yoursite.com' name='twitter:domain'/>

<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>

<meta expr:content='data:post.title' name='twitter:title'/>

<b:if cond='data:blog.metaDescription'>

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

<b:else/>

<meta expr:content='data:post.snippet' name='twitter:description'/>

</b:if>

<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>



Untuk melakukan debugging, buka halaman https://cards-dev.twitter.com/validator. Copy and paste url link yang akan dites.

Setelah itu coba post lewat timeline, muncul ga yah. Muncul doong... kan udah di validasi tadi. Sayangnya kalo lewat Twitter itu ngga ada previewnya, ngga seperti di Facebook.

Aloha bisa!

Facebook Open Graph

Nah Facebook ini agak tricky, karena dari pengalaman pribadi, saya belum pernah implementasi sendiri meta tag nya Facebook. Jadi saya coba utak-atik dari si template nya. Code berikut udah saya sedikit utak-atik dan berhasil, tapi masih ada kendala di bagian post body nya yang bikin dobel di bagian judul postingan dan tanggal publish. Masih PR, nanti kalau udah bisa akan saya update. Nanti juga mau sekalian saya tambahin data Author nya.

Cari sintaks <!-- [ Social Media Meta Tag ] --> dibawahnya bisa di cek source code nya

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  

<b:if cond='data:blog.url'>

<meta expr:content='data:post.snippet' property='og:url'/>

</b:if>

<meta content='data:post.body' property='og:site_name'/>

<b:if cond='data:blog.pageName'>

<meta expr:content='data:post.body' property='og:title'/>

</b:if>

</b:if>

</b:if>

</b:if>

<meta expr:content='data:blog.pageName' property='og:title'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta content='article' property='og:type'/>

<b:else/>

<meta content='website' property='og:type'/>

</b:if>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<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 expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>

</b:if></b:if>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:post.body' property='og:description'/>

<b:else/>

<meta expr:content='data:post.body' property='og:description'/>

</b:if>

<meta content='test' property='og:site_name'/>

<meta content='andrianiken' property='fb:app_id'/>

<meta content='Niken Andriani' property='fb:admins'/>

<meta content='en_US' property='og:locale'/>

<meta content='en_GB' property='og:locale:alternate'/>

<meta content='id_ID' property='og:locale:alternate'/>

Untuk melakukan debugging, buka halaman https://developers.facebook.com/tools/debug/sharing, copy and paste url link yang akan dites. Lakukan Debug, dan klik scrape again jika perubahannya belum terlihat.

Di bagian atas ada variabel yang isinya bisa kita utak-atik di source code. Coba posting linknya langsung ke timeline Facebook, maka akan nongol preview nya, yang hasilnya harus sama seperti hasil di debug di atas. Selamat mencoba!