Cara Memasang Facebook Activity Feed Widget Di Blogger

Background Tips

 Tidak ada orang yang tidak memiliki akun Facebook  Cara Memasang Facebook Activity Feed Widget di Blogger
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 mempunyai 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 dapat dipahami bahwa fungsinya menampilkan seluruh feed kegiatan user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan yakni "like" atau "recommend". Maka widget ini berfungsi menampilkannya secara personalized (menurut akun anda dan keterkaitan dengan sobat-sobat 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 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 jika menggunakan template-template modifikasi atau bawaan Blogger, cari <body  saja (tanpa epilog).
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-membisu-membisu.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-membisu-membisu.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 arahan warna). Warna yang sama seolah-olah 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 kalau acara pada web/blog anda minim, rekomendasi tetap akan ditampilkan.
9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada kawasan yang sesuai.
10 Kunjungi blog untuk melihat kesudahannya.

Troubleshooting

Mengatur setting dan menambahkan plugin Facebook activity feed ini cukup mudah. Tapi bila ada duduk masalah, silahkan tinggalkan komentar. Saya menghindari penggunaan app ID di atas alasannya fungsinya tidak begitu penting pada widget ini dan supaya tidak kompleks, tidak seperti widget recommendation kafetaria yang mewajibkan ID aplikasi. Jika widget tidak muncul, ada kemungkinan bahu-membahu anda belum menambahkan isyarat Javascript SDK, namun melewati langkah 1 - 5. Bagaimanapun, tetap tinggalkan komentar bila ada kasus. :)

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

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

Belum ada Komentar untuk "Cara Memasang Facebook Activity Feed Widget Di Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel