Cara Mengatasi Gambar Posting Blog tidak Muncul saat Share ke Facebook
Tutorial: Tips & Trik Cara Mengatasi dan Memperbaiki Gambar Artikel Blog tidak Muncul ketika di Share ke Facebook
Ketika sebuah artikel (post/content) dibagikan ke sosial media, biasanya akan menampilkan satu gambar artikel, istilah lainnya yakni "Image Thubmbnail".
Secara umum, "Image Thubmbnail" memiliki definisi yang luas. Praktisnya, "Image Thubmbnail" adalah gambar perwakilan dari sebuah artikel; istilah ini bisa digunakan apabila kondisinya di homepage (auto-readmore), ketika artikel dibagikan (share), dan seterusnya.
Jika kamu bingung, silakan cek gambar di bawah ini:
Gambar di atas merupakan salah satu Content dari suatu blog, yang dibagikan ke Facebook. Terlihat ada gambar utamanya. Nah, gambar inilah yang dimaksud dengan "Image Thubmbnail".
Pertanyaannya, bagaimana cara mengatasi dan memperbaiki gambar thumbnail artikel blog yang menghilang ketika dibagikan (share) ke Facebook?
Gambar posting blog tidak muncul ketika di share ke Facebook, disebabkan karena template blogger tersebut belum terpasang kode Meta Tag Open Graph Facebook.
Yang perlu kamu lakukan yakni (1.) menambahkan dan/atau memasang Meta Tag Facebook Open Graph dan (2.) menambahkan JavaScript (Js) khusus.
Salin atau Copy kode di bawah ini:
Paste atau Tempel, TEPAT di atas kode </head> atau di bawah kode <head> kemudian simpan template blog.
Selanjutnya, kamu harus menambahkan satu buah JavaScript (Js) di bawah ini, TEPAT di atas kode </body> di template blogger yang kamu gunakan.
Selanjutnya ketuk tombol Save Template! Ok selesai.
Jika kamu belum memiliki 2 buah kode yang sudah ditandai, maka ikuti langkah-langkah di bawah ini.
Ubah kode di atas:
...dengan kode yang sudah kamu dapatkan barusan:
Kemudian simpan template blogger.
Jika di atas merupakan tutorial cara mendapatkan FB Admin, kali ini kamu harus mendapatkan kode FB Aplikasi ID. Caranya?
Pada tahap ini kamu akan ditampilkan sebuah deretan angka yang cukup panjang dengan judul App ID. Praktiknya seperti ini:
Ubah kode di bawah ini:
...dengan atau seperti kode di bawah ini:
Lalu ubah kode di bawah ini (kode yang ada di JavaScript di atas):
...dengan atau seperti kode di bawah ini:
Akhiri sesi ini dengan menyimpan perubahan template blogger yang sudah dilakukan.
Untuk mengecek apakah tutorial ini berhasil atau tidak di template blogger yang kamu gunakan, maka masukkan salah satu URL artikel kamu di situs Facebook Debugger.
Ketika sebuah artikel (post/content) dibagikan ke sosial media, biasanya akan menampilkan satu gambar artikel, istilah lainnya yakni "Image Thubmbnail".
Secara umum, "Image Thubmbnail" memiliki definisi yang luas. Praktisnya, "Image Thubmbnail" adalah gambar perwakilan dari sebuah artikel; istilah ini bisa digunakan apabila kondisinya di homepage (auto-readmore), ketika artikel dibagikan (share), dan seterusnya.
Jika kamu bingung, silakan cek gambar di bawah ini:
Gambar di atas merupakan salah satu Content dari suatu blog, yang dibagikan ke Facebook. Terlihat ada gambar utamanya. Nah, gambar inilah yang dimaksud dengan "Image Thubmbnail".
Pertanyaannya, bagaimana cara mengatasi dan memperbaiki gambar thumbnail artikel blog yang menghilang ketika dibagikan (share) ke Facebook?
Cara Mengatasi Gambar Posting Blog tidak Muncul saat Share ke Facebook
Gambar posting blog tidak muncul ketika di share ke Facebook, disebabkan karena template blogger tersebut belum terpasang kode Meta Tag Open Graph Facebook.
Yang perlu kamu lakukan yakni (1.) menambahkan dan/atau memasang Meta Tag Facebook Open Graph dan (2.) menambahkan JavaScript (Js) khusus.
Salin atau Copy kode di bawah ini:
<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:post.snippet' name='og:description'/> <b:else/> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='KODE-APLIKASI-FB' property='fb:app_id'/> <meta content='KODE-ADMIN-FB' 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'/>
Paste atau Tempel, TEPAT di atas kode </head> atau di bawah kode <head> kemudian simpan template blog.
Selanjutnya, kamu harus menambahkan satu buah JavaScript (Js) di bawah ini, TEPAT di atas kode </body> di template blogger yang kamu gunakan.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI-FB',
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>
Selanjutnya ketuk tombol Save Template! Ok selesai.
Jika kamu belum memiliki 2 buah kode yang sudah ditandai, maka ikuti langkah-langkah di bawah ini.
Cara Membuat dan Mendapatkan FB Admin (fb:admin)
- Kunjungi situs web Find My FB ID
- Masukkan URL akun Facebook kamu, misalnya https://www.facebook.com/ariefghozaly24
- Ketuk tombol Find Numeric ID
Ubah kode di atas:
<meta content='KODE-ADMIN-FB' property='fb:admins'/>
...dengan kode yang sudah kamu dapatkan barusan:
<meta content='20002984934899' property='fb:admins'/>
Kemudian simpan template blogger.
Cara Membuat dan Mendapatkan FB App ID (fb:app_id)
Jika di atas merupakan tutorial cara mendapatkan FB Admin, kali ini kamu harus mendapatkan kode FB Aplikasi ID. Caranya?
- Masuk ke Developer Facebook, ketuk tombol Register
- Ketuk menu Create a New App ID, pilih Situs Web, lalu pilih Kategori
- Selanjutnya, ketuk Create App ID
Pada tahap ini kamu akan ditampilkan sebuah deretan angka yang cukup panjang dengan judul App ID. Praktiknya seperti ini:
Ubah kode di bawah ini:
<meta content='KODE-APLIKASI-FB' property='fb:app_id'/>
...dengan atau seperti kode di bawah ini:
<meta content='442420934890029849' property='fb:app_id'/>
Lalu ubah kode di bawah ini (kode yang ada di JavaScript di atas):
appId : 'KODE-APLIKASI-FB',
...dengan atau seperti kode di bawah ini:
appId : '442420934890029849',
Akhiri sesi ini dengan menyimpan perubahan template blogger yang sudah dilakukan.
Untuk mengecek apakah tutorial ini berhasil atau tidak di template blogger yang kamu gunakan, maka masukkan salah satu URL artikel kamu di situs Facebook Debugger.
Labels: Tutorial Blogger
Thanks for reading Cara Mengatasi Gambar Posting Blog tidak Muncul saat Share ke Facebook. Please share this article.
0 Response to "Cara Mengatasi Gambar Posting Blog tidak Muncul saat Share ke Facebook"
Post a Comment
Punya masalah? Hubungi kami di Pemecah Masalah.
Silakan bertanya secara spesifik agar kami mudah dalam menjawabnya :)