Membuat Komentar Facebook Di Blog Disamping Komentar Blogger

Hallo Blogger... Apakah kamu ingin membuat kotak komentar facebook di samping kotak komentar standard blogger? Kalau iya kamu tidak akan menyesal membaca postingan saya kali ini. Karena kali ini saya ingin membagikan cara untuk mengintegrasikan komentar facebook dengan komentar blogger.

Kenapa harus menggunakan kotak komentar facebook pada blog? Alasan utamanya karena facebook merupakan jejaring sosial yang banyak digunakan di Indonesia. Selain itu jika kamu menggunakan komentar facebook, secara tidak langsung orang yang berkomentar pada blog kamu akan membagikan postingan blog anda di kronologi facebooknya.

Jangan lupa baca juga :

Merubah Kotak Komentar Blog Yang Keren Dengan Disqus

Cara Membuat Komentar Facebook Di Blog

Step 1 : Login ke blogger >> Dashboard >> Template

Catatan : Pastikan kamu selalu backup template blog kamu sebelum melakukan edit HTML

Step 2 : Klik Edit HTML (Jangan lupa centang Expand Template Widget)

Step 3 : Cari kode di bawah ini (bisa dengan Ctrl + F)

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

Catatan : Jika anda menemukan dua kode yang sama seperti diatas, pastikan anda memilih kode yang ke dua untuk melanjutkan ke langkah selanjutnya.

Step 4 : Copy kemudian paste kode di bawah ini tepat di bawah kode diatas

<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'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukan ID Fb anda disini' 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>

Step 5 : Ganti tulisan Masukan ID Fb anda disini di atas dengan ID Facebook anda.

Catatan : Karena facebook ID ini sudah diganti dengan username, maka kamu tinggal memasukkan username facebook kamu kesitu. Sebagai contoh pada url facebook https://www.facebook.com/bayu.adipati. Yang dimaksud dengan username adalah bayu.adipati.

Untuk merubah lebar kotak komentar facebook, kamu bisa merubah angka 400 pada kode di atas. Sesuaikan dengan lebar entri blog kamu.

Setelah itu, simpan template dan lihat hasilnya. Bagaimana sobat blogger, mudah bukan? Nah sekarang kamu sudah bisa membuat kotak komentar facebook di blog. Kalau mau lihat hasilnya kamu bisa lihat kotak komentar pada blog ini.

Update 15 Desember 2012 : Cara Membuat Komentar Facebook Di Blog Disamping Komentar Blogger V2

Post Tags:

Comment Widget widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/