KOTAK KOMENTAR FACEBOOK VERSI TERBARU

Ternyata saya sudah mendapatkan bagaimana cara membuat atau memasang kotak komentar facebook yang bisa direply 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) ataunotification (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

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/AVvXsEgkpV9FbMSyuco5mS6nU__8x2Y_Lhp8BRnN8pn9QP1SlZ1OhyphenhyphenxnHaTowSj3YwgmHDOl8lJlomMOJJWHtpgU3vFsAWXzNIg88WP05FpOp2ohYS8SK806idXqXokA4zqADWRloV_fK_sIIQ/5B3%5D.jpg&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() {

       FB.init({appId  : &#39;ID_APLIKASI&#39;,
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>

  <fb:comments width='450' expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>
</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......