Cara Membuat Komentar Facebook dan Blogger Berdampingan

Kali ini saya hadir dengan sebuah tutorial blog, pada artikel ini saya akan berbagi bagaimana cara membuat komentar facebook dan blogger berdampingan di blog. Ok, tidak perlu basa basi lagi, langsung saja kita ketahap cara pembuatannya.

Cara Membuat Komentar Facebook dan Blogger Berdampingan:

1.  Seperti biasa, Login ke account blogger sobat

2.  Pilih Template lalu klik Edit HTML

3.  Download template sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan

5.  Cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)

6.  Kalau sudah ketemu masukkan kode berikut ini di atas kode ]]></b:skin>

.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;}

Catatan :

Sobat dapat mengubah warna tampilan kotak komentar sobat dengan mengutak-atik kode HTML di atas. Sobat dapat mengubah warna backround sesuai dengan kehendak sobat.

7.  Kemudian cari kode </head>

8.  Jika sudah ketemu, masukkan kode berikut ini tepat diatas kode </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 Anda disini' property='fb:admins'/>

    <meta content='APP ID' property='fb:app_id'/>

    <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> 

Perhatikan: kode yang berwarna merah di atas, ganti dengan ID facebook sobat.

9.  Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode <div class='comments' id='comments'> yang pertama dan kedua (tidak apa-apa, sejauh ini belum ada efek yang merugikan).

<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='1' width='500'/></b:if></div>

<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna Biru dan Merah diatas, angka 1 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 500 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<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='1' width='500'/></b:if></div>

<div class='comments comments-page' id='blogger-comments-page'>

<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)

10.  Kemudian klik simpan Template, dan lihat hasilnya.