Cara Membuat Kotak Komentar Blog & Facebook

xmlns:fb='http://ogp.me/ns/fb#'

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<meta content='favicon.ico' property='og:image'/>
<meta content='App ID Facebook Sobat' property='fb:app_id'/>
<meta content='ID Facebook Sobat disini' property='fb:admins'/>
<meta content='article' property='og:type'/>

Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>

Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

<style>
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</style>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Sekarang kita akan mengambil kode ID Facebook Sobat, caranya masuk ke akun facebook sobat kemudian lihat di kotak address bar browser yang ada di atas.

Pada teks yang berwarna merah terdapat Nama atau Angka dibelakang Alamat Facebook, itulah ID Facebook Sobat. Gunakan ID tersebut untuk digunakan sebagai kode ID Facebook.

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;App ID Facebook Sobat&#39;,
channelUrl : &#39;<data:blog.url/>&#39;,
status : true,
cookie : true,
xfbml : true
});
 // Additional initialization code here

};
// Load the SDK Asynchronously
(function(d){
var js, id = &#39;facebook-jssdk&#39;, ref = d.getElementsByTagName(&#39;script&#39;)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
js.src = &quot;//connect.facebook.net/en_US/all.js&quot;;
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'> atau kode yang mirip dengan kode <div class='comments' id='comments'> pada kode HTML template blog sobat.

<div style='margin-left:20px;'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png' style='vertical-align:top;'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
</div></div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>