Saturday, March 21, 2015

Mengatasi Thumbnail Share Post Facebook

Mengatasi Thumbnail Artikel Blog yang Tidak Muncul Saat Share ke Facebook Mengatasi Thumbnail Share Post Facebook - Lebih tepatnya Mengatasi Thumbnail Artikel Blog yang Tidak Muncul Saat di Share ke Facebook.

Hal ini terjadi ketika mesin penelusur Facebook gagal mengambil data dari halaman saat artikel blog dibagikan ke Facebook dan ini memang cukup mengganggu karena kalaupun muncul dimensi gambar yang ditampilkan sangatlah kecil hanya berukuran 90x90 pixels. Nah maka dari itu disini Saya akan memberikan solusi yaitu dengan cara menambahkan meta tag Facebook Open Graph di blog.

Untuk memulainya, silakan ikuti langkah-langkah di bawah ini :

Catatan : Sebelum mengedit template ada baiknya sobat membackupnya terlebih dahulu. 

Buka Blogger Dashboard > Klik Template > Edit HTML 

Cari tag <head> dalam template dan di bawahnya terapkan meta tag di bawah ini :

<!-- [ Social Media meta tag ] -->
<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:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' 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:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='ISI DESKRIPSI ALTERNATIF DISINI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='KODE-APLIKASI' property='fb:app_id'/>
<meta content='KODE-ADMIN' 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'/>

Langkah berikutnya, cari tag <body> dan dibawahnya terapkan script di bawah ini :

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Simpan template.

Keterangan :
  • ISI DESKRIPSI ALTERNATIF DISINI : Deskripsi alternatif akan muncul jika post tidak diberi deskripsi.
  • KODE-APLIKASI : Isi dengan kode aplikasi facebook sobat
  • KODE-ADMIN : Isi dengan kode profil atau kode fan page facebook.

Tambahan :
Pastikan gambar yang diupload memiliki dimensi tidak kurang dari 600×315 pixels, dan jika kurang maka facebook akan meresize gambar tersebut ke 90x90 pixels. Ada baiknya menggunakan gambar dengan dimensi 1200×630 pixels, 800×420 pixels, dan 600×315 pixels.

Setelah semua diterapkan, silakan cek salah satu dari url artikel blog sobat disini :

Catatan : Sebelumnya sobat sudah login ke Developer Facebook, menerapkan kode aplikasi dan kode admin di blog


Kemudian klik fetch new scrape information

Setelah melakukan hal di atas, otomatis informasi dari blog sobat akan disimpan di sistem penelusuran Facebook. Selengkapnya

Demikian cara mudah Mengatasi Thumbnail Share Post Facebook yang Tidak Muncul di Facebook, jika ada kekurangan silakan bisa sobat tambahkan lewat kolom komentar. Terima kasih.