Mengatasi Thumbnail Share Post Facebook

3/21/2015
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.


Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

10 comments

isi deskripsi alternatif maksudnya apa yah mba??

Balas

Deskripsi blog, jika deskripsi utama tidak diisi maka yang akan tampil yaitu deskripsi alternatif

Balas

gan kalo ngatasin thumb post yang ga keluar gimana??

Balas

Bisa coba tips di atas

Balas

cara membuat kode admin sama kode fanspage nya gimana mba?? kurang paham saya :D

Balas

Buat dl facebook aplikasi developernya, nanti bisa dpt kode apps di sana

Balas

cara membuat nama author nya agar bisa di klik gimana mba?
contohnya seperti ini, jika di klik maka masuk ke profil facebook si doi.

https://3.bp.blogspot.com/-5Hy5OvzQt6E/VcsIA5hjABI/AAAAAAAAAIY/XYLf1YkfSsc/s1600/Screenshot_4.jpg

Balas

Kurang tau itu, ada tambahan setelan markup facebook. Cb cek fb dev apps

Balas

cara dapatkan kode aplikasi gimana min...

Balas

Login ke developer facebook, buat aplikasi baru untuk mendapatkan ID

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.