Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog

Farhan Share - sobat farhan pada postingan kali ini farhan akan berbagi tentang 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, sobat farhan 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 farhan 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(&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='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;}

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