Meta Tag Open Graph untuk Menampilkan Facebook Author Tag di Blogger

Sebenernya sih gua ngepost ini sebagai catetan doang, buat jaga-jaga kalo nanti mau bikin template blog lagi. Kalo mau coba juga silahkan, selama ngerti maksudnya (Soalnya gua juga masih bingung-bingung gitu ngejelasinnya). Kalo boleh cerita, jujur ini udah berbulan-bulan gua nyari cara kayak gini. Soalnya di template blog yang lama, tiap kali ngeshare postingan di facebook, link share-nya jelek banget sumpah (cuma nampilin link doang, sedangkan judul postingan, nama blog, deskripsi postingan, link beranda dan 'profil facebook' sebagai penulis). Udah lama nyari cara ini dan akhirnya berhasil nemuin cara yang bagus yang sebenernya ditujuin buat wordpress doang, tapi ternyata pas diulik dikit, ternyata mujarab juga buat pengguna blogger. Ntar hasilnya bakalan kayak gambar dibawah.




Ini gua nyobainnya di blog gua yang satunya. Bisa diliat kan, gambarnya yang awalnya ilang sekarang udah muncul. Judul dan nama blog udah muncul juga, deskripsi juga muncul walaupun nggak panjang (soalnya gambarnya kegedean/height gambar lebih dari 400px). Link beranda juga udah tampil dan TARAAAA ... Link Facebook gua sebagai author dan publisher juga udah muncul. Sebenernya nggak terlalu panjang sih scriptnya, bisa diliat di bawah:

<!-- open graph -->
<meta content='id_id' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='GANTI PAKE ID PROFIL FB' property='fb:admins'/>
<meta content='GANTI PAKE ID PROFIL FB' property='fb:profile_id'/>
<meta content='GANTI PAKE LINK PROFIL FB' property='article:author'/>
<meta content='GANTI PAKE LINK PROFIL FB' property='article:publisher'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='website' property='og:type'/>
<meta content='GANTI PAKE LINK GAMBAR LOGO BLOG MASING_MASING&quot; height=&quot;200&quot; width=&quot;200&quot;' property='og:image'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='GANTI PAKE DESKRIPSI BLOG MASING-MASING' property='og:description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.title + &quot; | &quot; + data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>

Kode script yang diatas taro dibawah kode >> <b:include data='blog' name='all-head-content'/> <<. Biasanya kode warna ijo itu ada di bagian kumpulan meta tag di bawah kode <head>. Yang warna merah itu diganti pake punya masing-masing. Kalo udah tinggal save, cara ngetesnya harus bikin postingan baru terus diposting, baru link postingannya dishare ke facebook.

Pas di preview emang belum tampil nama authornya karena link author itu baru tampil pas udah di share. Berhubung gua juga masih bingung, mungkin segini aja dulu penjelasannya (ntar kapan-kapan diupdate lagi). Pokoknya kudoa'in buat yang mau coba, semoga berhasil dan paham sama cara-caranya.

0 comments:

Post a Comment