Mengatasi Thumbnail Post Di Facebook 100% Berhasil

Mengatasi Thumbnail post Di Facebook 100% Berhasil - Sebelumnya saya pernah mengalami masalah ketika share URL halaman post maupun URL homepage blog di facebook gambar/ thumbnail dari artikel yang saya posting tidak muncul/ terlihat. Yang terlihat hanyalah gambar kosong. Setelah saya cermati ternyata ada beberapa hal yang harus diperbaiki.

Ini tulisannya panjang banget tapi bila dibaca semua insya Allah berhasil, dan harap dimaklumi pakai bahasa yang mudah, bahasa wong deso,,heheyy

Saya berusaha mencari dari berbagai sumber tetapi hasilnya tetap nihil, tidak tahu apakah itu masalah pada template saya atau kode yang diberikan kurang pas dan komplit, akhirnya saya mengambil beberapa kode yang perlu dan saya edit-edit sendiri, syukur hasilnya tralalalaaaaaa,,,,,, langsung terlihat saat saya tes di Facebook's Open Graph Debugger Tool maupun di beranda facebook saya.

Untuk memunculkan gambar/ thumbnail posting agar terlihat di Facebook, lakukanlah cara-cara ini :

1. Usahakan memasukkan gambar ke entri saat pembuatan posting baru melalui upload dari perangkat komputer jangan copy paste dari tempat lain, kalau sudah terlanjur ada gambarnya cek dulu buka halamannya dan coba arahkan kursor ke gambar, apabila kursor berubah menjadi icon telunjuk berarti gambar sudah ada link aktif penyimpanan, gak tau apalah bahasanya yang jelas ada linknya, kalau hasil copas saja maka gak akan ada linknya dan tidak terjadi perubahan pada kursor,

2. Ubah semua gambar yang sudah terlanjur di upload apabila ukurannya kurang dari 200x200 px, karena standar agar terlihat pada fecebook harus berukuran minimal 200x200 Pixel atau lebih besar. Sudah saya uji tes semua pakai gambar yang hanya 200x150 px tidak bisa.

Bagaimana cara mengetahui ukuran gambar?

download gambar yang ada dipostingan kemudian edit menggunakan aplikasi Paint bawaan windows masing-masing, klik Star > All program > accessories > Paint. Kemudian lihat ukurannya, apabila kurang dari 200x200 px segera rubah.

Seperti contoh pada gambar ini

Tidak perlu merubah semua ukuran gambar apabila dalam satu postingan mempunyai beberapa gambar, karena facebook hanya meng crawl gambar yang berada pada posisi teratas pada halaman.
Nah dengan begitu apabila ingin memunculkan gambar pilihan sendiri yang merasa paling perlu agar gambar muncul di facebook maka tempatkan gambar pilihan itu di posisi paling atas.

Setelah dirubah ukurannya segera simpan dan kemudian upload kembali ke dalam postingan.

3. Wajib mempunyai ID APP . Saya rasa semua sudah punya. Apabila belum punya silahkan buat dulu klik langsung link ID APP, dan caranya cari di mbh google yaa.

4. Copy paste kode berikut di atas tanda </body>

<script> window.fbAsyncInit = function() { FB.init({ appId : '1867211506839832', xfbml : true, version : 'v2.6' }); };
(function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Ganti tanda tulisan yang berwarna merah dengan ID APP milik kalian.

5. Kemudian copy paste lagi kode berikut dan letakkan di atas kode <b:skin><![CDATA[ atau di bawah kode <head>

<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 DESCRIPSI DI SINI' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ID APP DI SINI' property='fb:app_id'/>
<meta content='ID FACEBOOK DI SINI' 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'/>

Isi/ ganti semua yang bertuliskan merah

6. Langkah terakhir cek link halaman posting kalian di Facebook's Open Graph Debugger Tool , copy pastekan link halaman kalian di kolom ENTER URL

Ikuti langkah-langkahnya :

Di bawah ini (screenshot no 1) terlihat tanggal/ time scraped sudah lama, artinya itu adalah tanggal terakhir saya melakukan debug link halaman posting sebelum saya melakukan perubahan, dan terlihat gambar/ thumbnailnya masih yang lama padahal sudah saya ganti.

1).

Setelah link halaman kalian di pastekan di kolom ENTER URL kemudian klik debug (1) , klik lagi scrape again (2)

2).

Apabila belum pernah melakukan tes debug maka akan terlihat seperti screenshot di bawah ini, klik saja yang ada di lingkaran besar.

Kemudian setelah klik scrape again jangan lupa klik lagi debug,

Traatangggg,, lihat di bagian Link Preview sudah ada gambarnya lengkap dengan title dan deskripsi!!!,,,,,

Oya , ada sedikit hal yang menjadi pikiran atau tidak terpikirkan ketika semua sudah selesai dan berhasil!! Apa itu?

Tutorial di atas adalah untuk memperbaiki/ menampilkan thumbnail lengkap dengan Title dan deskripsi pada link halaman posting, nah lalu bagaimana jika yang kalian share ke facebook hanya alamat blog home page saja misalnya : www.cintalaura.com, www.cintasegiempat.blogspot.com, dsb.

Pasti menjadi masalah karena tidak bisa menongolkan,, ehhh menampakkan thumbnail dari home page blog kalian. Kalau sudah bisa ya selamat...

Secara umum menurut bahasa saya, saat facebook meng crawl halaman utama blog kita maka dia tidak akan menemukan og.image, karena halaman utama hanya berisi daftar posting, navigasi dan perangkat lainnya, akibatnya dia gagal mencari og.image td,,, dgn capek dan susah payah diapun menyerah dan hanya memberikan anda gambar kosong,,,xixiixii..

Nah untuk itu tambahkan lah meta tag berikut ini di bawah kode nomer 5,

<meta content="URL Tempat penyimpanan gambar" property='og:image'/>

Keterangan:

- Pastikan kalian mempunyai tempat hosting penyimpanan gambar. Dan di hosting tersebut gambarnya sudah sesuai ukuran yaitu 200x200 px.

- Buat gambar sesuai selera, umpama ingin menampilkan thumbnailnya berupa gambar unggulan blog anda, atau icon yang melambangkan blog anda.

Pesan saya: Berhati-hatilah saat menambahkan meta tag ini apabila dapat dari tutorial di facebook atau yang lain, yang biasanya og.image yang diberikan adalah gambar dari si pemberi kode, jadi saat kita menambahkannya tanpa melihat dulu isinya akibatnya saat share ke facebook thumbnail yang terlihat malah gambar dari orang lain... dan saya sudah berkali-kali melihat hal ini, mungkin bagi yang sudah tahu tidak menjadi masalah. Biasanya yang diberikan kode kepada kita-kita yang masih newbi.

Selamat mencoba semoga berhasil kawan... kalau gagal ya jangan menyerah,,

Catatan:

Lakukan Debug semua link halaman yang ingin di share di Facebook, dan jangan sekali debug saja untuk satu link, usahakan klik scrape again dan debug beberapa kali sampai pada Link Preview terlihat Title, deskripsi dan gambarnya, karena saya coba beberapa klik baru berhasil meskipun ada yang hanya sekali sudah bisa