Cara Memasang Facebook Activity Feed Widget Di Blogger

Background Tips

Jika suatu widget blog berharga besar dalam meningkatkan jumlah pageview sehingga jumlah traffic kian naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak mempunyai akun Facebook (mungkin ada ya, tetapi kecil), sehingga seluruh plugin Facebook mempunyai kegunaan besar dalam memperlihatkan 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 mempunyai andil besar, Facebook Activity Feed Plugin, yang dari namanya dapat dimengerti bahwa fungsinya memperlihatkan seluruh feed aktivitas user Facebook di dalam suatu website/blog. Yang paling kerap kita laksanakan yakni "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 tindakan yang cukup sederhana, alasannya plugin ini telah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu tindakan 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 komplet sekaligus mencegah performa aktivitas user yakni jenis domain. Sehingga ini setting yang saya pilih alasannya lebih cocok. Jika kesengsem mengulik-ngulik lagi, datangi FB developers page untuk Activity feed plugin.

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Note: Lewati langkah 1 - 5 kalau anda telah menggunakan plugin Facebook Recommendation Bar yang dahulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan pribadi 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, kemudian tekan Ctrl+F dan cari tag <body> atau kalau menggunakan template-template penyesuaian 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 dikehendaki dan pilih HTML/Javascript.

8. Copy, edit/customize, dan masukkan code berikut ke dalam kolom HTML/Javascript:

<div class="fb-activity" data-site="https://ujianhidup10.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 https://ujianhidup10.blogspot.com/ dengan url blog anda.
Saya telah set default lebar dan tinggi sebesar 340 piksel , kalau ingin mengaturnya ubah nilai dalam data-width="340" untuk menertibkan lebar widget sesuai blog dan ubah nilai dalam height="340" untuk menertibkan tinggi widget.
Ubah #ffffff (putih) untuk mengubah warna border (gunakan generator arahan warna). Warna yang serupa seumpama background akan menghasilkan widget terlihat transparan.
Ubah nilai dalam data-header="false" menjadi true untuk memperlihatkan header activity feed (sama seumpama Facebook Like Box).
Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak memperlihatkan rekomendasi. Namun kalau aktivitas pada web/blog anda minim, saran tetap akan ditampilkan.

9. Save widget. Jika perlu susun posisi widget lewat halaman layout pada wilayah yang sesuai.

10 Kunjungi blog untuk menyaksikan hasilnya.

Troubleshooting

Mengatur setting dan menyertakan plugin Facebook activity feed ini cukup mudah. Tapi kalau ada problem, silahkan lewati komentar. Saya menyingkir dari penggunaan app ID di atas alasannya fungsinya tidak begitu penting pada widget ini dan mudah-mudahan tidak kompleks, tidak seumpama widget recommendation kafetaria yang mengharuskan ID aplikasi. Jika widget tidak muncul, ada kemungkinan sebenarnya anda belum menyertakan arahan Javascript SDK, tetapi melalui langkah 1 - 5. Bagaimanapun, tetap lewati komentar kalau ada problem. :)

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