Cara Memasang Facebook Activity Feed Widget di Blogger

Background Tips

Pasang Facebook Activity Feed Blog.
Jika sebuah widget blog bermanfaat besar dalam meningkatkan jumlah pageview sehingga jumlah traffic semakin naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak memiliki akun Facebook (mungkin ada ya, tapi kecil), sehingga seluruh plugin Facebook memiliki fungsi besar dalam menampilkan hal-hal yang personalized di dalam blog. Dengan demikian, user engagement pengguna Facebook akan terasa juga apabila kita menggunakan plugin-pluginnya di web/blog.

Nah, plugin Facebook satu ini juga memiliki andil besar, Facebook Activity Feed Plugin, yang dari namanya bisa dipahami bahwa fungsinya menampilkan seluruh feed aktivitas user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan adalah "like" atau "recommend". Maka widget ini berfungsi menampilkannya secara personalized (berdasarkan akun anda dan keterkaitan dengan teman-teman anda di Facebook).


Jadi, mari kita pasang widget Facebook Activity Feed ini dengan langkah-langkah yang cukup sederhana, karena plugin ini sudah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu langkah-langkah lain. Namun jika anda ingin menelusuri lebih jauh setting plugin ini, ada 3 tipe konfigurasi: App ID, action types, dan domain. Dari ketiga jenis tersebut, yang paling lengkap sekaligus membatasi penampilan aktivitas user adalah jenis domain. Sehingga ini setting yang saya pilih karena lebih cocok. Jika tertarik mengulik-ngulik lagi, kunjungi FB developers page untuk Activity feed plugin.

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Note: Lewati langkah 1 - 5 jika anda sudah menggunakan plugin Facebook Recommendation Bar yang dulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan langsung masuk ke langkah 6.

1. Buka dashboard > template
2. Klik "Edit HTML" (note: jika perlu backup template lebih dulu)
3. Arahkan dan klik mouse di area template editor, lalu tekan Ctrl+F dan cari tag <body> atau jika menggunakan template-template modifikasi atau bawaan Blogger, cari <body  saja (tanpa penutup).
4. Tepat di bawah tag <body> paste/letakkan code berikut:
<div id="fb-root"></div>
<script>(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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
5. Save template.
----------------------
6. Buka halaman "Layout"
7. Klik "add a / tambah gadget" sesuai posisi yang diinginkan dan pilih HTML/Javascript.
8. Copy, edit/customize, dan masukkan code berikut ke dalam kolom HTML/Javascript:
<div class="fb-activity" data-site="http://buka-rahasia.blogspot.com" data-width="340" data-height="340" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>
Ubah beberapa perintah dan nilai untuk melakukan kostumisasi:
  • Ganti http://buka-rahasia.blogspot.com dengan url blog anda.
  • Saya sudah set default lebar dan tinggi sebesar 340 piksel , jika ingin mengaturnya ubah nilai dalam data-width="340" untuk mengatur lebar widget sesuai blog dan ubah nilai dalam height="340" untuk mengatur tinggi widget. 
  • Ubah #ffffff (putih) untuk mengganti warna border (gunakan generator kode warna). Warna yang sama seperti background akan membuat widget tampak transparan.
  • Ubah nilai dalam data-header="false" menjadi true untuk menampilkan header activity feed (sama seperti Facebook Like Box).
  • Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak menampilkan rekomendasi. Namun jika aktivitas pada web/blog anda minim, rekomendasi tetap akan ditampilkan.
9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada tempat yang sesuai.
10 Kunjungi blog untuk melihat hasilnya.

Troubleshooting

Mengatur setting dan menambahkan plugin Facebook activity feed ini cukup mudah. Tapi jika ada problem, silahkan tinggalkan komentar. Saya menghindari penggunaan app ID di atas karena fungsinya tidak begitu penting pada widget ini dan supaya tidak kompleks, tidak seperti widget recommendation bar yang mewajibkan ID aplikasi. Jika widget tidak muncul, ada kemungkinan sebenarnya anda belum menambahkan kode Javascript SDK, namun melewati langkah 1 - 5. Bagaimanapun, tetap tinggalkan komentar jika ada problem. :)

Have a nice blogging, writing, and sharing, as usual :)

© Copyright 2013 - 'til drop. buka-rahasia.blogspot.com. All rights reserved.

Cara Memasang Facebook Activity Feed Widget di Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 26 Comment(s):

Yoshi Wafa said...

Baru tahu saya pak kalau Feed Facebook ternyata bisa meningkatkan SEO juga ya??? Terima kasih Informasinya menarik sekali...

Unknown said...

@Yoshi: Bukan SEO, tapi traffic dan pageview. Tidak ada kaitannya sama sekali dengan search engine maupun SEO.

Anonymous said...

Thx master SEO ...
Kalo ini emng mningkatkan traffic dan pageview akan saya coba :)

Gunawan said...

Saya sdh coba cara2 di atas Bang tapi kok malah muncul keterangan ini ya :

Tak ada aktivitas terbaru yang dapat ditampilkan.
Tempatkan beberapa tombol Suka di situs web Anda untuk melibatkan pengguna Anda. Rincian dapat ditemukan Disini.

Anonymous said...

Yang recomended di blog saya dikit, malu mau pasang ini :)

Unknown said...

@Agung: Apakah ketika melihat itu dalam kondisi login atau tidak? Apakah ada tombol like, share, recommend. facebook comment, dll? Syarat penampilan aktivitas Facebook adalah adanya aktivitas di dalam website seperti like, share, dst.

Unknown said...

@Darmawan: mengapa mesti malu, yang penting ada aktivitas share, walaupun cuma satu ha masalah, yang penting ada aktivitas :)

Gunawan said...

Saya Dalam kondisi login, guru.... :)
Saya sdh coba lagi tadi dan alhamdulillah sdh berhasil tinggal tunggu nunggu muncul aja hasilnya nih... :D

Anonymous said...

Gan sudah saya pasang dan berhasil Gan.
tetapi tampilannya kosong Gan, pa mungkin semua ini disebabkan tidak ada yang recomended ia Gan???

karna tampilannya kosong, terpaksa saya hapus lagi.
tetapi saya sipan semua cara cranya siapa tau tar ada yang recomended kan bisa dipasang.

yang terpenting saya sudah tau semua cara pemasangan nya,heee
terimakasih Gan sudah menambah ilu pengetahuan saya kembali. sukses selalu untuk Agan..!

Unknown said...

@Agung: Sip!
@Wahyudi: Memang perlu digunakan plugin-plugin lain yang digunakan sebagai sumber aktivitas feed,seperti like, recommend, share, dll, jadi ada "rekaman" aktivitas pengguna yang ditampilkan. Punya saya pun kadang-kadang juga blank.

Anonymous said...

Sangat bermanfaat Kang! Terus berbagi dan jangan lupa mampir.

Unknown said...

terima kasih, banyak sekali manfaat blog anda ini.

Byuzputra said...

kalo pengen ganti font color, face, gimana?

Unknown said...

Kalo jenis font, lebar, border, anda bisa langsung mengganti melalui halaman plugin activity feed. Tapi kalo untuk memodifikasi tingkat lanjut, tidak bisa, karena semua plugin facebook sekarang ditampilkan dalam iframe, jadi tidak bisa diatur melalui hack. Salah satu cara memodifikasi adalah memasukkan background berbeda di dalam sebuah div, karena widget facebook transparan.

Anonymous said...

makasih atas infonya mas ! bermanfaat banget, di coba dulu mas

sds said...

thanks atas tutorialx..kunjung blik kakak

Denih Saputra said...

blognya bagus mas :)
kunjungi blog saya juga yaa mas salahbantal.blogspot.com ditunggu juga komentarnya :)

DedSwand said...

semua artikelnya sangat bermanfaat.. mohon izin saya cantumkan blog anda di tuker link http://sahabatkuseni.blogspot.com :)

Ngabidin said...

Sudah saya coba dan ternyata langsung bisa, terima kasih Anda sudah berbagi di http://buka-rahasia.blogspot.com

Unknown said...

info yg bagus dan sangat bermanfaat bagi saya. kunjungi balik di www.ankurniawan.blogspot.com

Anonymous said...

Maksih infonya mas, saya coba untuk meninngkatkan pageview nya

Unknown said...

sip mas. terbantu sekali dengan adanya blog seperti ini.

Uswatun Niswah said...

saya ingin menampilkan postingan blog yang dishare ke facebook. apakah tutorial ini yg bs dipakai. soalnya saya msh bingung cr tutorialnya. kemudian saya msh bingung meletakkan kode script pertama di edit html yg tag body...itu maksudnya gmn? trims...

Unknown said...

Ya, widget ini bisa digunakan untuk menampilkan aktivitas sharing artikel anda di facebook.
Kode di atas di letakkan di dalam template, anda harus mengedit template blog anda. Buka dashboard > template > edit HTML. kemudian cari <body lalu letakkan script tersebut di bawahnya dan save.

Unknown said...

Ya, sama.

Ada beberapa orang yang juga mengeluh demikian. Yang perlu dilihat adalah, apakah like button tersebut dibuat dengan aplikasi, misalnya aplikasi FB yang anda buat untuk blog (facebook apps)? atau sekedar digenerate lewat like button generator? Jika pake apps, maka apps anda wajib diupdate mengikuti perubahan2 (facebook changes). Biasanya ada notifikasi jika ada perubahan yang harus diikuti oleh apps.

Nah kemungkinan kedua nih, yang sering ditemui, Facebook sering melakukan "bersih-bersih like" pada link/halaman web yang dianggap spammy. Ini biasanya dilakukan beberapa bulan sekali. Banyak juga yang mengalaminya.

Anonymous said...

makasih gan atas kode widgetnya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap