Cara Membuat Komentar Facebook Di Blog Keren

Cara Membuat Komentar Facebook di Blogspot. baik sobat blogger semua kali ini saya mau share mengenai cara membuat komentar facebook seperti yang ada di blog saya ini

Untuk membuatnya ikuti langkah-langkah berikut : (Back up dulu template Sobat)

Login ke blogger Dashboard - Layout - Edit HTML
Centang Expand Template Widget.
Selanjutnya Ctrl + F pada Keyboard sobat, Lalu cari code di bawah ini :

<div class='comments' id='comments'>

Setelah ketemu Silahkan Copy dan Paste code berikut di bawahnya :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Cari kode </head> lalu letakkan kode dibawah ini diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='MASUKKAN ID FB SOBAT BLOGGER' property='fb:admins'/>
<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>

ID FB nya adalah di bagian Adress Bar Browser ketika buka Profile Facebook, contoh misalnya FB saya, profilnya ini http://www.facebook.com/blogger maka ID saya blogger .

Cari kode ini /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin
Lalu Letakkan Code Berikut di Bawah nya

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Save Template

UPDATE !!!

Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

Berikut Langkah-langkahnya :

1.Cari kode ini <div class='comments' id='comments'> (untuk mepermudah mencarinya kamu dapat menekan tombol CTRL+F ) di template Sobat, dan kode ini ada dua. Temukan yang kedua.

2.Letakkan kode ini dibawahnya

<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='100000281334751' property='fb:admins'/>
<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>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

3.Ganti nomor yang berwarna biru dengan id facebook kamu. Setelah itu simpan

Untuk Cara mengetahui ID Facebook kamu adalah

Klik Profile

Ganti www di address bar dengan graph contoh : http://graph.facebook.com/joseph.fernandio

Share 'Cara Membuat Komentar Facebook Di Blog Keren' On ...