Asynchronous Komentar IntenseDebate Di Blogger

Jika Anda merasa bosen dengan komentar Blogger yang selama ini sudah ada dan dipakai di blog Anda, Anda bisa mencoba menggunakan sistem komentar yang disediakan oleh pihak ketiga seperti Disqus, IntenseDebate, Livefyre, Echo, Facebook, dan lain-lain.

Dan salah satu yang banyak digunakan khususnya di wordpress adalah sistem komentar dari InteseDebate. Namun sistem komentar ini juga memungkinkan untuk dipasangkan di Blogger, Tumblr, dan TypePad. Dibanding dengan sistem komentar dari Disqus, komentar dari IntenseDebate memiliki lebih banyak plugin yang bisa digunakan dan dilengkapi beberapa filter untuk keamanan komentar. Namun bila dibandingkan tentang kecepatan loading antara Disqus dan IntenseDebate, maka Disqus lebih unggul/lebih cepat dibanding IntenseDebate. Itu karena script komentar Disqus sudah menggunakan asynchronous sehingga tidak terlalu mempengaruhi loading blog.

Oleh karena itu saya mencoba menambahkan asynchronous pada sistem komentar IntenseDebate dan ternyata tidak ada kendala alias komentar berjalan normal dan loading blog lebih ringan.
Asynchronous Komentar IntenseDebate Di Blogger

Nah bagi Anda yang ingin mencoba menggunakan sistem komentar dari IntenseDebate ini, tidak ada salahnya mencoba menggunakan asynchronous agar loading blog menjadi lebih ringan.

Silahkan Anda masuk ke IntenseDebate dan buat akun gratis kemudian silahkan login di akun Anda. Untuk proses daftar akun saya rasa Anda pasti bisa dan saya anggap Anda sudah login di akun IntenseDebate.

Untuk mulai mendaftar di IntenseDebate silahkan masuk di sini: https://intensedebate.com/

Setelah login silahkan mulai Install IntnseDebate on site, kemudian pada langkah pertama silahkan masukan URL blog Anda yang ingin menggunakan sistm komentar ini kemudian klik tombol Next Step.

Nah pada langkah kedua ini ada yang perlu kita perhatikan, pada nomor 1 terdapat 2 pilihan yaitu:
  • Display IntenseDebate Comments on All new posts (Recommended). Ini adalah option dimana komentar IntenseDebate hanya tampil pada halaman yang baru atau halaman yang belum memiliki komentar dan halaman yang sudah memiliki komentar dengan sistem komentar lama akan tetap ada/tampil.
  • Display IntenseDebate Comments on All blog posts. Ini berarti semua komentar blog lama akan diganti oleh komentar IntenseDebate dan otomatis komentar sebelumnya yang sudah ada akan menghilang. Namun jangan khawatir, jika Anda ingin mengembalikan ke sistem komentar lama maka komentar yang tadi menghilang akan muncul kembali.
Silahkan pilih sesuai kehendak Anda.

Setelah itu silahkan masuk dulu ke dashboard blog Anda dan masuk ke menu Template, kemudian silahkan download template blog Anda pada tombol Backup/Restore di kanan atas.

Kemudian silahkan masuk lagi ke halaman instalasi IntenseDebate dan pada nomor 5 silahkan upload file *.xml template blog Anda yang tadi di download/backup. Setelah itu klik tombol Upload file and continue.

Kemudian pada halaman selanjutnya silahkan copy kode yang tertera pada text area seperti pada gambar di bawah ini.

Asynchronous Komentar IntenseDebate Di Blogger 1

Setelah itu masuk ke dashboard blog Anda dan masuk ke menu Template dan masuk ke Edit HTML, blok semua kode HTML blog dan paste kode yang tadi dicopy dari halaman instalasi IntenseDebate kemudian Save template, tampak seperti gambar di bawah ini.

Asynchronous Komentar IntenseDebate Di Blogger 2

Setelah itu silahkan masuk ke salah satu postingan dan lihat penampakan komentar baru dari IntenseDebate seperti pada gambar di bawah ini.

Asynchronous Komentar IntenseDebate Di Blogger 3

Jika Anda melihat tampilan komentarnya tidak rapih, bagian atas masuk ke bagian lainnya, sisi kiri dan kanan terlalu nempel ke border, atau lain sebagainya, silahkan tambahkan kode CSS di bawah ini. Kebetulan saya menggunakan template Kompi Males, jadi saya hanya menambah margin atas, kiri, dan kanan seperti di bawah ini.


#idc-container-parent #idc-container {margin:50px 30px 0;}

Penampakannya menjadi seperti di bawah ini. Lebih rapih kan?

Asynchronous Komentar IntenseDebate Di Blogger 4


Nah sekarang tinggal menambahkan kode asynchronous pada script komentar IntenseDebate. 

Silahkan cari kode seperti di bawah ini atau mirip seperti itu.


 <!--Intense Debate-->
<script src='http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=36ebe1b3a1f1952be3cc7ed1d5dcabb2'></script>
<!--/Intense Debate-->

 <!--Intense Debate-->
<script src='http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=f2de6d962a71d49715c8f497a008bb37'/>
<!--/Intense Debate-->

Kemudian tambahkan kode async='async' pada kedua secript di atas sehingga menjadi seperti di bawah ini.


 <!--Intense Debate-->
<script async='async' src='http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=36ebe1b3a1f1952be3cc7ed1d5dcabb2'></script>
<!--/Intense Debate-->

 <!--Intense Debate-->
<script async='async' src='http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=f2de6d962a71d49715c8f497a008bb37'/>
<!--/Intense Debate-->

Kemudian pada template ada beberapa kode seperti di bawah ini.


   <!--Intense Debate-->
<b:if cond='data:post.numComments == 0'>
    <div style='display:none' id='IDCommentInfoPostTitle'><data:post.title/></div><div style='display:none' id='IDCommentInfoPostTime'><data:post.timestampISO8601/></div><div style='display:none' id='IDCommentInfoPostAuthor'><data:post.author/></div><div style='display:none' id='IDCommentInfoPostCats'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>|</b:loop></b:if></div>  <script type='text/javascript'>var idcomments_acct='36ebe1b3a1f1952be3cc7ed1d5dcabb2'; var idcomments_post_id='<data:post.id/>'; var idcomments_post_url='<data:post.url/>'; var idcomments_post_title=document.getElementById('IDCommentInfoPostTitle').innerHTML;var idcomments_post_author=document.getElementById('IDCommentInfoPostAuthor').innerHTML;var idcomments_post_time=document.getElementById('IDCommentInfoPostTime').innerHTML;var idcomments_post_cats=document.getElementById('IDCommentInfoPostCats').innerHTML; var commentScriptWrapper = document.createElement(&#39;SCRIPT&#39;);commentScriptWrapper.type = &#39;text/javascript&#39;;commentScriptWrapper.src = &#39;http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php?acct=&#39;+idcomments_acct+&#39;&amp;postid=&#39;+idcomments_post_id+&#39;&amp;title=&#39;+encodeURIComponent(idcomments_post_title)+&#39;&amp;url=&#39;+idcomments_post_url+&#39;&amp;posttime=&#39;+encodeURIComponent(idcomments_post_time)+&#39;&amp;postauthor=&#39;+encodeURIComponent(idcomments_post_author)+&#39;&amp;postcats=&#39;+encodeURIComponent(idcomments_post_cats);document.getElementsByTagName(&#39;HEAD&#39;)[0].appendChild(commentScriptWrapper);</script>
   <b:else/>
<!--/Intense Debate-->
<b:include data='post' name='comments'/>
<!--Intense Debate-->
</b:if>
<!--/Intense Debate-->

Silahkan tambahkan kode berikut di bawah ini pada kode di atas

;commentScriptWrapper.async = &#39;true&#39;

Tepat diantara kode di bawah ini ( di antara kode ;; )


;commentScriptWrapper.type = &#39;text/javascript&#39;;commentScriptWrapper.src = &#39;http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php

Sehingga penampakannya menjadi seperti di bawah ini


;commentScriptWrapper.type = &#39;text/javascript&#39;;commentScriptWrapper.async = &#39;true&#39;;commentScriptWrapper.src = &#39;http://www.intensedebate.com/js/bloggerTemplateCommentWrapper2.php

Lakukan penambahan kode tersebut pada semua kode yang seperti kelompok kode di atas tadi. Setelah semuanya ditambahkan kode tadi silahkan Save template dan silahkan coba loading blognya. 

Banyak yang membicarakan blog yang menggunakan sistem komentar IntenseDebate ini akan menjadi sasaran para spammer dan pemburu backlink. Padahal jika mereka tahu, apa yang mereka lakukan itu adalah hal yang sia-sia. Bisa Anda simak dari postingan mas Ricky Pratama pada link berikut:

http://trikmudahseo.blogspot.com/2013/07/tidak-semua-komentar-blog-dofollow-itu-jadi-backlink.html

Anda pun bisa menggunakan fitur filter komentarnya untuk mengamankan kolom komentar Anda dari para spammer, bahkan Anda bisa mem-banned IP spammer tersebut. Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments