Lompat ke konten Lompat ke sidebar Lompat ke footer

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 :)

55 komentar untuk "Cara Menambahkan Facebook Recommendation Bar"

  1. wah, mantap infonya nih, bermanfaat bagi newbie seperti saya ini.

    tukeran link yuk sob

    #Salam sehat dari saya

    BalasHapus
  2. tutorial yang sangat bermanfaat, ijin menyimak dan Insya Allah akan saya terapkan dalam blog saya

    BalasHapus
  3. oh gituh yahh gan ... izin share ..

    BalasHapus
  4. kerenn nih Sob,, ijin nyoba Sob yeehh

    BalasHapus
  5. mantabbs sekali,, thanks udh sharing..

    BalasHapus
  6. mantap,, bisa dicoba nih gan

    BalasHapus
  7. nice info gan,,terima kasih sudah berbagi informasinya

    BalasHapus
  8. boleh juga nih do coba,hhee,,terima kasih gan untuk informasinya

    BalasHapus
  9. info yang menarik,,,boleh juga untuk di coba

    BalasHapus
  10. terima kasih gan sudah berbagi informasi tentang "Cara Menambahkan Facebook Recommendation Bar"

    BalasHapus
  11. mantap nih,,,,terima kasih sudah berbagi tutornya,,

    BalasHapus
  12. biar ga penasaran ane nyoba dulu gan..

    BalasHapus
  13. wiidiihh keren gan..makasih infonya..

    BalasHapus
  14. thx sob tutorialnya, keren dan berguna untuk online shop saya.. :D

    BalasHapus
  15. postingan mantep,semoga ilmunya bermanfaat,,,

    BalasHapus
  16. yang diganti dari ini apa mas...[<html xmlns:fb='http://ogp.me/ns/fb#']???

    BalasHapus
  17. oh iya ya...di homepage ga bisa ya....hehehe...makasih mas....kerennnnabiisss..:X

    BalasHapus
  18. thanks sob tutorialnya 100% works boleh di lihat di blog saya ^_^ happy blogging and keep sharing :) =))

    BalasHapus
  19. makasih banyak sharenya, sukses nih pada blog gwa.

    :D

    BalasHapus
  20. mas kalau buat fb like dan share sejajar diatas postingan gmn ya?

    BalasHapus
  21. nice
    ayooo kunjungi dewasack.blogspot.com untuk cerita dewasa lainnya.

    BalasHapus
  22. sudah saya terapkan gan,,berhasil

    BalasHapus
  23. bgaimana cara mengembalikan grup pd fb yg tlh dhpus?

    BalasHapus
  24. bgaimana cara mengembalikan grup pd fb yg tlh dhpus?

    BalasHapus
  25. ada cara untuk memperkecil atau memperbesar kotak recomendation ga?
    txs

    BalasHapus
  26. 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.

    BalasHapus
  27. manpat gan.... folback yah...

    BalasHapus
  28. 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.

    BalasHapus
  29. ini yang saya cari..terima kasih

    BalasHapus
  30. ko akku engga bisa yahh?? tolong dong di bantu

    BalasHapus
  31. saya yang error yang <html ithu lohh

    BalasHapus
  32. kok punyaku enggak bisa nampilin 3 artikel ya, padahal udah tak setting seperti tutorial ini lho

    BalasHapus
  33. makasih gan..sangat bermanfaat..
    di tinggu kunbalnya gan
    :))

    BalasHapus
  34. Maaf gan aplikasi kurang maksimal di blog ane...kenapa ya?

    BalasHapus
  35. sudah tested nih script.
    tapi kalau ada kolom komentar bawaan aslinya dari blogspot jd tumpuk deh.

    BalasHapus
  36. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Toshiba - Satellite Click Convertible 13.3" Touch-Screen Laptop - 4GB Memory - 500GB Hard Drive - Ultimate Silver

    Toshiba - Satellite Ultrabook 14" Laptop - 4GB Memory - 500GB Hard Drive - Ice Blue

    BalasHapus

Berlangganan via Email