Memuat Halaman
"Kotak Komentar Facebook Versi Terbaru"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Kotak Komentar Facebook Versi Terbaru

kotak komentar facebook terbaru

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>.
<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(&quot;https://lh5.googleusercontent.com/-VR1-lU9vpFg/TXlepwIAptI/AAAAAAAAAQw/pfct6Vw0luo/s1600/fb_koment_like.jpg&quot;) no-repeat scroll left top transparent;}
.fb_komen_atas a {width:214px;height:24px;background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UkaDSP2XPk9b1iW5OpWNnUl2PAETbHp2jid8YasJ9-Z2EkcjDAPDHuqSbKygHq6s1luQPciWE1vmxidRFuUwutDiMaXzSVr2Yghax6CI-L2OKkIzGLhyXBhy2JjteuPJMX6ic2qhPA/&quot;) 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>
<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 == &quot;item&quot;'>
<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  : &#39;ID_APLIKASI&#39;,[/hg]
         status : true,
         cookie : true,
         xfbml  : true});};
  (function() {
      var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol + &#39;
  //connect.facebook.net/en_US/all.js&#39;;
      e.async = true;
      document.getElementById(&#39;fb-root&#39;).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.
Selesai, semoga bermanfaat dan berbagilah dengan yang lainnya.
Jangan lupa komentarnya......

Gabung ke group:

Artikel Terkait

39 Respon Komentar

Anonymous, said...
March 5, 2011 at 12:16 PM

Keren ini

Unknown, said...
March 5, 2011 at 2:39 PM

iy gan,, g pasang rugi...
hihi..

:17:

SERBA BLOG, said...
March 10, 2011 at 1:08 AM

Ijin copas sob komen facebooknya....tenang aja...pasti dipasang link source-nya....thans sharingnya sob...keren bgt

Unknown, said...
March 10, 2011 at 9:18 AM

ok gan...
tdak mslah....
:24:

Anonymous, said...
March 26, 2011 at 12:38 PM

ini dia yg ane cari-cari.. keren bnget gan. :u:

Unknown, said...
March 27, 2011 at 3:20 AM

SELAMAT MENCOBA @Anonymous
:15:

kaos iwan fals, said...
April 9, 2011 at 4:59 AM

tfs kawan, akhirnya nyari² ketemu disini...
salam damai kami sepanjang hari

(ane pasang di blog ane sob)

Unknown, said...
April 9, 2011 at 10:41 AM

terima kasih juga sob dah berkunjung @kaos iwan fals

Admin, said...
April 11, 2011 at 1:00 PM

thank sob, tapi. id profil facebook itu yang mana? ane udah ganti ma riu.kimura id profilnya, gimana ?

unlimited-24, said...
April 13, 2011 at 8:55 PM

ini yang ane cari gan !!!!!!!!!!! :k:

Unknown, said...
April 14, 2011 at 6:42 AM

@Rizki Mujizat H. : Kalau bisa id yang number itu gan...

Radira, said...
April 14, 2011 at 8:02 PM

langkah ke satu nya kok kepotong?
gmn??? email aku ya radira_lla@yahoo.com

Unknown, said...
April 14, 2011 at 9:28 PM

terpotong gmn mksudnya..?? @Radira

Anonymous, said...
April 26, 2011 at 8:44 PM

Wah Terima kasih banyak Gan... Kotak Komentarnya Mantab Banget dah.. hehe :m:

sy@ms, said...
May 15, 2011 at 8:38 PM

Salam kenal sob, link sobat dah ane pasang.......
Ok trrims sob...

bayu, said...
May 16, 2011 at 11:55 PM

cara biar komentarnya ada emotionnya gmn??
kasih caranya ya :D
klo sudah bisa hubungi saya di blog saya saja di www.study-it.tk

Maiser, said...
May 18, 2011 at 7:09 PM

@Adityas Blog

Coba agan liat deh Cara pertama kok terpotong gitu ?? kode CSS'nya ngga lengkap tuh...

Unknown, said...
May 19, 2011 at 9:40 AM

@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..

Anonymous, said...
May 20, 2011 at 9:04 AM

ID Aplikasi mksdnya gimana gan?

Unknown, said...
May 21, 2011 at 12:21 AM

@Anonymous ID aplikasi facebooknya gan..

Maiser, said...
May 21, 2011 at 10:17 PM

gan boleh bagi2 cara pasang emoticon di komentar donk ???


email me : maiser07@facebook.com

Maiser, said...
May 21, 2011 at 10:24 PM

@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 ???

Unknown, said...
May 22, 2011 at 4:28 AM

@ma†ser07™ ane udah bikin ko artikel'a..
bs lihat di sini gan..

Maiser, said...
May 25, 2011 at 10:52 AM

@Adityas Blog

Thankzzz utk smuanya gan....
:m::m::m::m:

andre farras, said...
July 4, 2011 at 11:19 AM

nz dah :p:

Anonymous, said...
August 12, 2011 at 4:07 AM

kok susuah yaaaa :h:

Anonymous, said...
August 19, 2011 at 5:26 PM

Sob itu cara buat ID Didevelopers.facebook.com itu kita klick bagian yg mana eaaa?

royansableng, said...
November 3, 2011 at 1:13 PM

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.?

Unknown, said...
November 6, 2011 at 2:08 AM

@M. Miftahur Royan ente sbagai admin bukan d aplikasi facebook'a..??
klo bisa ane minta alamat blog'a donk..
biar ane cek..
:q:

aboe's, said...
November 28, 2011 at 2:55 AM

ayo semangat ngeblog.. haha. makasih gan..
sebelumnya ane pake versi lama, jd gak ada pemberitahuan deh...
kasian yang komen.. hehe.. :e:

DEVIL OF CHEATER, said...
December 18, 2011 at 10:26 AM

susahh juga yaaa,, :b

Unknown, said...
January 20, 2012 at 9:33 AM

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

January 24, 2012 at 12:15 AM

wah ahirnya dapat juga,, ini yang ane cari gan

Unknown, said...
March 13, 2012 at 4:38 AM

silahkan di cobi dulu gan..
hehe :D

Anonymous, said...
March 16, 2012 at 2:51 AM

nice post gan :b:

MUX SPARROW, said...
April 2, 2012 at 12:34 PM

seperti biasa.. You're AWESOME! :m: udah ane terapin di blog dummy, Bro.. pojoktauhid.blogspot.com kerennnn! :w:

Unknown, said...
April 3, 2012 at 3:01 AM

terima kasih bang Muxlimo.. :e::y:

Anonymous, said...
July 28, 2013 at 11:18 PM

yang simpel ada gag bro

Ade Wamena, said...
September 12, 2016 at 9:21 PM

Ga bs copy

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
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

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?