Malam sobat blogger, dah lama newbie blogger satu ini tidak share sesuatu,, maklum saja dengan segudang aktifitas saya, mulai dari urusan pekejaan, hingga
ngurusin bisnis sampingan dirumah, membuat saya harus mengesampingkan belajar
ngeblog.
Setelah saya blogwalking kesana sini, ternyata sudah banyak sekali blog yang sudah memasang widget
facebook recommendation bar.
Saya pun langsung tertarik memasangnya pada blog saya, untuk demonya sobat dapat lihat di sidebar blog ini, Bagaimana Keren bukan??
Apa sobat ingin juga memasangnya?? tanpa basa basi langsung saja cekidot.
1. Membuat Facebook Application
- Login Dahulu ke Facebook, Lalu buka tautan 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
- Selanjutnya, masukkan kode captcha dan klik Submit
- 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".
- Setelah itu akan muncul informasi App Id dan App Secret. Copy angka-angkan pada App ID, simpan di tempat yang aman. Lihat gambar dibawah:
2. Memasang Widget Facebook Recommendation Bar Pada Blog
Login ke Blogger
Pada menu Dashboard, pilih Template › Edit HTML › Proceed.
Cari kode 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.
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 - ngetips.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://www.ngetips.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://www.ngetips.com dengan url blog sobat.
- Save template dan coba cek hasilnya.
Catatan :
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.
Semoga Bermanfaat .
Source :
Buka-Rahasia