Cara Memasang Facebook Recommendation Bar di Blogger

Blogger Facebook Recommendation Bar.
Akhir 2011 lalu Facebook mengumumkan akan menambahkan fitur baru yaitu "Facebook Recommendation Bar". Akhir Juni 2012 lalu, fitur ini kemudian dirilis dalam bentuk beta. Saya sudah pernah mencobanya, namun karena terlalu berat, dan terlalu banyak fitur, maka saya kembali melepaskannya. Beberapa waktu kemudian, fitur seperti "Add to Timeline" yang juga muncul di recommendation bar tersebut dihilangkan. Script diperbaiki sehingga menghasilkan load yang lebih cepat dan efisien. Settingnya pun bisa dikostumisasi sendiri dengan mengubah beberapa parameter sehingga sesuai dengan keinginan pemilik web/blog.

Pada dasarnya, script Facebook Recommendation Bar berbasis pada pengambilan (fetching) beberapa meta informasi di dalam blog/web; sehingga basic penggunaanya tergantung pada template dan susunan strukturnya. Penggunaan fitur ini ditujukan sebagai alat rekomendasi posting/artikel setelah pembaca artikel blog selesai membaca sebuah artikel. Secara default, recommendation bar akan terbuka secara otomatis dalam waktu dan posisi tertentu pada sebuah halaman, berisi beberapa rekomendasi posting (default 3 buah), dan juga sebuah like button.

Ada Manfaat atau Keuntungan Menggunakan Facebook Recommendation Bar?

Tentu saja ada! Facebook Recommendation Bar telah saya buktikan memberikan keuntungan yang sangat banyak. Di antaranya adalah meningkatkan jumlah pageview, meningkatkan traffic, mengurangi bounce rate, dan tentu saja meningkatkan revenue. Sinergi widget ini dengan widget lainnya seperti LinkWithin Related Posts, Recent Posts Widgets, dan beberapa widget sejenisnya akan memberikan dampak yang signifikan terhadap traffic blog. Facebook Recommendation Bar memiliki keunggulan menampilkan jumlah like pada sebuah post, dan ini akan menjadi daya tarik tersendiri bagi pembaca blog untuk mengetahui isi posting yang direkomendasikan.

Cara Menambahkan Widget Facebook Recommendation Bar

Widget ini bekerja berdasarkan otorisasi aplikasi. Kemungkinan anda gagal menggunakannya adalah karena menggunakan App ID milik user lain yang tidak diotorisasi untuk domain tertentu. Oleh karena itu, sebaiknya menggunakan Facebook App yang dibuat sendiri. So, langkah yang harus dilakukan dalam memasang widget ini adalah:

Langkah 1: Membuat Facebook Application

Note: Jika anda sudah memiliki aplikasi yang berkaitan atau digunakan di blog anda dan telah terotorisasi, lewati langkah ini. Langsung copy App ID yang tertera dan simpan terlebih dahulu.

1. Masuk ke halaman Facebook Apps (pastikan sudah login).
2. Klik Create New App.
3. Akan muncul pop up box, masukkan nama aplikasi (terserah saja, misalnya "Buka Rahasia Recommendation"). Klik continue.
create new app
4. Masukkan kode captcha, klik submit.
5. Anda akan masuk ke halaman setting aplikasi. Lihat pada bagian bawah, tepatnya pada "Website with Facebook Login". Klik, lalu masukkan url blog. Jangan klik opsi lainnya, karena ini akan menyebabkan kesalahan setting dan memang tidak perlu diaktifkan untuk jenis aplikasi ini. Lalu klik "Save Changes".
add app url
6. Setelah itu akan muncul informasi App Id dan App Secret. Copy angka-angkan pada App ID, simpan di tempat yang aman. Berikut contohnya:
app ID
Langkah 2: Menginstall Facebook Recommendation Bar

1. Masuk ke Blogger > Template > Edit HTML.
2. Kemudian setelah pop up box muncul, klik "proceed" (lanjutkan).
Note: Bila perlu backup template terlebih dahulu.
3. Cari kode ini:
<html 
Tujuannya adalah untuk memasukkan xlmns Facebook yang berfungsi sebagai fetcher, masukkan xmlns:fb='http://ogp.me/ns/fb#' tepat setelahnya. 
<html xmlns:fb='http://ogp.me/ns/fb#'
Oh ya, jika anda telah menggunakan xlmns:fb versi lama sebelumnya, hapus dan ganti dengan yang diatas.
4. Kemudian cari <body>. Pada template-template Blogger versi baru (simple, awesome, travel, dll), ada kemungkinan tambahan script atau informasi di belakang body, jadi cukup cari saja dengan <body (tanpa penutup). Copy kode berikut tepat setelahnya/di bawahnya:

<div id='fb-root'/>
<script>
//Facebook Recommendation bar - buka-rahasia.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=123456789012345";
  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;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://buka-rahasia.blogspot.com' trigger='50%'/></div>
</b:if></b:if>

Buat perubahan script di atas dengan petunjuk berikut:
  • Ganti 123456789012345 dengan App ID yang sebelumnya telah dibuat.
  • Ganti http://buka-rahasia.blogspot.com dengan url blog sobat.
5. Save template dan coba cek hasilnya.

Kostumisasi Tingkat Lanjut (Opsional)

Jika sobat ingin melakukan kostumisasi pada bagaimana Facebook Recommendation Bar ditampilkan, perhatikan poin-poin berikut:
  • max_age adalah maksimum usia posting yang akan ditampilkan dalam rekomendasi, ubah nilai 0 menjadi maksimal usia posting dalam hitungan hari, misalnya 100, berarti maksimal usia posting yang ditampilkan adalah 100 hari. Nilai 0 adalah default yang artinya tidak ada batasan usia posting.
  • num_recommendations adalah jumlah rekomendasi dalam setiap tampilan/load, ubah nilai 3 untuk menampilkan jumlah posting yang diinginkan.
  • read_time adalah waktu yang dibutuhkan untuk load seketika user/pembaca mencapai titik scroll dimana widget muncul dan menampilkan isi rekomendasi. Saya telah menyettingnya hingga sama dengan 10 detik, jika ingin widget menampilkan lebih lama, tambah nilai 10.
  • side adalah di sisi mana widget akan ditampilkan. Default settingan saya di atas adalah right dimana widget ditampilkan di sisi kanan. Jika ingin ditampilkan di sisi kiri, ubah menjadi left.
  • trigger adalah posisi awal dimana widget akan muncul. Setting di atas saya beri nilai 50% yang artinya widget akan muncul setelah user/pembaca blog scroll hingga separuh halaman. Ubah nilainya jika ingin widget muncul lebih ke atas atau ke bawah. Semakin besar nilai persentasenya, semakin ke bawah.
  • Script saya set untuk ditampilkan pada halaman posting dan statis (untuk halaman statis, tergantung template, kadang tidak ditampilkan), untuk menampilkan di semua halaman hapus tag b if conditional (semua yang berwarna pink). Untuk menampilkan di halaman-halaman tertentu lainnya, pelajari Menampilkan Widget Blogger hanya di Halaman Tertentu.

Analisa Permasalahan Jika Widget Tidak Bekerja Sempurna

Kemungkinan permasalahan yang akan muncul adalah gambar yang tidak sesuai, title yang salah dan sejenisnya. Beberapa template Blogger memiliki struktur yang tidak baik atau susunannya tidak sempurna sehingga ketika fetcher mengambil informasi, bisa terjadi kekeliruan atau bahkan kegagalan. Jika anda menemui masalah demikian, gunakan meta:og tambahan di dalam template blog anda. Simak tutorial selengkapnya di Memperbaiki Gambar & Deskripsi Posting/Blog di Facebook

Well, that's it and have a nice blogging!

© 2012- 'til drop! buka-rahasia.blogspot.com. All rights reserved.

Cara Memasang Facebook Recommendation Bar di Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 47 Comment(s):

Direkori Penerjemah said...

Waduh! Padahal awalnya pengen banget pasang widget bagus ini, mas. Cuma, karena ada tulisan agak berat untuk loading blog, jadi mundur deh :D

Makasih mas dah sharing artikel2 bermanfaatnya.

Unknown said...

Itu saya bilang dulunya, waktu dalam versi beta, sekarang sudah jauh lebih enteng.

Unknown said...

xmlns:fb='http://www.facebook.com/2008/fbml' kalo ini gmn mas? ini yg saya pake utk bikin komentar facebook dulu..gmn mas? apakah itu yg dimaksud yg versi lama? atau memang kode yg saya sebutkan ini sama sekali beerbeda dg kode yg utk membuat recommendation bar ini? makasih..bingung mode on T_T

Unknown said...

Ya itu old version, coba di ganti dengan yang di atas dan lihat hasilnya.

Unknown said...

berguna banget mas :D

Unknown said...

gan mau tanyak ne gan
agak melenceng tak apa ya gan :D
macem mna gan cara supaya nma header kita bisa muter macem punya agan
tolong agan posting donk
walaikumslm
mksh

Unknown said...

sudah saya pasang mas..cuman gambarnya masih logo blogger T_T padahal udah ikutin tips yg ini juga http://buka-rahasia.blogspot.com/2012/03/memperbaiki-gambar-deskripsi-facebook.html

apakah ada yg salah T_T

Administrator said...

terima kasih artikelnya..... dicoba

Anonymous said...

Info Bagus and keren , makasih mas ...

Unknown said...

@Habib: Memang fungsi meta:og yang ditambahkan adalah untuk menggantikan deskripsi atau gambar yang tidak ditemukan. Jadi kalo pake meta:og itu, gambar sesuai dengan gambar di meta:og. Jika anda mengalami masalah dengan opengraph, berarti ada masalah dengan struktur template blog. Coba beberapa meta tags dan title diletakkan lebih ke atas, atau tepat setelah < /head >

you said...

gan apa itu terintegrasi sama facebook page?

Unknown said...

@Wahyu: Tidak, sama sekali tidak ada hubungannya.

Unknown said...

Terimakasih gan atas share nya akan saya coba dulu deh,,,,

Muhammad Harish Abdurrahim said...

Izin menyimak artikelmu sob..
Artikel yang bagus..

#Salam dari saya.. Admin Tutorial Blogz

Unknown said...

wah terima mas infonya :D

Unknown said...

assalaamu'alaykumuwarohmatullohi wa barokaatuh...

salaam kenal Pak Guru (guru baru hihi), thank's banget atas ilmu2 nya yah... semoga Allah membalasnya dengan kebaikan yang bertubi2 aamiin.

btw blog Pak Guru kok templatenya sama dengan template terselubung.blogspot.com ya? namun yang ini lebih keren pastinya!! insya Allah.

saya mau bertanya nih Pak Guru, namun maaf sebelumnya, dan maaf juga banyak bertanya.. dan semoga di jawab. aamiin.

pertanyaanya
1. Blog saya templatenya baru, baru diganti maksudnya, namun kok kalo posting seperti yang daftar isi, kok caracternya yang paling kiri suka pada nyungseub ya? nyungseub 1 atau dua caracter paling kiri sih, termasuk pada widget tambahan-tambahanya lho...
2. sesiapapun pasti pada mau jadi master ya dalam sesuatau hal atau segala hal. Saya mau tanya Pak Guru bisa jagi ngeblog dari mana ya belajarnya... kalo bisa saya mau bisa silaturahim dong sama pak guru, kursus kursus lah kalo bisa :D hahai. (sumpah ngareup karena sekolah saya tidak mendukung IT hehe)
3. cara membuat SEO Google Index menjadi tinggi seperti halnya terselubung.blogspot.com dan juga islampos.com yang padahal baru daftar atau baru dibuat dalam beberapa bulan tapi sudah tinggi google indexnya itu bagaimana ya?
4. blog saya di www.kaze-kate.net | saya minta saran apa yang kurangnya Pak Guru (dan saya tahu yang pasti banyak bangeut kurangnya >.< mohon dimaklum ngeblog baru beberapa bulan juga hehe)
5. saya punya cita2 ingin bisa membuat situs besar dalam hidup saya untuk di Dunia, saya membuatnya dengan dosen saya, abang saya, guru saya, dan juga Ustadz2 saya.. mesinya wordpress.. bisa ajarin saya juga. entah mimpi apa semalam, namun rasanya saya cocok jika saya banyak belajar kepada bapak guru, saya tunggu jawabanya meski lama, dan semoga Allah memudahkan segala urusan bapak.

maaf jika saya salah, namun saya berharap bisa menjadi murid bapak, saya tunggu jawabanya meski lama..

syukran wa jazakumulloh.. semoga apa yang Bapak Guru lakukan selalu bermanfaat

Aamiin

Cikgu Naim said...

Bagus bangit

Anonymous said...

sdh di coba & berhasil tetapi di halaman statis tdk mau tampil mohon bimbingannya. terima kasih ilmunya mg Anda dpt Rizki byk ...

Unknown said...

thanks infonya berguna banget gan,,,,!!

Unknown said...

mas azmi.. punya saya ko' hanya menampilkan judul blog na saja? bukan menampilkan postingan yang ada di blog.
mohon pencerahannya mas.

Unknown said...

@semy:memang, seperti yang sudah saya bilang di posting, beberapa template tidak akan menampilkan di halaman statis meskipun sudah diberi pengondisian. Tapi sebenarnya di halaman statis ga penting itu, jadi ga masalah.

@Saifur: Maksudnya menampilkan judul blog saja bagaimana? Posting emang tidak ditampilkan di recommendation bar.

Unknown said...

Thx gan

Afika said...

klo saya kok g bisa buat aplikasi nya yah mas ??
tolong di jawab dong

Unknown said...

Sukses gan pasangnya, hihi makasi ya

Unknown said...

mas mau nanya nih,semua tutorial di atas sudah saya terapkan.
permasalahn: Kenapa sudah seminggu yang tampil pada rekomendasi bar nya hanya itu,sementara postingan tersebut sudah terlewati hampir 10 pos lebih.
untuk perhatiannya terima kasih.

(mr) said...

rada ribet yah gan..
tapi infonya mantap..

http://in2bis.blogspot.com/

Marlon Alamo said...

Mohon bimbingannya,pak Ahmad Khoirul Azmi, saya Newbie banget nih. Setelah 3 bulan saya berselancar di blogger,ternyata Buka-Rahasia paling so mantap skali dah. Saya berniat mo berguru ke Blog bapak. kan "trainning is never ending action" to?. Saya mo Joint to Our-Team. n Like this blog.

Unknown said...

@Kaze kate, Mario, dan yang komentarnya berhubungan dengan belajar bareng soal blog, lebih baik didiskusikan lewat email atau facebook message. Bisa dilihat info akun atau emailnya di blog ini.

@Juax criex: memang crawling dan cache Facebook sering mengalami error sehingga yang ditampilkan itu-itu saja. Lebih baik cache Facebook untuk blog anda di-debug saja dengan debuggernya Facebook, masuk kesini:

http://developers.facebook.com/tools/debug

Sekalian juga untuk cek apakah meta:og blog anda sudah benar.

Andri Puji Utami said...

ngapain ya gan kalo masuk ke template mau edit html kok balik ke link yang lain trus kosong halamannya tu,,, mohon minta sarannya,,, :)

Anonymous said...

terimakasih bapak, akhirnya saja bisa juga silahkan koreksi di http://lucuunik-aneh.blogspot.com

prabu said...

artikel yg bagus dan bermanfaat
mas bisa bikin foto sampul facebook bergerak ga mas,atau membuat link aktif di foto sampul facebook seperti gambar iklan hotel di blog2,
mas bikin donk artikel tersebut, di tunggu

Unknown said...

@Prabu: Saya belum pernah melihat seperti itu, coba nanti saya cek, ada apa tidak, setahu saya Facebook cover tidak bisa diapa2kan...

Anonymous said...

alhamdulillah berhasil mas azmi.
terimakasih mas atas tutornya :)

Unknown said...

Bang aku habis masukin widget ini, habis edit template kok keluar beginian ya? "http://blog-peer.blogspot.com/b/app-preview?token=eigHojwBAAA.fR2am0UenCM0Ukl4oPIqMA.DcKTdOw87CW721lQhw3iSw" Pencerahnannya bang..

Unknown said...

maksih mas anda telah memberikan aku ilmu yg cukup menarik....

De_ones said...

lumayan membantu thanks sob

Unknown said...

mas saya sudah ikuti instruksi di atas tapi kok hasilnya saya malah dapat kayak gini

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The value of attribute "xmlns:fb" associated with an element type "null" must not contain the '<' character. ini gimana solusinya saya jadi bingung

Unknown said...

itu berarti tidak ada < pembuka ketika anda memasukkannya. Apakah sudah dimasukkan ke dalam tag <html dengan benar seperti instruksi di atas? Informasikan dengan detil, help me helping you.

Dani said...

Setelah saya masukin captcha & klik continue, kok jadi terutup seperti semula, nggak ke halaman setting aplikasi ya Mas?

Jadinya saya tak bisa mendapatkan app id.

Unknown said...

Kalo halaman aplikasi sudah dibuat, mulai lagi dari awal halaman aplikasi, lihat di sebelah kanan, aplikasi yang tadi dibuat ada tidak. Kalo berhasil dan ada, klik nama aplikasi tersebut, informasi app id dan app key ada di bagian atas.

bang dull said...

salam blog untuk para master.ane mampir ye untuk mencari tau soal nge blog soalnya ane baru buat blog.jadi gak tau gimana cara nge recomendasinya.di bog ini saya mungkin bisa mengerti soalnya blog ini bagus dan keren.oke makasi..salam blog

Unknown said...

Wah,. infonya lengkap bgt,.kebetulan lg belajar nih..
cara diatas udah sy praktekin tp gak berhasil (gak ada perubahan apapun),.!!
kira2 masalahnya apa ya,.??
mohon bantuannya!!
makasih,. semoga kebaikannya menjadi kebaikan.

oh,. ini blog sy: http://cepgibransfashionstore.blogspot.com/

Unknown said...

Thenkz atas info y mas....?

:)

smga kbaikan mas di blas ma yg di atas....

alhamdulillah said...

Informasinya sangat bermanfaat mas. Terimakasih.

Unknown said...

udah saya coba di blog saya dan sukses pak,.
makasih ya,.

Anonymous said...

terimaksih artikelnya bagus...

Mistikus Cinta said...

Mohon info setelah saya pasang di www.mistikus-sufi.blogspot.com, kok hanya muncul The Parameter aja?

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap