Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook
January 17, 2017
SEBELUMNYA kode Facebook Open Graph Protocole untuk Blogger ini sudah CB share di blog demo New Johny Wuss. CB posting ulang di sini sekaligus updata kodenya yang lebih lengkap.
Masalah ini sering dihadapi blogger yang templatenya belum terpasang Meta Tags khusus untuk share ke Facebook.
Pemasangan kode ini juga guna mengatasi pesan error yang muncul "Aplikasi Belum Disiapkan: Aplikasi ini sedang dalam pengembangan, dan Anda tidak dizinkan untuk mengaksesnya. Beralih ke penguji aplikasi yang terdaftar atau meminta izin seorang pengurung aplikasi untuk mendapatkan akses".
5. Save! Simpan template.
6. Ukuran Gambar Penting!
Misalnya ada yang tanya di kolom komentar, halo mas CB-blogger. numpang tanya kenapa kok beberapa hari ini setiap kali saya ingin share postingan blog saya ke akun facebook menggunakan tombol share yang ada pada blog saya selalu muncul pemberitahuan seperti ini "Aplikasi Belum Disiapkan: Aplikasi ini sedang dalam pengembangan, dan Anda tidak dizinkan untuk mengaksesnya. Beralih ke penguji aplikasi yang terdaftar atau meminta izin seorang admin aplikasi untuk mendapatkan akses" mohon pencerahannya.
Cara Pasang Meta Tag Facebook Open Graph
Berikut ini cara memasang Meta Tag Facebook Open Graph (OG) untuk mengatasi gambar dan judul posting blog yang tidak muncul saat share ke Facebook.
1. Di Dashboard, klik "Template" > "Edit HTML"
2. Simpan kode berikut ini 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: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-ANDA' property='fb:app_id'/>
<meta content='KODE-ADMIN-FB ANDA' 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'/>
3. Pasang kode berikut ini di bawah kode <body> atau <body .... ada kode lain... />
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI-FB-ANDA',
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>
4. Ganti tulisan wara merah dengan kode atau App ID punya Anda. Temukan App ID Facebook Anda di Cara Menemukan Kode App ID Facebook.
6. Ukuran Gambar Penting!
Pastikan gambar ilustrasi posting yang diupload berukuran minimal 200x200 pixel atau ideaknlnya minimal 600×300 pixels. Facebook akan mengambil gambar paling besar yang ada di halaman yang di-share.
7. Cek salah satu posting di Facebook Debugger. Masukkan linknya dan klik fetch new scrape information.
Jika cara di atas dikerjakan dengan cermat dan semuanya berjalan lancar, maka hasilnya akan seperti salah satu gambar di bawah ini saat dishare di Facebook:
Jika cara di atas dikerjakan dengan cermat dan semuanya berjalan lancar, maka hasilnya akan seperti salah satu gambar di bawah ini saat dishare di Facebook:
Demikian cara pasang meta tag Open Graph Protocole untuk Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook. Good Luck & Happy Blogging! (www.contohblog.com).*
Sumber
- http://techinfoknow.com/open-graph-blogger
- http://www.brokeragesdaytrading.com/article/881245708/how-to-install-facebook-s-open-graph-meta-tag-technology/
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Terima kasih mas atas perkongsiannya.. Patut la blog saya seringkali hilang gambarnya..
ReplyDeleteMau ngassi tau gan, template blog ini versi mobile tulisan navigation sebelah menu keluar jalur
ReplyDeleteOk, thanks.....
Deletetemplate saya sudah ada skrip diatas
ReplyDeletegambar yang diposting ukurannya 680 x 380
namun tetap tidak muncul