Cara Mengatasi Gambar Posting Blog Tidak Muncul Ketika 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" mempunyai definisi yang luas. Praktisnya, "Image Thubmbnail" yakni gambar perwakilan dari sebuah artikel; istilah ini sanggup dipakai apabila kondisinya di homepage (auto-readmore), ketika artikel dibagikan (share), dan seterusnya.
Jika kau 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 lantaran template blogger tersebut belum terpasang aba-aba Meta Tag Open Graph Facebook.
Yang perlu kau lakukan yakni (1.) menambahkan dan/atau memasang Meta Tag Facebook Open Graph dan (2.) menambahkan JavaScript (Js) khusus.
Salin atau Copy aba-aba di bawah ini:
Paste atau Tempel, TEPAT di atas aba-aba </head> atau di bawah aba-aba <head> kemudian simpan template blog.
Selanjutnya, kau harus menambahkan satu buah JavaScript (Js) di bawah ini, TEPAT di atas aba-aba </body> di template blogger yang kau gunakan.
Selanjutnya ketuk tombol Save Template! Ok selesai.
Jika kau belum mempunyai 2 buah aba-aba yang sudah ditandai, maka ikuti langkah-langkah di bawah ini.
Ubah aba-aba di atas:
...dengan aba-aba yang sudah kau dapatkan barusan:
Kemudian simpan template blogger.
Jika di atas merupakan tutorial cara mendapat FB Admin, kali ini kau harus mendapat aba-aba FB Aplikasi ID. Caranya?
Pada tahap ini kau akan ditampilkan sebuah formasi angka yang cukup panjang dengan judul App ID. Praktiknya menyerupai ini:
Ubah aba-aba di bawah ini:
...dengan atau menyerupai aba-aba di bawah ini:
Lalu ubah aba-aba di bawah ini (kode yang ada di JavaScript di atas):
...dengan atau menyerupai aba-aba 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 kau gunakan, maka masukkan salah satu URL artikel kau di situs Facebook Debugger. Sumber http://addbloggerthemes.blogspot.com
Ketika sebuah artikel (post/content) dibagikan ke sosial media, biasanya akan menampilkan satu gambar artikel, istilah lainnya yakni "Image Thubmbnail".
Secara umum, "Image Thubmbnail" mempunyai definisi yang luas. Praktisnya, "Image Thubmbnail" yakni gambar perwakilan dari sebuah artikel; istilah ini sanggup dipakai apabila kondisinya di homepage (auto-readmore), ketika artikel dibagikan (share), dan seterusnya.
Jika kau 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 ketika Share ke Facebook
Gambar posting blog tidak muncul ketika di share ke Facebook, disebabkan lantaran template blogger tersebut belum terpasang aba-aba Meta Tag Open Graph Facebook.
Yang perlu kau lakukan yakni (1.) menambahkan dan/atau memasang Meta Tag Facebook Open Graph dan (2.) menambahkan JavaScript (Js) khusus.
Salin atau Copy aba-aba 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 aba-aba </head> atau di bawah aba-aba <head> kemudian simpan template blog.
Selanjutnya, kau harus menambahkan satu buah JavaScript (Js) di bawah ini, TEPAT di atas aba-aba </body> di template blogger yang kau 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 kau belum mempunyai 2 buah aba-aba 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, contohnya https://www.facebook.com/ariefghozaly24
- Ketuk tombol Find Numeric ID
Ubah aba-aba di atas:
<meta content='KODE-ADMIN-FB' property='fb:admins'/>
...dengan aba-aba yang sudah kau 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 mendapat FB Admin, kali ini kau harus mendapat aba-aba FB Aplikasi ID. Caranya?
- Masuk ke Developer Facebook, ketuk tombol Register
- Ketuk hidangan Create a New App ID, pilih Situs Web, kemudian pilih Kategori
- Selanjutnya, ketuk Create App ID
Pada tahap ini kau akan ditampilkan sebuah formasi angka yang cukup panjang dengan judul App ID. Praktiknya menyerupai ini:
Ubah aba-aba di bawah ini:
<meta content='KODE-APLIKASI-FB' property='fb:app_id'/>
...dengan atau menyerupai aba-aba di bawah ini:
<meta content='442420934890029849' property='fb:app_id'/>
Lalu ubah aba-aba di bawah ini (kode yang ada di JavaScript di atas):
appId : 'KODE-APLIKASI-FB',
...dengan atau menyerupai aba-aba 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 kau gunakan, maka masukkan salah satu URL artikel kau di situs Facebook Debugger. Sumber http://addbloggerthemes.blogspot.com
0 Response to "Cara Mengatasi Gambar Posting Blog Tidak Muncul Ketika Share Ke Facebook"
Posting Komentar