Tips Mengatasi Gambar Berbeda Share Postingan ke Facebook

February 23, 2016
Horas bah!!!
Postingan kali ini gue ingin berbagi tips kepada teman-teman pengguna blogspot. Mungkin apa yang akan gue share kali ini sudah basi dan banyak yang sudah tau. Namun yaa...namanya berbagi pengalaman, semoga bermanfaat lah ya :)
Beberapa saat yang lalu, gue pernah kesal karena postingan yang gue share ke facebook gambarnya tidak sama dengan yang ada pada postingan. Teman-teman pasti ada yang mengalami hal serupa toh ? Gambar yang muncul di facebook bukan gambar yang kita pasang di artikel. Lebih ngeselin lagi, gue pernah share beberapa artikel ehhh..gambar yang muncul itu lagi-itu lagi. Kadang yang muncul gambar (banner) komunitas yang gue pasang di blog, bahkan kadang gambarnya gak ada, kosong putih gitu aja di facebook. Kezell kan???
Masalah ini sebenarnya bukan serta merta kesalahan pada blog kita, namun kadang juga kesalahan si Facebook-nya. Hal ini biasanya dikarenakan facebook belum membaca meta image sesuai dengan algoritmanya. Lalu gimana supaya meta image sesuai ?
Berikut ada 2 cara yang cukup mudah untuk dilakukan agar gambar bisa sesuai dengan hasil postingan :

1. Memanfaat fasilitas Debugging yang disediakan Facebook
Cara ini paling simple. Namun kadang harus dilakukan berulang-ulang jika setiap kali ada postingan baru yang ingin di share dan gambarnya yang muncul berbeda.

- Pertama login ke akun facebook seperti biasa

- Silahkan copy link url postingan yang hendak di share dan paste di kotak "Enter a URL, access token, or Open Graph Action ID"

- Setelah itu klik " Debug"

- Hasilnya di bawah akan terlihat postingan dengan thumbnail gambar yang sesuai (ada) dalam postingan.
- Setelah itu, silahkan kembali ke blogpost dan klik share pada postingan, maka  thumbnail gambar yang muncul akan sama dengan hasil debugging tadi.

"Terus kalau gak berhasil gimana bang ?"
Tenang pemirsa, banyak jalan menuju hatimu Roma. Kalau cara di atas tidak ampuh, maka silahkan dicoba cara kedua berikut.

2. Menambahkan script Meta Tag pada Template
Untuk cara yang kedua ini sifatnya permanent selama template blog tidak diganti. Kali ini kita akan menambahkan sedikit code script og:image pada tag element template. Dengan script ini, maka facebook akan otomatis mengenali meta image dari gambar yang kita pasang pada blogpost.

- Pertama silahkan login ke blogger

- Masuk ke menu "template" blog dan pilih "edit HTML"
- Kita akan dihadapkan pada barisan-barisan code (yang bagi sebagian blogger bikin pusing) hehe..
Lalu cari code </head>, caranya tekan Ctrl dan F pada keyboard secara bersamaan. Ketik </head> kemudian enter.

- Setelah itu silahkan paste /tempatkan script berikut tepat di atas code </head>


             <b:if cond='data:blog.pageType == &quot;item&quot;'>
             <meta content='Facebook ID' property='fb:admins'/>
             <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>
             <meta content='website' property='og:type'/>
             <b:if cond='data:blog.postImageThumbnailUrl'>
             <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
             <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
             </b:if>
             <b:if cond='data:blog.metaDescription'>
             <meta expr:content='data:blog.metaDescription' property='og:description'/>
             </b:if>
             </b:if>


Note : Facebook ID di isi sesuai dengan milik sendiri. ID bisa dilihat di belakang link url facebook (https://www.facebook.com/xxxxxx(facebook id))

- Kemudian klik "save template"

- Silahkan buka postingan dan share ke facebook.

Gimana? Cukup singkat dan mudah bukan?
Semoga tips ini dapat membantu teman-teman sekalian yang sering mengalami gambar error atau berbeda saat share postingan ke facebook. Jika ada kesulitan dan ingin bertanya, jangan sungkan-sungkan untuk meninggalkan jejak ya ;-)


Related Post

Previous
Next Post »

12 comments

Write comments
Oline
AUTHOR
February 23, 2016 at 11:58 AM delete

Makasih tutorialnya mas..

Reply
avatar
February 23, 2016 at 12:32 PM delete

Wahhh, yang ke dua aku ilmunya gak nyampe. Harus praktek langsung sama pakarnya nih.

Reply
avatar
February 23, 2016 at 12:39 PM delete

Sama-sama mba, semoga membantu :)

Reply
avatar
February 23, 2016 at 12:40 PM delete

Wahhh..mau juga donk di ajarin sama pakarnya :D

Reply
avatar
Husna
AUTHOR
February 25, 2016 at 9:32 PM delete

pake dua cara diatas, gagal semua bang. Pake kodepun salah, yg keluar tetep aja gambar header. Adakah cara lain?

Reply
avatar
February 26, 2016 at 1:12 PM delete

Apakah sudah dicoba share dengan copy-paste link? Atau bisa dicoba share dengan browser yang berbeda.

Reply
avatar
February 29, 2016 at 9:08 PM delete

yang pertama.. ada yang berhasil ada juga yang vgagal.. untuk mencoba yang ke 2 sama seperti mba hermini.. takut salah lae... kapan kapan kita coba bareng ya :)

Reply
avatar
Sari Novita
AUTHOR
March 4, 2016 at 2:54 AM delete

kalo untuk wordpress, gimana?

Reply
avatar
March 8, 2016 at 4:35 AM delete

Asseekkk...mau diajarin blogspot.

Reply
avatar
March 8, 2016 at 4:36 AM delete

Wordpress malah lebih mudah, tinggal install plugin atau tambahin feature image ;-)

Reply
avatar
August 10, 2016 at 10:09 AM delete

Kok masih beda ya ...gambar yg muncul, Gan...! ksh dong solusinya ?

Reply
avatar
August 16, 2016 at 6:53 PM delete

Bedanya gimana ? Gambar yang muncul masih dalam 1 artikel atau bukan ?

Reply
avatar

Terima kasih sudah mau berkunjung dan meninggalkan jejak di mari. EmoticonEmoticon