Cara Memasang Facebook widget Activity Feed di Blogger - How to Install Facebook Activity Feed widget on Blogger[english and indonesian subtitle]


Indonesian Version

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 menurut saya, plugin ini adalah salah satu plugin Facebook yang wajib nempel di widget sidebar blog anda! Demonya sudah ada di sidebar blog ini dengan title "Hot: Recent Activities On 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. Cari (Ctrl+F) tag <body> atau jika anda sudah menggunakan template-template modifikasi atau bawaan Blogger, cari <body (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://febrian-tkj.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://febrian-tkj.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

English Version

f a widget blog of great benefit in increasing the number of pageviews that the amount of traffic the ride, if you will refuse to install? :) Of course not. No one who does not have a Facebook account (there may be yes, but small), so that all Facebook plugin has a major function in the display personalized stuff in the blog. Thus, user engagement of Facebook users will feel well when we use the plugin-plugin in web / blog.Well, the Facebook plugin also has a big hand, Facebook Activity Feed plugin, which can be understood from the name that the function displays the entire Facebook user activity feeds in a website / blog. Most often we do is "like" or "recommend". So this widget displays a personalized function (based on your account and link with your friends on Facebook). So I think this plugin is one of the Facebook plugin that must be stuck on the widget to your blog sidebar! The demo is already on the sidebar of this blog with the title "Hot: Recent Activities On Facebook!".So, let's put this widget Facebook Activity Feed the steps are fairly simple, because I created this plugin is in the form of pre-made, just plug it, without the need for other measures. But if you want to explore further this plugin settings, there are 3 types of configurations: App ID, action types, and domains. Of the three types, the most comprehensive user activity as well as limit the display is a type of domain. So I chose this setting because it is more suitable. If interested mengulik-ngulik more, visit the FB developers page for Activity feed plugin.How to Add Facebook Activity Feed Widget in BlogNote: Skip steps 1-5 if you use Facebook Recommendation Bar plugin that I used to share, Facebook Comments and other Facebook plugins that use HTML5 format and go directly to step 6.1. Go to dashboard> Template2. Click the "Edit HTML" (note: if you need to backup your template first)3. Search (Ctrl + F) <body> or if you use templates or modify the default Blogger, search <body (without cover).4. Just below <body> paste / place the following code:

    
<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 the template.----------------------6. Open the "Layout"7. Click "add a / add gadget" to the desired position and select HTML / Javascript.8. Copy, edit / customize, and enter the following code into the column HTML / Javascript:

    
<Div class = "fb-activity" data-site = "http://febrian-tkj.blogspot.com" data-width = "340" data-height = "340" data-border-color = "# ffffff" data-header = "false" data-Recommendations = "true"> </ div>Change the value of some orders and to perform customization:

    
Replace http://febrian-tkj.blogspot.com with the url of your blog.
    
I've set the default width and height by 340 pixels, if you want to set, change the value in the data-width = "340" width of the widget to set the appropriate blogging and change the value in the height = "340" height to set the widget.
    
Change # ffffff (white) to change the border color (use a color code generator). Same color as the background will make the widget appear transparent.
    
Change the value in the data-header = "false" to true to display the header activity feeds (like Facebook Like Box).
    
Finally, change the value in the data-Recommendations = "true" to false to not show recommendations. However, if the activity on your web / blog minimal, recommendations will still be displayed.9. Save the widget. If you need to arrange the position of the widget through the page layout in the appropriate place.10 Visit the blog to see the results. 

TroubleshootingAdjust the settings and add the Facebook activity feed plugin is quite easy. But if there is a problem, please leave a comment. I avoid using the app ID in it because it is not so important in this widget, and that is not complex, no such recommendation widget bar, which requires the application ID
Terima kasih telah membaca artikel tentang Cara Memasang Facebook widget Activity Feed di Blogger - How to Install Facebook Activity Feed widget on Blogger[english and indonesian subtitle] di blog febrian tkj blog jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :