Hal ini terjadi ketika mesin penelusur Facebook gagal mengambil data dari halaman ketika artikel blog dibagikan ke Facebook dan ini memang cukup mengganggu alasannya kalaupun muncul dimensi gambar yang ditampilkan sangatlah kecil hanya berukuran 90x90 pixels. Nah maka dari itu disini Saya akan memperlihatkan solusi adalah 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 teman 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 == "item"'> <b:if cond='data:blog.pageType == "static_page"'> <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 == "item"'> <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 kalau post tidak diberi deskripsi.
- KODE-APLIKASI : Isi dengan arahan aplikasi facebook sobat
- KODE-ADMIN : Isi dengan arahan profil atau kode fan page facebook.
Tambahan :
Pastikan gambar yang diupload mempunyai dimensi tidak kurang dari 600×315 pixels, dan kalau kurang maka facebook akan meresize gambar tersebut ke 90x90 pixels. Ada baiknya memakai gambar dengan dimensi 1200×630 pixels, 800×420 pixels, dan 600×315 pixels.
Setelah semua diterapkan, silakan cek salah satu dari url artikel blog teman disini :
Catatan : Sebelumnya teman sudah login ke Developer Facebook, menerapkan arahan aplikasi dan arahan admin di blog
Kemudian klik fetch new scrape information
Setelah melaksanakan hal di atas, otomatis gosip dari blog teman akan disimpan di sistem penelusuran Facebook. Selengkapnya
Demikian cara gampang Mengatasi Thumbnail Share Post Facebook yang Tidak Muncul di Facebook, kalau ada kekurangan silakan dapat teman tambahkan lewat kolom komentar. Terima kasih.