Cara Membuat Komentar Facebook dan Blog Berdampingan

Sebagaimana yang telah kita ketahui bersama bahwa, salah satu cara promosi blog yang efektif adalah melalui facebook. Disamping itu juga facebook telah lama menyediakan fasilitas dan prasarana untuk berbagai media website atau blog berupa plugin gratis yang dapat kita pakai. Salah satu plugin atau fasilitanya yaitu fans page facebook dan komentar facebook yang dapat dipasang pada website dan blog. Sudah banyak para blogger yang memakainya hingga dimodifikasi menjadi sedemikian rupa dan semenarik mungkin seperti komentar facebook yang berdampingn dengan blog. Lihat gambar dibawah ini.

komentar facebook dan blog berdampingan

Perlu Anda ketahui bahwa, selain memudahkan pengunjung untuk menggunakan kotak komentar yang ingin digunakannya, jika anda telah menerapkan kedalam blog atau website Anda, maka pemasangan widget ini juga mampu meningkatkan pengunjung blog.

Nah, mekanismenya seperti ini, nanti disana ada komentar blog dan facebook, jadi pengunjung blog Anda akan memilih ingin menggunakan kotak komentar yang mana. Jika mereka menggunakan komentar facebook maka secara otomatis ada pemberitahuan pada wall si pemberi komentar yang akan dibaca oleh teman-temannya yang online di facebook bahwasannya dia telah berkomentar di salah satu artikel dalam blog Anda. Dengan rasa penasaran teman-temannya kemungkinan juga ikut membaca artikel dalam blog Anda tersebut. Untuk cara pemasangannya cukup mudah sekali, ikuti caranya dengan teliti di bawah ini.

Komentar Facebook dan Blog Berdampingan

1. Silahkan login ke ID Blogger Anda
2. Klik menu dropdown, lalu pilih "Template"

3. Pilih "Edit HTML" lalu klik "Lanjutkan"

4. Kemudian, beri tanda centang atau ceklis pada kotak kecil "Expand Template Widget"

5. Lanjutkan dengan mencari kode ]]></b:skin> (gunakan ctrl+f atau F3 untuk mempermudah pencarian kode tersebut)

6. Selanjutnya sisipkan kode berikut ini tepat diatas 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 lanjutkan dengan mencari kode </head>. Jika sudah dapat, masukkan kode berikut ini tepat 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>

8.  Perhatikan tulisan yang diberi tanda warna merah. ganti dengan ID profil facebook Anda. Contoh http://www.facebook.com/efrih24 maka yang dimasukkan adalah efrih24. Namun jika Anda belum pernah merubah ID anda, maka yang tertera adalah berupa angka.

9. Jika sudah, lanjutkan dengan mencari kode <div class='comments' id='comments'>
Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan 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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang di beri tanda warna merah dan biru, 2 adalah jumlah komentar yang ditampilkan, sedangkan 400 adalah lebar kotak komentar facebook. Jadi sesuikan saja dengan lebar template blogger Anda. 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:

<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'>
<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)

10. Save dan lihat hasilnya.

Namun perlu di beri tahu, kelemahannya adalah jika pengunjung blog Anda berkomentar menggunakan kotak komentar facebook, maka kita tidak dapat mengetahuinya karena facebook belum merancangnya.

Semoga bermanfaat ...

Jangan lupa Follow ya, Klik disini.