Membuat kotak komentar facebook

Image by http://jember-preker.blogspot.com/

Memudahkan pengunjung dalam berkomentar adalah langkah awal dari membuat pengunjung lebih mudah dalam berkomentar.Dengan menggunakan kotak komentar facebook berdampingan dengan kotak komentar bawaan default blogger bukan tidak mungkin pengunjung lebih mudah dalam memilih ID untuk komentar.Tidak hanya untuk sahabat blogger saja,Mungkin pengunjung yang ingin bertanya namun tidak memiliki akun blog dapat berkomentar menggunakan ID facebooknya.

Kelebihan dari kotak komentar facebook ini akan lebih mudah berkomentar dengan facebook apabila sudah login facebook dan dapat memilih fitur yang lain seperti yahoo dll.

Step by step membuat kotak komentar FB :

1. Login ke account blogger Anda
2. Masuk Tab Template lalu  Edit HTML
3. Backup templte dahulu apabila terjadi kesalahan.
4. Klik Format template untuk menggantikan Expand widget template
5. CTRL+F cari kode  ]]></b:skin>
6. Kalau sudah dapat maka masukkan kode berikut dibawah dan letakkan 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;}
7. Kemudian Anda cari kode </head> dan letakkan kode di bawah 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 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>

   
   

   Ganti ID FB dengan ID FB anda misal https://www.facebook.com/tyiowahyu
   yang berwarna biru adalah ID fb anda
   

   
   

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

<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='500'/> </b:if> </div> <span style='font-size: 85%'>Widget Comment <a href='http://bloggermahir.blogspot.com/2013/01/kotak-komentar-facebook-dan-blog-berdampingan.html' rel='follow' target='_blank'>FB-Blog </a></span> <div class='comments comments-page' id='blogger-comments-page'>

Jika terdapat dua <div class='comments' id='comments'> maka pasteskan kode diatas dibawah keduanya <div class='comments' id='comments'>.Sejauh ini blog saya tidak ada efek apa" dan masih valid.

NB: Jika saat dipastekan terdapat dua <div class='comments comments-page' id='blogger-comments-page'> Maka hapus salah satunya.Terkadang template blog tidak ada <div class='comments comments-page' id='blogger-comments-page'> maka pada kode diatas saya tambahkan sendiri jika sudah ada ya tidak usah biar tidak double.

Lalu save dan lihat hasilnya jika berhasil maka akan muncul pada kotak komentar disebelahnya.

Saya merekomendasikan tidak usah diedit untuk menghindari error.Semua kode sudah Fix saat di uji pada template saya dan jika error mohon SS dan commen.Saya akan membantu anda untuk nantinya komentar di blog anda.