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.
3. Lalu akan muncul kotak, beri nama aplikasi yang dibuat, terserah mau
diberi nama apa, biarkan yang lain kosong (dafault). Kemudian klik Lanjutkan.
4. Ketik kode keamanan captcha, lalu klik Lanjutkan.
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.
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>
<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>
<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 dan Selesai !
