Android, SEO, Tutorial Blogger, Templates Blogger, Belajar Seo, dll.

Tips Memasang Widget Facebook Recommendation Bar di Blogger

Facebook Recommendation Bar


Berikut ini Tips memasang Widget Facebook Recommendation Bar di blogger anda :

Create Facebook App ID

Langkah pertama membuat Facebook Application untuk mendapatkan App ID untuk widget Facebook Recommendation Bar
  • Buka Facebook Developer Page
  • Jika sudah pernah membuat Aplikasi Facebook sebelumnya tinggal klik Buat Aplikasi Baru
  • Setelah pop-up Create New App muncul, ketik Recommendation bar di kolom Nama Aplikasi lalu klik Lanjutkan
  • Masukkan Chaptcha lalu klik Submit
  • Sekarang klik Situs web dengan Masuk Log Facebook tab dan masukkan alamat blog anda disana, lalu klik Simpan Perubahan

  • Sekarang Facebook App ID sudah siap, copy App ID tersebut untuk digunakan di dalam blog anda

Tips Memasang Widget Facebook Recommendation Bar di Blogger

  • Login ke Dashbord blog anda
  • Klik Template > Edit HTML
  • Cari kode (CTRL+F) <html lalu ganti dengan code dibawah ini
<html xmlns:fb='http://ogp.me/ns/fb#'
  • Cari kode </body> lalu paste kode berikut sebelum / diatas kode </body>
<div id='fb-root'/>
<script>
//Facebook Recommendation bar tutorial by www.mas-helmi.blogspot.com
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your-App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
  • Ganti Your-App-ID dengan Facebook App ID yang tadi telah di copy sebelumnya
  • Cari kode </head> lalu pate kode berikut sebelum / diatas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  • Lalu yang terakhir cari kode <data:post.body/> paste kode berikut setelah / dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://mas-helmi.blogspot.com' trigger='40%'/></div>
</b:if></b:if>
  • num_recommendations: ini merupakan jumlah posting yang akan ditampilkan, Anda dapat menyesuaikan dengan mengedit 3
  • Side: widget akan mengapung ke kanan secara default, untuk memindahkan ke kiri, tinggal mengubah right menjadi left
  • Trigger: widget akan memperluas setelah pembaca menscroll ke bawah sampai 40% pada halaman blog Anda
  • Ganti http://mas-helmi.blogspot.com dengan url blog Anda
  • Langkah terakhir Simpan template anda.
Semoga Berhasil...

Tips Memasang Widget Facebook Recommendation Bar di Blogger Rating: 4.5 Diposkan Oleh: Unknown