Labels
Posted by

Cara Tampilkan Facebook Comment di blog

How to add Facebook comment on blogspot / blogger


For the English version please visit this blog, where I learned about this in the first place : 
http://jensontaylor.blogspot.com/2012/03/integrate-facebook-comments-for-blogger.html


FB Comments di Blog

Comment / komentar di blog bisa menambah interaksi dan traffic, sama seperti forum di mana orang bisa bebas berpendapat.
Kadang sebagai pembaca, kita paling malas kalau harus login terlebih dahulu sebelum posting comment, seperti di halaman native comment di blogspot.
Nah dengan Facebook comment terintegrasi di halaman blog, pembaca yang memiliki FB account bisa langsung menulis komentar tanpa harus login lagi.

Berikut caranya :



1. Buat Facebook Apps

Masuk ke situs  https://developers.facebook.com/apps

Create new app
 Klik di tombol "Create New App"
Insert name
Masukkan nama app, biasanya cukup masukkan alamat blog diikuti keterangan fb comment

Security check
Setelah ketik captcha klik continue


Apps Page - APP ID
Nah di sini yang penting adalah APP ID di atas, siapkan untuk nanti dimasukkan di HTML blog anda

Isi contact email dan app domain (alamat blog anda), yang untuk saya adalah http://foodgrapher.com

Setelahnya klik save change di bagian bawah page


2. Edit Template HTML Blogspot/blogger




Selesai sudah pembuatan apps di halaman Facebook, sekarang log in lah ke halaman Blog admin anda.

Setelah masuk ke halaman admin blogger, klik Template. Untuk amannya, klik backup/restore di pojok kanan atas dan save template anda. Bila ada hasil yang tidak sesuai, tinggal restore dari file backup yang sudah anda simpan.

Sesudahnya klik edit HTML yang akan muncul setelah anda masuk halaman Template.
klik Ctrl+F untuk menampilkan fitur search di browser, lalu carilah tag "<head>"




Setelah <head> , klik enter untuk membuat baris baru dan ketikkan command di bawah ini , dengan mengganti FACEBOOK-APP-ID dengan ID yang ada di FB apps page anda tadi (gambar ke-5) :

<meta content="FACEBOOK-APP-ID" property="fb:app_id" />
Jadi kalau dengan App ID saya, hasilnya adalah : 
<meta content="482576491791957" property="fb:app_id" />
Setelah selesai, klik Save Template


Berikutnya, masih di halaman HTML yang sama, centang pilihan Expand Widget Template ini

Expand Widget Templates

Lalu klik lagi tombol di keyboard Ctrl + F untuk fitur search.
Cari hingga menemukan salah satu dari tiga kode berikut (copy paste kan di toolbar search / find) :
  1. <div class='post-footer-line post-footer-line-3'>
  2. <p class='post-footer-line post-footer-line-3'> 
  3. <data:post.body/>  

Setelah menemukan salah satunya, klik enter untuk membuat baris baru dan copy paste kan kode berikut :

<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/> </b:if>

Setelahnya cari lagi (Ctrl +F) kode tag "<html
contoh hasilnya di gambar ini :

Kali ini tidak tekan enter, tapi taruhlah kode di sampingnya setelah tag <html
xmlns:fb="https://www.facebook.com/2008/fbml"

Jadi hasil akhirnya setelah di copy paste kan adalah :

<html xmlns:fb="https://www.facebook.com/2008/fbml"

Setelahnya Klik lagi Save Template



Langkah integrasi Facebook comment di Blog page anda selesai, posisinya (biasanya) di atas toolbar comment native yang ada di blog.
Sekarang pengunjung yang memakai FB bisa langsung comment di bawah blog post anda. :)

Labels:

Comments

Post a Comment