Home Tutorial Blogger Facebook Recommendation Bar Versi HTML5 Untuk Blogger

Facebook Recommendation Bar Versi HTML5 Untuk Blogger

4 Komentar

Beberapa waktu yang lalu, Facebook telah merilis sebuah Plugin yang bernama Bar Recommendation untuk blogger/website yang pada dasarnya bertujuan untuk meningkatkan jumlah pageviews halaman blog/web dengan cara merekomendasikan artikel-artikel kepada pengunjung. Artikel dimaksudkan disini adalah artikel yang mempunyai persentase tertentu beserta jumlah like / suka minimal 1 (satu).

Plugin bar rekomendasi ini menampilkan image thumbnail berukuran kecil dan diikuti oleh judul postingan dan akan muncul setiap saat pada saat scroll mencapai 40% dari total keseluruhan scroll. Selain itu, fitur ini juga dilengkapi dengan tombol expanded/collapsed sehingga tidak akan mengganggu kenyamanan pengunjung serta dilengkapi dengan tombol like yang berada pada sudut kiri bar recommendation.

Facebook Recommendation Bar Versi HTML5 Icon

Sekarang, pada postingan ini, saya akan membahas tentang bagaimana cara membuat dan memasang plugin Bar Recommended Facebook Versi HTML5 dan bukan versi XFBML dan pada versi ini juga tidak didukung oleh Iframe.

Langkah-Langkah Penginstalan Ke Blogger

Terdapat 2 (dua) tahap yang akan dilakukan dalam pembuatan dan pemasangan plugin ini, yang pertama proses untuk mendapatkan Facebook App ID dan yang kedua adalah langkah penginstallan pada blogger.

1. Mendapatkan Facebook App ID

  • Login Facebook dan buka Apps Facebook
  • Pada sudut kanan atas, klik "+Create New App"
  • Pada box popup, isi nama aplikasi yang anda inginkan (lihat gambar di bawah) kemudian lanjutkan dengan mengklik tombol "Continue"
Facebook Recommendation Bar Versi HTML5 Create App
  • Selanjutnya, masukkan kode captcha dan klik "Submit"
  • Pada tahap selanjutnya, anda akan diarahkan halaman basic. Lihat gambar di bawah ini untuk lebih jelasnya.
Facebook Recommendation Bar Versi HTML5 Get App ID

[Klik gambar untuk memperbesar]

Keterangan :
  1. Copy app id tersebut ke notepad atau dimana saja karena app id tersebut yang nantinya akan digunakan pada tahap menginstall plugin ke blogger
  2. Masukkan email anda
  3. Masukkan URL alamat blog/website anda
  4. Lanjutkan dengan mengklik tombol "Simpan / Save"

2. Menginstall Plugin ke Blogger

  • Login ke Blogger
  • Pada menu Dashboard, pilih Template › Edit HTML › Proceed
  • Copy kode di bawah ini dan letakkan tepat di bawah tag <body>
<div id="fb-root"/><script>(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&amp;appId=Facebook_App_ID";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<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;'>
<div class="fb-recommendations-bar" data-trigger="40%" data-read_time="10" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num_recommendations="3"></div>
</div>
</b:if>
</b:if>
NB : Jika di dalam template anda sudah terdapat script yang lama, maka ganti dengan script tersebut dengan script yang ada di atas.
  • Ganti Facebook_App_ID dengan App ID yang sebelumnya sudah anda copy
  • Jangan simpan dulu, tetapi lanjutkan dengan mengcopy "Open Graph" facebook di bawah ini tepat di bawah tag <head>
<!--OPEN GRAPH metadata STARTS-->
<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'/>
<!--OPEN GRAPH metadata ENDS-->
  • Simpan Template.
    Nah, untuk melihat hasilnya, silahkan anda buka salah satu postingan yang telah anda buat.
    Next Post
    Previous Post

    Artikel Terkait

    Unknown
    Unknown

    4 comments:
    Write comment
    1. Dunia Marketing AjaFebruary 07, 2013

      thank atas artikelnya...
      saya sudah memaangnya di blog saya ...
      http://mitradecapri.blogspot.com/

      ReplyDelete
    2. UnknownMarch 28, 2013

      maaf saya blogger dari malaysia
      cuma saya tak faham kenapa masih belum keluar juga
      setelah semua selesai dilakukan?
      ada cara lain tak?
      http://uwaisaminin.blogspot.com/

      ReplyDelete
      Replies
      1. UnknownMarch 28, 2013

        Coba cari script yang seperti ini <div id="fb-root"/><script> .... </script>, jika ada, hapus kode tersebut kemudian ganti dengan script yang saya tandai dengan warna biru pada tutorial nomor 2 diatas...!!!

        Delete
    3. sunanJuly 17, 2013

      Gan ane udah sukses tapi kok dia sembunyi ya' gak langsung terbuka, itu solusinya gimna ??

      ReplyDelete