Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook
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/
Labels: Desain Blog, Media Sosial
<< Home