Setelah jalan-jalan ke google, walhasil ketemu dengan tips membuat facebook comment box/kotak komentar facebook yang cukup unik, berbeda dengan facebook comment box yang lama. disini terdapat perbedaan di bagian comment body-nya yaitu memiliki fitur Reply seperti layaknya status di facebook.
Pada Facebook Comment Box yang terbaru ini juga bisa mengirimkan pemberitahuan kepada admin atau pemilik website/blog tersebut jika ada seseorang yang meninggalkan komentar de website/blog tersebut. Cukup menarik bukan, karena berbeda dengan Comment Box yang lama, yang tidak memiliki fitur Reply (Balas), Like (Suka), Notification (Pemberitahuan).
Sebelum mencobanya, ada baiknya lihat screen shot nya dibawah ini :
Untuk melihat Demo nya, silakan kunjungi webblog teman saya yang sudah mencobanya DISINI
Untuk membuatnya, pertama-tama dapatkan Aplikasi ID dengan membuat aplikasinya disini [http://developers.facebook.com/setup/]
Jika kurang mengerti cara membuat Aplikasi ID Facebook, silakan lihat caranya DISINI
Jika sudah mendapatkan Aplikasi Id, sekarang anda bisa memasang Facebook Comment Box/Kotak Komentar Facebook yang baru ke Blog anda.Berikut cara-caranya.
- Masuk ke blogger
- Dihalaman Dasbor/Dashboard, klik Rancangan/Design.
- Lalu klik Tab Edit HTML
- Centang Expand Widget Template
Cari kode berikut <head>
Letakkan kode berikut ini setelah kode diatas tadi
<meta content='App ID' property='fb:app_id'/>
<meta content='ID Profile Facebook' property='fb:admins'/>
<meta content='ID Profile Facebook' property='fb:admins'/>
- Ganti tulisan App ID dengan Aplikasi ID anda
- Ganti tulisan ID Profile Facebook dengan ID profil facebook anda
Langkah 2
Langkah selanjutnya, cari kode <data:post.body/>
Jika anda menggunakan fitur auto readmore, letakkan kode berikut ini setelah kode <data:post.body/> yang KEDUA.
atau
Anda bisa juga meletakkan kode berikut setelah code
<div class='post-footer-line post-footer-line-1'>
<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
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><fb:comments expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>
<div style='float:right; padding:10px><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
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><fb:comments expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>
<div style='float:right; padding:10px><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->
Nb :
Namun jika anda ingin kotak komentar yang sudah di perindah dengan tampilan kotak [lihat disini Demo-nya]
silakan gunakan kode berikut sebagai pengganti kode pada langkah kedua :
<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#ECEFF6; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:40px; -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 #627AAD; border-bottom:1px solid #2A4280; border-right:1px solid #2A4280;'>
<div align='left' style='text-align:left; background:#3B5998; -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 #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; padding:0 10px; margin-bottom:10px;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDaMwRUfFV7pm3Kj6AB2BWM1XMdbJMOEwJhFpw3UXrxxzvensCi2vhLbDKRQt48m1MTkqq78IMom6WDSH0LHXJuJvykF9a5XU4RxlGTHsWPeUXtimz7GLTA-yFN3LXCRV24M5zvYCTDgW_/s1600/serba-blog-facebook-comment.png' width='100%'/></a></div>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
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><fb:comments expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>
<div style='background-color: #3B5998;-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 #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; font-size:10px; padding:3px 5px;width:ancho; float:right; margin-bottom:5px;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#ECEFF6; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:40px; -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 #627AAD; border-bottom:1px solid #2A4280; border-right:1px solid #2A4280;'>
<div align='left' style='text-align:left; background:#3B5998; -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 #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; padding:0 10px; margin-bottom:10px;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDaMwRUfFV7pm3Kj6AB2BWM1XMdbJMOEwJhFpw3UXrxxzvensCi2vhLbDKRQt48m1MTkqq78IMom6WDSH0LHXJuJvykF9a5XU4RxlGTHsWPeUXtimz7GLTA-yFN3LXCRV24M5zvYCTDgW_/s1600/serba-blog-facebook-comment.png' width='100%'/></a></div>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
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><fb:comments expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>
<div style='background-color: #3B5998;-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 #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; font-size:10px; padding:3px 5px;width:ancho; float:right; margin-bottom:5px;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->
- Simpan hasilnya
Semoga bisa bermanfaat.
Source : http://adityameilaz.blogspot.com/2011/03/kotak-komentar-facebook-versi-terbaru.html
Makin keren ja ya fb comment, terimakasih ya sobat buat info nya...:)
ReplyDeleteGood dispatch and this enter helped me alot in my college assignement. Gratefulness you on your information.
ReplyDeletepaxil
Maaf , saya telah cuba tutorial ini tetapi masih belum menjadi , harap admin ada buat blog lain dan cuba buat sekali lain , mungkin ada kode yang di salin tersilap letak.
ReplyDeletemkasih gan,.,.,
ReplyDeleteatas tutor nya
tuh dah ane masukin ke blog saya gan,..,.
tampa edit apapun kecuali id app.,//. hehehe
mkasih gan
gimana mau bisa... ngasi contoh kok ada link di dalam nya..ya ngk bisa dong... ada" serba-seru2 " nya lagi.....setiap yang mau mencoba pasti mereka ingin copy turoterialnya dong, tapi kalau ada link gimana bisa.
ReplyDeletegan di blog gu ko, bacaan postnya kliyatannya cma kyk garis gni |
ReplyDeleteit cara ngecilin ukuran kotak it gmna..?
supaya bacaan coment/postnya keliyatan smw..?
kok g bisa ya ???
ReplyDeletegan,blog ane g da (data:post.body) dan (div class='post-footer-line post-footer-line-1') nya,kalo begini gimana?
ReplyDeletemampir ke blog ane gan
ReplyDeletehttp://iyoetpoenya.blogspot.com
Mantab infonya coba cari dulu id fb. salam kenal
ReplyDeleteid facebook ane ude jadi user name.. gmana dah..?
ReplyDeletewaduh ane ud ga maenan fb gan.? klo pake yang laen bisa ga ya?
ReplyDeletenice post ya gan. ane masih make manual ni, pengen sekali sekali nyoba. tenkyu.
Kl mo ga pake ribet (bikin aplikasi di Fb)kunjungin ajj link di bawah ini. Kodenya da jd, tinggal di copas aja.
ReplyDeletehttp://anakedoya.blogspot.com/2012/02/cara-mudah-pasang-kotak-komentar.html
bisa langsung coba nih
ReplyDeleteRumit juga cara pasangnya ya Gan...lha saya hanya seorang tukng marmer yang nggeh-ngoh dengan HTML ini Gan...Bisa bantu nggak Gan..???
ReplyDeletekeren bangat fb coment nya
ReplyDelete