Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook
Cara Pasang Meta Tag Facebook Open Graph untuk Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook.

SEBELUMNYA isyarat 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 isyarat 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 mendapat akses".

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 memakai tombol share yang ada pada blog saya selalu muncul pemberitahuan menyerupai 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 mendapat 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 ketika share ke Facebook.

1. Di Dashboard, klik "Template" > "Edit HTML" 
2. Simpan isyarat berikut ini di bawah isyarat <head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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 isyarat berikut ini di bawah isyarat <body> atau <body .... ada isyarat 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 goresan pena wara merah dengan isyarat atau App ID punya Anda. Temukan App ID Facebook Anda di Cara Menemukan Kode App ID Facebook.

5. Save! Simpan template.

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 jadinya akan menyerupai salah satu gambar di bawah ini ketika dishare di Facebook:

Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook


Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke 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.idtutorial.com).*

Sumber
  • http://techinfoknow.com/open-graph-blogger
  • http://www.brokeragesdaytrading.com/article/881245708/how-to-install-facebook-s-open-graph-meta-tag-technology/

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours