Membuat Komentar Facebook di Blogspot/Blogger

Teristimewa Membuat Komentar Facebook di Blogspot/Blogger - akan berbagi informasi tentang Cara membuat komentar facebook di Blogspot/Blogger. Memang di Google banyak tutorial tentang ini, tetapi sobat bisa melihatnya sendiri. Saya menggunakan double komentar, yaitu Komentar facebook dan blogger. Jadi tutorial ini sudah saya uji cobakan kepada blog saya. Dan hasilnya bisa dilihat sendiri.

Fungsi dari memberikan Komentar facebook adalah selain untuk memudahkan pembaca untuk berkomentar, blog kita juga akan mendapatkan backlink dari facebook. Otomatis peringkat kita akan naik. Ok. langsung saja.

Membuat Komentar facebook dan blogger berdampingan.
1. masuk ke akun blogger.
2. Masuk ke Template => Edit HTML => Lanjutkan
3. centang kotak di pojok kiri atas.
4. cari kode ]]></b:skin>  Supaya lebih mudah gunakan tombol kombinasi CTRL + F. Lalu masukkan ]]></b:skin>  Jika sudah ketemu, Masukkan Kode dibawah ini tepat diatasnya.

.comments-page { background-color: #ffffff;}
#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;}

untuk warna merah, anda bisa memilihnya untuk sesuai selera, Hilangkan apabila ingin background transparan.
Para Master sebenarnya mewajibkan Untuk ditempatkan dibawah /* Comment atau #comments. tapi sebenarnya sama saja, karena disitu adalah tempat untuk kode CSS.
5. Cari kode </head>
Masukkan 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='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>

Untuk ID facebook. Lihat Pada Profil kamu. Misal Url facebook saya http://facebook.com/firejunior , Jadi ID Facebook saya firejunior.
6. Lalu cari Kode <div class='comments' id='comments'>
Jika sudah, Pastekan kode dibawah ini dibawahnya. Oh iya, Biasanya kode tersebut ada 2, Pastekan di keduanya.

    <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='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Untuk 2 dan 500, sobat bisa menyesuaikan keinginan sobat. 2 adalah jumlah komentar yang akan ditampilkan di facebook. dan 500 adalah lebar tempat komentarnya.

Biasanya pada templatetertentu sudah ada kode <div class='comments comments-page' id='blogger-comments-page'> . jika ada kode seperti itu berdampingan, seperti

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

Maka hapus salah 1 nya. 

Jika sudah Preview template, Cek apabila ada kesalaha, Jika sudah, Save template dan lihat hasilnya.