Membuat Kotak Komentar Facebook dan Blog Berdampingan (News)

Membuat Kotak Komentar Facebook dan Blog Berdampingan, nah seperti judulnya yang akan kita bahas yaitu Membuat Kotak Komentar Facebook dan Blog Berdampingan, postingan ini juga merupakan salah satu request dari teman saya yang meminta dicarikan Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan, dan sekarang requestnya sudah saya penuhin, Kotak komentar, kamu pasti  sudah tahukan tentang kotak komentar, jadi tidak perlu di jelasin lagi, disini ideini hanya ingin menjelaskan cara Membuat Kotak Komentar Facebook dan Blog Berdampingan, mungkin kamu sudah pernah menggunakan Plugins kotak komentar facebook yang lama, dan pasti hanya tunggal, yaitu facebook saja, sekarang ideini membuat  agar keduanya antara facebook dan blog berdampingan, oya sebelum membuat yang harus diingat yaitu, jika kamu pernah menggunakan Plugins Fb Comment yang lama, dan ingin mengganti dengan ini, maka semua comment yang lama akan hilang, tapi ini hanya berlaku untuk Plugins fb coment, sementara untuk comment blog akan tetap ada. oke langsung saja ke TKP, Langkah langkah Membuat Kotak Komentar Facebook dan Blog Berdampingan :

1. Masuk ke Blog anda.

2. Pilih Layout/Tata Letak ► Edit HTML

3. Saya sarankan untuk membackup template anda dengan mengklik Download Full Template untuk berjaga jaga jika terjadi kesalahan.

4. Centang kotak yang bertuliskanExpand Widget Template. 

5. Setelah itu cari code <div class='comments' id='comments'> gunakan ctrl + F untuk mempermudah pencarian.

6. Setelah ketemu letakan code berikut ini Tepat dibawah <div class='comments' id='comments'>.

<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'/>
<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='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 == &quot;item&quot;'>
<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'>

Dan hasilnya akan Seperti ini :

<div class='comments' id='comments'>
<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'/>
<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='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 == &quot;item&quot;'>
<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'>

Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing

7. Sekarang cari lagi Code </head>

8. Jika sudah ketemu silahkan Letakkan Code Berikut Tepat di Atas code </head>

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

Dan hasilnya akan seperti ini :

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

Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook tinggal buka profil kamu terus lihat code di belakangnya, bisa berupa angka atau tulisan, atau nama, contohnya seperti berikut : https://www.facebook.com/bayurifai.tk
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya. 

9. Sekarang Cari Lagi Code ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang mirip dengan code diatas.
Lalu Letakkan Code Berikut tepat 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;}

10. Sekarang Silahkan Klik Pratinjau dulu untuk melihat sudah benar atau belum, Jika sudah benar dan tidak ada masalah Silahkan Klik SIMPAN.
 ► Ini sedikit Screeshootnya :

Selamat Mencoba Dan semoga Berhasil :D