Selasa, 07 Mei 2013

Cara Lengkap Membuat Kotak Komentar Facebook Di Blog

Salam semuanya...jumpa kembali bareng hansmjlkcommunity pada kesempatan ini saya akan coba sedikit mengulas Cara Lengkap Membuat kotak Komentar Facebook Di Blog,banyak yang mengomentari atas artikel artikel yang kita buat akan menjadikan motivasi untuk lebig giat dalam pembuatan artikel baru,namun kadang orang yang awam merasa sulit untuk memberikan komentarnya nah oleh karena itu alngkah baiknya bila di pasang kotak komentar facebook untuk lebih mempermudah pengunjung berkomentar.

Memberikan kemudah dengan cara memasang kotak komentar facebook yang berdampingan dengan kotak komentar blog akan sedikit memberikan keunikan dan besar kemungkinan akan meningkatkan traffic pengunjung karena dengan mudahnya bisa berkomentar lewat facbook.Buat kalian yang penasaran seperti apa sih kotak komentar facebook itu silahkan lihat caranya di bawah ini.


1. Login ke akun log kalian.
2. Pilih menu Template > Edit HTML ( Centang Expand Widget Temapltes ).
3. Cari kode ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian kode).
4. Copy kode di bawah dan pastekan 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;}


5. Cari kembali kode </head> kemudian copy kode di bawah dan pastekan tepat di atas kode tersebut.


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

Keterangan :
Ganti tulisan yang berwarna Hijau dengan ID Fans Page kalian,untuk mendaptkan ID Fans Page kalian buka facebook kemudian klik halaman blog copy kodenya yang di browsur (lihat gambar) dalam hal ini kalian cukup copy kode angkanya saja kurang lebih 15 hurup contoh 394963703943934


6. Cari kembali kode <div class='comments'id='comments'>,pada umumnya kode tersebut ada dua maka kalian pilih yang kedua
7. Selanjutnya copy kode di bawah dan letakan setelah kode <div class='comments'id='comments'> yang kedua.


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

Keterangan

  • Angka 10 menunjukan jumlah komentar facebook yang tampil di blog.
  • Angka 400 menunjukan lebar kolom komentar facebook.
  • Untuk tulisan yang terakhir <div class='comments comments-page'id='blogger-comments-page'> silahkan hapus jika kode tersebut sudah ada.

Demikian tutorial kali ini yang bisa saya sampaikan tentang Cara Lengkap Membuat Kotak Komentar Facebook Di Blog semoga dapat membantu sobat semuanya dan saya ucapkan terima kasih atas kunjungannya.

Tidak ada komentar:

Posting Komentar