" Bal, gw gabisa comment lewat facebook nih..! "" Ah, gw males bikin ID blogger nya.. "
" Gw belom punya ID google nih bal.. "
Itulah beberapa komentar teman saya yang ingin meninggalkan comment di blog saya tetapi mereka mengeluhkan soal kolom post comment yang belum sediakan di blog saya ini..
Hmmmmmm...karena teman-teman saya juga adalah pembaca blog ini, maka menangani masalah ini saya mencari cari artikel yang berhubungan dengan keluhan mereka. Tidak percuma, akhirnya saya mendapatkan apa yang saya inginkan juga (he..he..he..)
Oke, langsung saja. Inilah cara menambahkan kolom komentar dan kolom komentar untuk Facebook saling berdampingan di blog anda :
2. Klik rancangan -> Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukan 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;}
7. Kemudian anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat di atas 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'/><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>
(WARNING : Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda ( contoh :
https://www.facebook.com/George ) maka ID Anda berada pada tulisan yang berwana merah. Namun jika Anda belum merubah ID Anda, maka yang tertera adalah berupa angka. Sudah mengerti? mari kita lanjutkan..)
9. Kemudian cari kode <div class='comments' id='comments'>
( Keterangan : Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kode <div class='comments' id='comments'> yang pertama dan kedua ).
<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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
( Perhatikan angka yang berwarna merah dan kuning diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 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 :
<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='400'/>
</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 save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
Bagaimana, tidak rumit bukan untuk mencantumkan kolom komentar facebook anda di dalam blog sendiri?
Sekian tips dari saya, semoga membantu! :D
( sumber )
