Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Cara Menambahkan Facebook Recommendation Bar

Cara Menambahkan Facebook Recommendation Bar
Facebook menyediakan plugin atau widget untuk blogger yang bisa lebih menyatukan blog kita dengan situs jejaring sosial terpopuler facebook. Ada kotak komentar facebook, tombol like, selain itu salah satu widget yang bisa dimanfaatkan oleh blogger adalah facebook recommendation bar, yaitu berupa widget yang berbentuk kotak di dalamnya ada link (post) yang disarankan untuk juga dlihat.

Widget facebook yang berbentuk bar ini akan muncul otomatis, di pojok bawah blog ketika pembaca men-scroll ke bawah sejauh tertentu. Kotak kecil itu akan membuka kotak besar yang berisi link (post) yang diajurkan untuk dibaca juga berdasarkan jumlah like atau yang sudah disukai teman di facebook. Ada juga tombol like (suka), sehingga akan bisa membuat blog kita lebih menyatu dengan facebook dan bisa meningkatkan traffik blog.

Manfaat atau keuntungan menambahkan facebook recommendation bar yang mempunyai judul "Anda Mungkin Juga Menyukai" ini adalah agar pembaca banyak pilihan. Tentu dengan muncul sendiri di bar bawah, akan menarik pengujung blog untuk melihat link (post) yang disarankan, link itu pun disertai thumbnail. Sehingga akhirnya, pemasangan facebook recommendation bar ini dapat membuat pengunjung berlama-lama di blog kita atau meningkatkan page view blog.

Cara Membuat Facebook Recommendation Bar.
1. Kunjungi Facebook Apps, bisa lewat sini.
2. Klik tombol Create New App yang ada di pojok kanan atas.
Cara Menambahkan Facebook Recommendation Bar
3. Lalu akan muncul kotak, beri nama aplikasi yang dibuat, terserah mau diberi nama apa, biarkan yang lain kosong (dafault). Kemudian klik Lanjutkan.
Cara Menambahkan Facebook Recommendation Bar
4. Ketik kode keamanan captcha, lalu klik Lanjutkan.
Cara Menambahkan Facebook Recommendation Bar
5. Muncul halaman baru, klik tab Website with Facebook Login dan masukan URL blog kamu, seperti gambar di bawah ini. Yang lain biarkan saja, kemudian klik Simpan Perubahan.
Cara Menambahkan Facebook Recommendation Bar
6. Di atas kita akan melihat dua nomor kode, yaitu App ID dan App Secret, yang kita butuhkan hanyalah kode App ID.

Cara Menambahkan Facebook Recommendation Bar pada Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode <html lalu ganti kode berikut ini:

<html xmlns:fb='http://ogp.me/ns/fb#'

4. Cari kode <head> dan taruh kode berikut di bawahnya:

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

5. Cari kode <body> atau jika ketemu tag <body lalu taruh kode berikut di bawah tag tersebut:

<div id='fb-root'/>
<script>
//Facebook Recommendation Bar
//<![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=5424684134567889";
  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.kurniasepta.blogspot.com' trigger='40%'/></div>
</b:if></b:if>

6. Kamu harus mengganti kode yang berwarna merah dengan App ID yang sudah didapatkan tadi dan ganti http://www.kurniasepta.blogspot.com dengan URL blogmu sendiri. Kamu dapat mengatur tampilan, seperti: 3 adalah banyak judul yang akan ditampilkan, 10 waktunya muncul setelah detik ke 10, right adalah letaknya di kanan. Widget tersebut akan muncul ketika membuka salah satu halaman post tidak di homepage utama.

7. Simpan Template jika sudah selesai.

Jangan lupa untuk klik like ya... atau like juga halaman facebook Belajar Ngeblog di BLOG sekarang juga :)