January 17, 2017

Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook

January 17, 2017

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 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".

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 == &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 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.

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 hasilnya akan seperti salah satu gambar di bawah ini saat dishare di Facebook:

posting share facebook


posting share 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
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Mengatasi Gambar Posting Blog yang Tidak Muncul Saat Share ke Facebook

  1. Terima kasih mas atas perkongsiannya.. Patut la blog saya seringkali hilang gambarnya..

    ReplyDelete
  2. Mau ngassi tau gan, template blog ini versi mobile tulisan navigation sebelah menu keluar jalur

    ReplyDelete
  3. template saya sudah ada skrip diatas
    gambar yang diposting ukurannya 680 x 380
    namun tetap tidak muncul

    ReplyDelete

Contact Form

Name

Email *

Message *