Cara Memasang Facebook Recommendation Bar di Blogger
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.
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".
6. Setelah itu akan muncul informasi App Id dan App Secret. Copy angka-angkan pada App ID, simpan di tempat yang aman. Berikut contohnya:
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.
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 == "item"'><b:if cond='data:blog.pageType != "static_page"'><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.
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.
Author:
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.
Itu saya bilang dulunya, waktu dalam versi beta, sekarang sudah jauh lebih enteng.
Ya itu old version, coba di ganti dengan yang di atas dan lihat hasilnya.
berguna banget mas :D
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
terima kasih artikelnya..... dicoba
Info Bagus and keren , makasih mas ...
@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 >
gan apa itu terintegrasi sama facebook page?
@Wahyu: Tidak, sama sekali tidak ada hubungannya.
Terimakasih gan atas share nya akan saya coba dulu deh,,,,
Izin menyimak artikelmu sob..
Artikel yang bagus..
#Salam dari saya.. Admin Tutorial Blogz
wah terima mas infonya :D
Bagus bangit
sdh di coba & berhasil tetapi di halaman statis tdk mau tampil mohon bimbingannya. terima kasih ilmunya mg Anda dpt Rizki byk ...
thanks infonya berguna banget gan,,,,!!
mas azmi.. punya saya ko' hanya menampilkan judul blog na saja? bukan menampilkan postingan yang ada di blog.
mohon pencerahannya mas.
@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.
Thx gan
klo saya kok g bisa buat aplikasi nya yah mas ??
tolong di jawab dong
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.
rada ribet yah gan..
tapi infonya mantap..
http://in2bis.blogspot.com/
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.
@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.
ngapain ya gan kalo masuk ke template mau edit html kok balik ke link yang lain trus kosong halamannya tu,,, mohon minta sarannya,,, :)
terimakasih bapak, akhirnya saja bisa juga silahkan koreksi di http://lucuunik-aneh.blogspot.com
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
@Prabu: Saya belum pernah melihat seperti itu, coba nanti saya cek, ada apa tidak, setahu saya Facebook cover tidak bisa diapa2kan...
alhamdulillah berhasil mas azmi.
terimakasih mas atas tutornya :)
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..
maksih mas anda telah memberikan aku ilmu yg cukup menarik....
lumayan membantu thanks sob
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
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.
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.
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.
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
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/
Thenkz atas info y mas....?
:)
smga kbaikan mas di blas ma yg di atas....
Informasinya sangat bermanfaat mas. Terimakasih.
udah saya coba di blog saya dan sukses pak,.
makasih ya,.
terimaksih artikelnya bagus...
Mohon info setelah saya pasang di www.mistikus-sufi.blogspot.com, kok hanya muncul The Parameter aja?
Post a Comment