Ternyata saya sudah mendapatkan bagaimana cara membuat atau memasang kotak komentar facebook yang bisa di reply atau di balas layaknya memberikan komentar di status facebook.
Kotak komentar atau lebih dikenal dengan Comments Box facebook ini juga dapat mengirimkan pemberitahuan kepada admin atau pemilik suatu halaman website jika seseorang meninggalkan komentarnya di halaman site tersebut.
Berbeda dengan kotak komentar facebook versi dulu yang tidak memiliki feature reply (balas), like (suka) atau notification (pemberitahuan) jika seseorang meninggalkan komentar.
Berikut contoh gambar komentar tersebut :
Bagi sobat yang suka buka developers.facebook.com pasti mengenal model komentar tersebut soalnya memang hanya di gunakan di developers.facebook.com komentar yang seperti itu. Tapi sekarang tidak lagi soalnya sudah saya share di sini 
Jika seseorang meninggalkan komentar dengan menggunakan akun facebooknya, maka di dinding atau wall facebooknya akan ada seperti contoh gambar di bawah ini :
Pasti saya yakin banget kalau sobat-sobat penggila blog juga pengen komentar seperti ini menghiasi blog sobat biar sedikit berbeda daripada yang lain.
Langsung ke tahap pemasangannya saja bagi yang pengen feature ini.
Saya juga langsung membuat tampilan komentar ini dihiasi menggunakan CSS.
Langkah 1
Pertama kali sobat copas dulu kode CSS nya, letakkan di atas kode </head>.
Saya juga langsung membuat tampilan komentar ini dihiasi menggunakan CSS.
Langkah 1
Pertama kali sobat copas dulu kode CSS nya, letakkan di atas kode </head>.
<style type='text/css'>
.fb_komen_box {margin-top:10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px;background-color:#3B5999;border:3px solid #2B2B2B;margin-bottom:10px;padding:10px 7px 45px;}
.fb_komen_atas {width:400px;height:24px;padding:0;margin:0 0 5px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9qrAc4UXt4sUArYZnIzl2ihwKTlTBMEMmwNHT4yxMzZokBG-2-5yfPU_Gjd3hJXHZMGpBBioiHU7TdzWv1IV3UB7CsJWwio6QtVyYJQxmTmJb9ueBBwLwAdDsNuBHWBO9ejIJ7QJi2m1O/s1600/fb_koment_like.jpg") no-repeat scroll left top transparent;}
.fb_komen_atas a {width:214px;height:24px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UkaDSP2XPk9b1iW5OpWNnUl2PAETbHp2jid8YasJ9-Z2EkcjDAPDHuqSbKygHq6s1luQPciWE1vmxidRFuUwutDiMaXzSVr2Yghax6CI-L2OKkIzGLhyXBhy2JjteuPJMX6ic2qhPA/") no-repeat scroll left top transparent;display:block;margin-left:470px;text-indent:-5000px;}
.fb_komen_isi {-moz-border-radius:10px 10px 10px 10px;border-radius:10px;background:none repeat scroll 0 0 #FFFFFF;padding:12px 12px 0 12px;}
.fb_tombol{background-color: #fff;-moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #2B2B2B; border-bottom:1px solid #2B2B2B; border-right:1px solid #2B2B2B; font-size:10px; padding:2px 5px;width:ancho; float:right; margin-top:15px;}
</style>Langkah 2
Copy paste kode berikut di bawah tag <head>
Copy paste kode berikut di bawah tag <head>
<meta content='ID_APLIKASI' property='fb:app_id'/>
<meta content='ID_PROFIL_FACEBOOK' property='fb:admins'/>Langkah 3
Selanjutnya temukan kode <data:post.body/>. Jika sobat menggunakan auto readmore, paste kode di bawah ini setelah <data:post.body/> yang ke-2.
<b:if cond='data:blog.pageType == "item"'>
<div class='fb_komen_box'><div class='fb_komen_atas'>
<a href='http://www.facebook.com/pages/Adityas-Blog/191965157488670' target='_new' title='Become a fan'>Become a Fan</a></div>
<div class='fb_komen_isi'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
[hg] FB.init({appId : 'ID_APLIKASI',[/hg]
status : true,
cookie : true,
xfbml : true});};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '
//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);}());
</script>
[hg] <fb:comments width='450' expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>[/hg]
</div>
<div class='fb_tombol'><a href='http://goo.gl/TMQ1l' style='color:#3B5999;' target='_blank' title='Comment Box Facebook !'>Comment Box !</a></div></div></b:if>- Ganti ID_APLIKASI dengan ID_APLIKASI anda.
- Ganti ID_PROFIL_FACEBOOK dengan ID_PROFIL_FACEBOOK_ANDA
- Ganti angka 450 di tag <fb:comment> dengan ukuran lebar yang anda inginkan untuk lebar comment box nya.
Jangan lupa komentarnya......
39 Respon Komentar
Keren ini
iy gan,, g pasang rugi...
hihi..
:17:
Ijin copas sob komen facebooknya....tenang aja...pasti dipasang link source-nya....thans sharingnya sob...keren bgt
ok gan...
tdak mslah....
:24:
ini dia yg ane cari-cari.. keren bnget gan. :u:
SELAMAT MENCOBA @Anonymous
:15:
tfs kawan, akhirnya nyari² ketemu disini...
salam damai kami sepanjang hari
(ane pasang di blog ane sob)
terima kasih juga sob dah berkunjung @kaos iwan fals
thank sob, tapi. id profil facebook itu yang mana? ane udah ganti ma riu.kimura id profilnya, gimana ?
ini yang ane cari gan !!!!!!!!!!! :k:
@Rizki Mujizat H. : Kalau bisa id yang number itu gan...
langkah ke satu nya kok kepotong?
gmn??? email aku ya radira_lla@yahoo.com
terpotong gmn mksudnya..?? @Radira
Wah Terima kasih banyak Gan... Kotak Komentarnya Mantab Banget dah.. hehe :m:
Salam kenal sob, link sobat dah ane pasang.......
Ok trrims sob...
cara biar komentarnya ada emotionnya gmn??
kasih caranya ya :D
klo sudah bisa hubungi saya di blog saya saja di www.study-it.tk
@Adityas Blog
Coba agan liat deh Cara pertama kok terpotong gitu ?? kode CSS'nya ngga lengkap tuh...
@ma†ser07™ emg agan browser'a pake apa..?? mngkin pengaruh sm browser'a gan..
ane sndiri yg buat kode CSS nya jd tau lngkap ato g nya..
ane jg lihat semua'a lngkap pake Chrome 11..
ID Aplikasi mksdnya gimana gan?
@Anonymous ID aplikasi facebooknya gan..
gan boleh bagi2 cara pasang emoticon di komentar donk ???
email me : maiser07@facebook.com
@Adityas Blog
oh iya gan... gua pke crome langsung kelihatan.....
anw seperti komentar gua di atasss... bagi2 donk cara pasang emoticon di kotak komentar yg banyak kayak punya agan ???
@ma†ser07™ ane udah bikin ko artikel'a..
bs lihat di sini gan..
@Adityas Blog
Thankzzz utk smuanya gan....
:m::m::m::m:
nz dah :p:
kok susuah yaaaa :h:
Sob itu cara buat ID Didevelopers.facebook.com itu kita klick bagian yg mana eaaa?
bos, punya saya sudah saya pasangi tetapi kalo ada orang yang komentar menggunakan akun facebook kok tidak tampil di pemberitahuan facebook saya ya? mohon bantuannya.?
@M. Miftahur Royan ente sbagai admin bukan d aplikasi facebook'a..??
klo bisa ane minta alamat blog'a donk..
biar ane cek..
:q:
ayo semangat ngeblog.. haha. makasih gan..
sebelumnya ane pake versi lama, jd gak ada pemberitahuan deh...
kasian yang komen.. hehe.. :e:
susahh juga yaaa,, :b
assalamualaikum gan, gan ane mau tanya, ane kan udah masang kotak komentar FB di blog ane, tp ada yang kurang pas, kotak komentarnya muncul di setiap postingan di beranda blog, ane pengen supaya di beranda kga ada kotak komentar Fb nya, (Kotak komentar FB cuma tampil ketika kita buka postingan) kalo-kalo gak gerti apa yang ane maksud, tolong di cek langsung yaa ke blog ane, http://hadityasyafei.blogspot.com ...
Mohon Pencerahannya .. tks
wah ahirnya dapat juga,, ini yang ane cari gan
silahkan di cobi dulu gan..
hehe :D
nice post gan :b:
seperti biasa.. You're AWESOME! :m: udah ane terapin di blog dummy, Bro.. pojoktauhid.blogspot.com kerennnn! :w:
terima kasih bang Muxlimo.. :e::y:
yang simpel ada gag bro
Ga bs copy
Tinggalkan Komentar Anda?
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar
Emotion lainnya?