Mungkin sebelum nya Anda pernah menemukan salah satu Widget yang ada seperti gambar di samping. Ya, itu adalah Widget "Recommendation Bar" dari Facebook. Dengan adanya widget tersebut, maka para pengunjung juga bisa melihat postingan kita yang lain nya sesuai dengan yang akan di Rekomendasikan oleh Widget Recommendation Bar.Menurut Saya, widget ini hampir sama dengan Related Post yang kita pasang pada Blog. Namun, postingan yang di tampilkan di sini akan di atur secara acak atau tidak berdasarkan kategory. Selain itu pengunjung juga bisa menyukai dan berbagi kehalaman facebook. Dengan adanya widget ini, semoga kunjungan yang datang ke Blog Anda akan semakin meningkat berkat dari hasil rekomendasi dari para pengunjung Blog.
Untuk melihat Demonya, Anda bisa melihat nya pada bagian Bawah sebelah kanan dari Blog ini. Bagaimana, apakah Anda berminat untuk mencoba nya?
Untuk pemasangan nya cukup mudah. Silahkan Anda ikuti langkah-langkah nya seperti yang akan Saya paparkan berikut ini:
Langkah 1: Membuat ID Aplikasi Facebook
Agar plugin ini bisa bekerja Anda harus mempunyai sebuah ID App Facebook. Langkah ini cukup mudah. Di mana hampir sama dengan membuat ID App facebook yang lain.
► Pastikan Facebook Anda dalam keadaan Log in.
► Klik link berikut ini untuk mulai membuat ID App Facebook.
► Klik Create New App pada tombol sebelah kanan Atas.
► Pada kotak Pop Up yang muncul, ketikkan " My Recommendation Bar " dan untuk pengisian yang lain nya abaikan saja. Klik lanjutkan .
► Pada halaman berikutnya Anda akan diminta memasukkan kode captcha untuk validasi, masukkan kode captcha sesuai tampilan yang muncul, lalu klik tombol Submit.
► Sampai di sini proses pembuatan ID App Facebook hampir selesai, perhatikan pada bagian Select how your app intgrates with Facebook seperti gambar di bawah yang di tujuk paling bawah, kemudian masukkan alamat URL blog Anda pada bagian Website with Facebook Login, jangan sentuh bagian yang lain, lalu klik tombol Save Changes untuk menyimpannya. Dan pada yang di tunjuk bagian atas adalah ID App Facebook Anda. Silahkan Anda simpan dulu Kode ID tersebut untuk di gunakan pada Langkah selanjut nya.
Langkah 2. Menambahkan Widget Recommendations Bar Facebook ke dalam BlogSpot
► Masuk akun blogger lalu pilih menu Rancangan > Edit Html
► Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
► Jangann lupa klik ‘Expand Widget Templates’
► Cari kode seperti ini
<html
► Kemudian ganti dengan Kode seperti ini:
<html xmlns:fb='http://ogp.me/ns/fb#'
► Selanjutnya cari kode <body> kemudian paste kode di bawah ini tepat di bawah kode <body>
<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=***************";
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://ahmad-roni.blogspot.com/' trigger='40%'/></div>
</b:if></b:if>
Keterangan :<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=***************";
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://ahmad-roni.blogspot.com/' trigger='40%'/></div>
</b:if></b:if>
♠ *************** ganti dengan ID App Facebook yang Anda punya.
♠ Warna Merah: Kode yang ditulis dengan warna merah, mengatur widget agar tampil hanya pada halaman artikel, jika anda ingin widget tampil pula pada homepage blog hapus saja kode yang ditulis dengan warna merah tersebut.
♠ max_age: Ini adalah parameter yang menunjukkan umur artikel. Artikel yang akan ditampilkan adalah artikel yang pernah dipublikasikan antara 1-180 hari sebelumnya, namun jika anda tidak ingin mempertimbangkan umur artikel maka biarkan angka 0 sebagai defaultnya, artinya seluruh artikel yang pernah dipublikasikan akan ditampilkan secara random.
♠ num_recommendations: Parameter ini menunjukkan jumlah artikel yang akan ditampilkan di dalam widget, silahkan ganti angka 3 pada script di atas sesuai keinginan anda.
♠ read_time: Parameter ini yang mengatur waktu widget diperluas setelah halaman digulir oleh pengunjung dan telah mencapai area yang telah ditentukan. Di sini Saya menggunakan angka 10 detik, silahkan Anda menggantinya dan angka dapat diperbesar hingga 30 detik atau lebih.
♠ side: Anda dapat memilih widget akan ditampilkan pada bagian kiri halaman atau bagian kanan halaman, Saya memilih untuk menampikannya pada bagian kanan halaman, jika Anda ingin merubahnya silahkan ganti kode right menjadi left.
♠ http://ahmad-roni.blogspot.com/: Silahkan ganti dengan URL Blog Anda.
♠ trigger: Ini adalah parameter yang mengatur widget akan diperluas setelah pengunjung menggulir halaman ke bagian bawah hingga mencapai 40%. Anda dapat mengganti angka 40% sesuai keinginan.
► Simpan template anda dengan menekan tombol Save Template. Sampai di sini proses instalasi Widget Recommendations Bar Facebook selesai.
Masalah:
Jika proses pemasangan Widget Recommendation Bar Facebook sudah selesai. Namun, widget yang Anda harapkan tidak juga muncul. Biasanya di sebabkan oleh Template external yang tidak terstruktur. Maka diperlukan pemasangan meta tag untuk memberitahu Facebook, agar judul halaman, thumbnail dan judul blog di ambil dengan benar. Untuk melakukan hal ini cukup mudah, sisipkan kode berikut ini tepat di bawah kode <head> di dalam template Anda.
<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>
Simpan template Anda dan sekarang perhatikan apakah Widget Recommendation Bar Facebook menunjukkan hasil yang baik.
Sumber : Ahmad Roni Blog
Posting Komentar