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 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 jika sudah selesai.
Jangan lupa untuk klik like ya... atau like juga halaman facebook Belajar Ngeblog di BLOG sekarang juga :)
53 komentar:
wah, mantap infonya nih, bermanfaat bagi newbie seperti saya ini.
tukeran link yuk sob
#Salam sehat dari saya
tutorial yang sangat bermanfaat, ijin menyimak dan Insya Allah akan saya terapkan dalam blog saya
oh gituh yahh gan ... izin share ..
boleh juga nih,, makasihh yaaa
kerenn nih Sob,, ijin nyoba Sob yeehh
terimakasih Mas nihh Tutornya.... :)
mantabbs sekali,, thanks udh sharing..
mantap,, bisa dicoba nih gan
keren2 infonya...
nice info gan,,terima kasih sudah berbagi informasinya
boleh juga nih do coba,hhee,,terima kasih gan untuk informasinya
info yang menarik,,,boleh juga untuk di coba
terima kasih gan sudah berbagi informasi tentang "Cara Menambahkan Facebook Recommendation Bar"
mantap nih,,,,terima kasih sudah berbagi tutornya,,
ane masih belum ngerti gan..
nyoba dulu deehh..
biar ga penasaran ane nyoba dulu gan..
mantep niihh gan tutornya..
wiidiihh keren gan..makasih infonya..
nice post........
triknya makasih yeeeeeee
bgus nih kalo brhasil
thx sob tutorialnya, keren dan berguna untuk online shop saya.. :D
kunjung balik yaa kaka
Tubbymore
kerenn Gan nih................
bisa yahhh,, baguss
;))
kerennnnn........
postingan mantep,semoga ilmunya bermanfaat,,,
saya sudah coba, tapi kok gak bisa ya ?
:(
yang diganti dari ini apa mas...[<html xmlns:fb='http://ogp.me/ns/fb#']???
oh iya ya...di homepage ga bisa ya....hehehe...makasih mas....kerennnnabiisss..:X
thanks sob tutorialnya 100% works boleh di lihat di blog saya ^_^ happy blogging and keep sharing :) =))
makasih banyak sharenya, sukses nih pada blog gwa.
:D
izin nyoba kang
mas kalau buat fb like dan share sejajar diatas postingan gmn ya?
nice
ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.
IJIN NYIMAK BANG
langsung pasang gan
langsung pasang j uga gan
sudah saya terapkan gan,,berhasil
bgaimana cara mengembalikan grup pd fb yg tlh dhpus?
bgaimana cara mengembalikan grup pd fb yg tlh dhpus?
ada cara untuk memperkecil atau memperbesar kotak recomendation ga?
txs
GAN ane mau nanya ni,,,kenapa kode <html xmlns:fb='http://ogp.me/ns/fb#' ngk bisa dipasang diblog saya.alias error,klo kode yang lainnya bisa.mohon solusinya dung.thnks di tunggu ya solusinya.
manpat gan.... folback yah...
wah artikelnya sangat membantu, tapi di ane gabisa. wkwkwk. eniwei, kunjungi blog ane ya, misteriduniiakita, sebuah blog "remake" dari salah satu blog yang pernah terkenla di indonesia, berisi berbagai kumpulan misteri dan hal aneh dari seluruh dunia.
ini yang saya cari..terima kasih
ko akku engga bisa yahh?? tolong dong di bantu
saya yang error yang <html ithu lohh
kok punyaku enggak bisa nampilin 3 artikel ya, padahal udah tak setting seperti tutorial ini lho
makasih gan..sangat bermanfaat..
di tinggu kunbalnya gan
:))
Maaf gan aplikasi kurang maksimal di blog ane...kenapa ya?
Poskan Komentar
Berkomentarlah di blog ini dengan cerdas
* Jangan mencantumkan link apapun, contoh: http://xxx
* Untuk menampilkan emoticon, ketik kodenya, contoh: =))
* Karena banyaknya SPAM, terpaksa kami tampilkan verifikasi kata
Jangan sampai komentarmu dihapus karena tidak mematuhi aturan!