Langsung ke konten utama

Facebook Recommendation Bar di Blogger

ini adalah link yang saya jadikan reverensi untuk membuat Facebook Recommendation Bar di Blogger, ada beberapa hal yang menghambat kamu ketika memasukkan scrip
jadi jangan takut untuk menghapus beberapa scrip agar error bisa teratasi


hasilnya sekarang disebelah kanan pojok bawah ada tulisan yang bisa anda lihat dan like jika mau.


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.
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://blog KAMU' 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://blog KAMU 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).
 Sumber: http://buka-rahasia.blogspot.com/2012/11/Cara-memasang-facebook-recommendation-bar-di-blogger.html[diakses pada 17-01-2013]

Komentar

Postingan populer dari blog ini

Pengertian dan Peran dari Forkopimda Forkopimcam, Muspida, hingga Muspika

Masih banyak yang bertanya-tanya, apa itu arti dari Forkopimda, Forkopimcam, Muspida, dan Muspika? Serta apa peran mereka dalam pemerintahan? Kali ini kita akan bahas pengertian dan peran apa itu Forkopimda Forkopimcam, Muspida, dan Muspika. Serta perangkat yang terlibat dalam setiap kelompok forum atau musyawarah tersebut. Selain untuk menambah wawasan pengetahuan, ini juga penting untuk pemahaman kita mengetahui peranan mereka yang terlibat dalam urusan pemerintahan. Semua perangkat tersebut memiliki funsi yang saling berhubungan satu sama lainnya. Pada fungsi koordinasi antar unsur forkopimda dalam pelaksanaan pembangunan dan penyelesaian masalah-masalah aktual di daerah. Agar terbangun konektivitas antar pusdalsis kabupaten/kota dan provinsi. Hal itu bisa terjalankan dengan adanya kerjasama dan relasi bersama Forkopimcam. Merujuk pada Undang-undang Nomor 23 tahun 2014 pasal 26 tentang Pemerintah Daerah. Demikian juga Komunitas Intelejen Daerah (kominda) melaksanakan perannya sebaga...

Cara Memindah Tata Letak Yang Tidak Bisa Dipindah

Hai ini sering dipartanyakan oleh mereka blogger pemula, "Kok nggak bisa digeser,?" Pertanyaan itulah yang memberi saya ide untuk kembali mengutak-atik template. Toh, cukup membantu kan.? ^_^

Cek Koneksi dengan ping 8.8.8.8 -t dan Cara Membacanya

  Bagi seorang operator dapodik disekolah kebutuhan untuk mengecek koneksi internet adalah hal yang lumrah, c ara termudah tentu saja anda membuka browser lalu mencoba mengunjungi situs tertentu seperti google.com , gmail.com , youtube.com atau juga facebook.com . namun menurut saya cara ini kurang dapat memberikan informasi yang lengkap. karena terkadang saat kita mengunjungi sebuah situs/web, dan tidak bisa terbuka , bukan berarti koneksi kita yang bermasalah. bisa jadi juga karena browser yang terkena virus atau juga situs tersebut sedang down (tidak bisa di akses). Oleh karena itu berikut ini tips  Cek Koneksi dengan ping 8.8.8.8 -t dan Cara Membacanya  tanpa perlu membuka browser dan juga memberikan informasi yang lebih lengkap. Koneksi yang di atas menunjukkan bahwa koneksi tidak stabil dan kurang cepat, hal ini dapat dilihat melalui time yang muncul, semakin kecil time maka menunjukkan semakin cepat koneksi Anda, dari time juga dapat dilihat apabila munculnya tida...