cara membuat komentar
facebook berdampingan dengan komentar blog di bawah postingan. Ya, sobat
sebenarnya apasih kegunaan dari widget komentar facebook berdampingan
dengan komentar blog seperti gambar di atas ini? Kegunaanya adalah untuk
menghemat space yang tersedia di dalam halaman postingan, jadi para
pengunjung melihatnya tidak terlalu banyak widget, terlihat simple, tapi
terkesan elegant dan seperti blog professional, selain itu widget ini
juga bisa menambah keakraban pemilik web kepada pengunjungnya maupun
antara saling pengunjung di blog tersebut, karena dengan mereka
memberikan komentar di fb comment di blog kita, comment mereka juga bisa
muncul di TL Fb mereka atau di halaman Fan Page FB blog kita, dari situ
juga banyak keunggulan lainya yang bisa kita dapat, yaitu semakin
banyak orang yang memberikan link blog kita di tl FB mereka, otomatis
akan semakin banyak yang mengetahui keberadaan blog kita, dan tentunya
secara perlahan traffic blog kita akan terangkat naik.
Nah sobat sesuai dengan tema postingan kita kali ini, s bisa
lihat gambar di atas adalah contoh widget kometar facebook berdampingan
dengan komentar blog, bagaimana sobat? pastinya terkesan lebih rapi,
simple, dan menarik untuk di coba bukan. Baik, sobat farhan kita
langsung saja masuk ke inti postingan pada topik pembicaraan kita hari
ini, di bawah ini sudah persiapkan langkah-langkah membuat
komentar facebook berdampingan dengan komentar blog, di simak baik-baik
ya.
1. Login ke Blogger.
2. Pilih Template.
3. Pilih Download Full Template terlebih dahulu (mencegah kesalahan dalam mengedit HTML).
4. Pilih Edit HTML.
5. Centang box "Expand Template Widget".
6. Lalu sobat cari kode <div class='comments' id='comments'> menggunakan CTRL+F, Jika ada 2 kode <div class='comments' id='comments'>, pilihlah yang ke 2, selanjutnya sobat letakkan kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2.
<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'>
Catatan : Ganti kode '2' dengan jumlah postingan Facebook.
Catatan : Ganti kode '400' dengan lebar area postingan.
7. Lalu sobat cari kode </head>, letakkan kode di bawah 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 Facebook' 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>
Catatan: ganti kode "ID Facebook" dengan Id Facebook anda, misalkan http://facebook.com/farhanshare, berarti farhanshare ID Facebooknya.
8. Cari kode /* Comment atau #Comment, jika ada beberapa kode Comment pilihlah kode yang pertama, lalu sobat letakkan kode di bawah ini tepat di bawah kode /* Comment atau #Comment tadi yang pertama.
.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;}
#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;}
9. Klik "Save Template" dan Selesai.
Demikian sobat farhan sedikit ilmu
tentang cara membuat Komentar Facebook berdampingan dengan Komentar
Blog, Selamat mencoba, Bila ada pertanyaan comment di bawah.
Script Source : Blog Dhika
