Cara Memasang Facebook Activity Feed Widget di Blogger
Background Tips
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>5. Save template.
<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>
----------------------
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.
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.
Baru tahu saya pak kalau Feed Facebook ternyata bisa meningkatkan SEO juga ya??? Terima kasih Informasinya menarik sekali...
@Yoshi: Bukan SEO, tapi traffic dan pageview. Tidak ada kaitannya sama sekali dengan search engine maupun SEO.
Thx master SEO ...
Kalo ini emng mningkatkan traffic dan pageview akan saya coba :)
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.
Yang recomended di blog saya dikit, malu mau pasang ini :)
@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.
@Darmawan: mengapa mesti malu, yang penting ada aktivitas share, walaupun cuma satu ha masalah, yang penting ada aktivitas :)
Saya Dalam kondisi login, guru.... :)
Saya sdh coba lagi tadi dan alhamdulillah sdh berhasil tinggal tunggu nunggu muncul aja hasilnya nih... :D
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..!
@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.
Sangat bermanfaat Kang! Terus berbagi dan jangan lupa mampir.
terima kasih, banyak sekali manfaat blog anda ini.
kalo pengen ganti font color, face, gimana?
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.
makasih atas infonya mas ! bermanfaat banget, di coba dulu mas
thanks atas tutorialx..kunjung blik kakak
blognya bagus mas :)
kunjungi blog saya juga yaa mas salahbantal.blogspot.com ditunggu juga komentarnya :)
semua artikelnya sangat bermanfaat.. mohon izin saya cantumkan blog anda di tuker link http://sahabatkuseni.blogspot.com :)
Sudah saya coba dan ternyata langsung bisa, terima kasih Anda sudah berbagi di http://buka-rahasia.blogspot.com
info yg bagus dan sangat bermanfaat bagi saya. kunjungi balik di www.ankurniawan.blogspot.com
Maksih infonya mas, saya coba untuk meninngkatkan pageview nya
sip mas. terbantu sekali dengan adanya blog seperti ini.
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...
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.
maaf sebelumnya keluar dati tema postingan
gini mas mau tanya, saya bermasalah pada tombol like fb di postingan blogku, kan dulu dipostingan saya jumlah likenya muncul, misal saja di postingan judul "A" itu jumlah likenya ada 20 nah terus beberapa hari jumlah likenya itu jadi 0 dan aku cek dipostingan lain yg baru masih ada jumlah likenya. terus kalau postingan lama itu jumlah likenya juga ilang padahal dulu ada.. T_T
terus aku cobak cek di facebook, katanya fungsi tombol likenya ganti, nah disitu suruh pasang script Facebook SDK biar muncul lagi jumlah likenya, nah pas aku pasang kok tetep belum muncul ya, apa harus nunggu dulu prosesnya atau gimana?
script SDK yang aku pasang kayak disini: https://developers.facebook.com/docs/reference/javascript/
apa sama kayak script SDK yang mas tunjukin diatas? terus kira-kira penyebab sebenarnya apa ya mas?
Mohon penjelasannya mas dan terima kasih.. ^^
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.
makasih gan atas kode widgetnya
Post a Comment