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/AVvXsEjif0oPKMZOkyF2LoaZenDPuBvUYfHaHf2Ljd3yPmPjNXu0bOrQu7LfoooagiIviXcLhv2IZvXRrpleHXOKwG8CzH4rcuc1xGHGfFLYM0TLsma3WttuU_cy-2TZFzu6hc4dmGQ6YQt6_Xdq/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/AVvXsEjif0oPKMZOkyF2LoaZenDPuBvUYfHaHf2Ljd3yPmPjNXu0bOrQu7LfoooagiIviXcLhv2IZvXRrpleHXOKwG8CzH4rcuc1xGHGfFLYM0TLsma3WttuU_cy-2TZFzu6hc4dmGQ6YQt6_Xdq/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.
Tidak ada komentar:
Posting Komentar