Cara Memasang Facebook Activity Feed Widget di Blogger

Background Tips

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 mampu dipahami bahwa fungsinya menampilkan seluruh feed acara user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan ialah "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, alasannya ialah plugin ini sudah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu langkah-langkah lain. Namun kalau 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 acara user ialah jenis domain. Sehingga ini setting yang saya pilih alasannya ialah 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 kalau anda sudah menggunakan plugin Facebook Recommendation Bar yang dulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan eksklusif masuk ke langkah 6.

1. Buka dashboard > template

2. Klik "Edit HTML" (note: kalau perlu backup template lebih dulu)

3. Arahkan dan klik mouse di area template editor, lalu tekan Ctrl+F dan cari tag <body> atau kalau 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 melaksanakan kostumisasi:

Ganti http://buka-rahasia.blogspot.com dengan url blog anda.
Saya sudah set default lebar dan tinggi sebesar 340 piksel , kalau 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 instruksi warna). Warna yang sama ibarat background akan membuat widget tampak transparan.
Ubah nilai dalam data-header="false" menjadi true untuk menampilkan header activity feed (sama ibarat Facebook Like Box).
Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak menampilkan rekomendasi. Namun kalau acara pada web/blog anda minim, rekomendasi tetap akan ditampilkan.

9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada daerah yang sesuai.

10 Kunjungi blog untuk melihat hasilnya.

Troubleshooting

Mengatur setting dan menambahkan plugin Facebook activity feed ini cukup mudah. Tapi kalau ada problem, silahkan tinggalkan komentar. Saya menghindari penggunaan app ID di atas alasannya ialah fungsinya tidak begitu penting pada widget ini dan biar tidak kompleks, tidak ibarat widget recommendation kafetaria yang mewajibkan ID aplikasi. Jika widget tidak muncul, ada kemungkinan bahwasanya anda belum menambahkan instruksi Javascript SDK, namun melewati langkah 1 - 5. Bagaimanapun, tetap tinggalkan komentar kalau ada problem. :)

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