Kotak Komentar Facebook/Facebook Comment Box Terbaru (With Reply)
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).
Untuk membuatnya, pertama-tama dapatkan Aplikasi ID dengan membuat aplikasinya 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
Langkah 1
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'/>
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 -->
<!-- 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/AVvXsEh7MXf6h8CfUa7UVktBNNXEWDcUQu5Pw_Qk-XwK6guKK95Py-37s4cpe32Xg0yf5thc50u_xmfGPrRyl0c9uo-_CQKhBueudXEowtv3oYmg5E9KTlO-9dkQ7orwojSqrHc6fFKFYUb35C2d/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<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/AVvXsEh7MXf6h8CfUa7UVktBNNXEWDcUQu5Pw_Qk-XwK6guKK95Py-37s4cpe32Xg0yf5thc50u_xmfGPrRyl0c9uo-_CQKhBueudXEowtv3oYmg5E9KTlO-9dkQ7orwojSqrHc6fFKFYUb35C2d/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 -->
Semoga bisa bermanfaat.
Post by Doel Piero.
0 komentar:
Speak up your mind
Tell us what you're thinking... !