Sunday, August 30, 2009

Integrasi DisQus pada Blogger (Manual)

Posted by dav On 11:28 PM
Ide yang sungguh menarik untuk menggabungkan suatu metode diskusi layaknya forum dengan sebuah blog. Sehingga antara pengunjung dengan pemilik blog akan tercipta diskusi tanya jawab yang menarik dan lebih terarah. DisQus memberikan layanan yang lebih dari pada komentar. Dalam setiap artikel suatu blog, pengunjung diberikan kesempatan tidak hanya sekedar berkomentar tetapi bisa bertanya dan menjawab pertanyaan pengunjung yang lain atau sekedar memberikan input (saran kritik) kepada pemilik blog.
Antara tahun 2007-2008 para blogger dihebohkan dengan layanan yang mirip dengan DisQus, tetapi sayang layanan tersebut bersifat sepihak, hanya menguntungkan pemilik layanan dan tidak ada timbal balik kepada pemilik blog. Ini membuat para blogger dengan segera membuang layanan itu, karena jelas merugikan. Dalam arsip artikel lama Blogger Tune-Up pernah dibahas hal tersebut. Tapi kini DisQus benar-benar berbeda dengan layanan yang pernah booming tersebut. Preview DisQus lihat di blog Kotretan Hendriono.
Beberapa kelebihan DisQus :
  1. Lebih terbuka untuk dikembangkan oleh siapapun
  2. Mendukung API, OpenID, Gravatar
  3. Memberikan trackback dan linkback kepada blog
  4. Pengelolaan komentar lebih mudah
  5. Mendukung layanan lain, misal FeedBurner, Facebook, Twitter dan lainnya
  6. Mampu meningkatkan SERP blog dalam rangka mendukung SEO (layanan ini masih terus dikembangkan)
  7. Tidak terlalu memberatkan loading blog
  8. Tampilan yang mudah di modifikasi (Support CSS)
  9. Membuat tampilan blog terlihat lebih professional
  10. Mudah dalam proses integrasi dengan Template Blogger

Integrasi DisQus pada Blogger

Perhatian! Backup terlebih dahulu Template sebelum melakukan modifikasi kode, dan lebih baik lakukan proses modifikasi blogger hack dibawah ini melalui file backup template (tidak langsung secara online).
Langkah 1
Siapkan script code dari DisQus (Baca: Memanfaatkan Layanan DisQus)
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke "Tata Letak - Edit HTML"
Langkah 4
Checklist "Expand Template Widget"
Langkah 5
Cari kode dibawah ini:
]]></b:skin>
Langkah 6
Masukan kode CSS dibawah ini diatas kode pada langkah 5:
#disqus_thread, #disqus_thread #dsq-content {width: 100%;}
Langkah 7
Cari kode dibawah ini (utamakan yang diblok):
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>
</b:if>
</p>
Langkah 8
Non aktifkan layanan komentar bawaan blogger atau hapus dan tambahkan kode DisQus, sehingga kode menjadi seperti dibawah ini (perhatikan kode yang diblok):
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</b:if>
</p>
Perhatikan kode diatas! Kode yang terletak diantara tag <!-- kode -->, ini berarti dinonaktifkan atau anda bisa saja menghapusnya, namun demi keamanan seandainya suatu hari nanti kita ingin mengaktifkan kembali layanan komentar bawaan blogger maka kita tinggal mengembalikan ke posisi sebelumnya.
Langkah 9
Cari kode dibawah ini(utamakan yang berwarna biru):
<h3>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if>
</h3>
Langkah 10
Modifikasi kode diatas sehingga menjadi seperti kode dibawah ini:
<h3>
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
Langkah 11
Cari kode dibawah ini:
</b:if>
<div id='backlinks-container'>
Langkah 12
Masukan kode DisQus dibawah ini diatas kode pada langkah 11:
<!-- begin code disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = &#39;<data:post.url/>&#39;;
var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML;
var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='&quot;http://DISQUS-SHORT-URL.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
Perhatikan!
  • Kode DisQus pada langkah 12 harus diletakan tepat diatas kode pada langkah 11
  • Ubah DISQUS-SHORT-URL sesuai dengan yang anda dapatkan dari DisQus
Langkah 13
Silahkan ambil napas dulu tapi jangan merokok atau ngemil (bulan puasa lho...) kecuali blogger hack ini dicoba malam hari. Jika sudah merasa lebih tenang, lanjutkan...!
Langkah 14
Cari kode dibawah ini:
</body>
Langkah 15
Masukan kode DisQus dibawah ini tepat diatas kode pada langkah 14:
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName(&#39;a&#39;);
var query = &#39;?&#39;;
for(var i = 0; i &lt; links.length; i++) {
if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) {
query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;;
}
}
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
})();
</script>
</b:if>
<!-- end code disqus -->
Perhatikan kode diatas! Ubahlah DISQUS-SHORT-URL dengan kode yang anda peroleh dari DisQus
Langkah 16
Simpan template dan preview blog

Keterangan:
  • Jika form komentar (bagi template yang sudah menyertakan form komentar dibawah artikel) bawaan sistem blogger masih tetap muncul, nonaktifkan form komentar dengan salah satu teknik dibawah ini:
Cara I
Non aktifkan form komentar melalui "Pengaturan - Komentar" dan ubah option "Penempatan Formulir Komentar" menjadi "" atau "", lihat gambar dibawah ini:
Cara II
Lihat kembali langkah 8 diatas dan hapuslah kode yang diblok:
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</b:if>
</p>
Sehingga kode menjadi seperti dibawah ini:
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</p>
  • Teknik ini adalah teknik paling aman karena komentar yang pernah dibuat melalui sistem komentar bawaan blogger akan tetap ada, bahkan pada mode tertentu komentar tetap ditampilkan tetapi link/form untuk menambahkan komentar baru dengan sistem komentar bawaan blogger sudah dinonaktifkan.
  • Sambil hati berdebar-debar (apakah berhasil atau tidak berhasil) ambil napas panjang, lemaskan jari-jari terutama jari telunjuk kanan yang sudah lelah klak-klik tombol mouse, scroll atas bawah nyari kode yang memusingkan dan BOOOM! Berhasil!
Kode Blogger Hack secara keseluruhan setelah proses integrasi DisQus pada blogger secara manual:
<b:if cond='data:post.allowComments'>
<h3>
<!-- <b:if cond='data:post.numComments == 1'> -->
<!-- 1 <data:commentLabel/>: -->
<!-- <b:else/> -->
<!-- <data:post.numComments/> <data:commentLabelPlural/>: -->
<!-- </b:if> -->
Daftar Komentar:
</h3>
...
...
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> -->
<a class='comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;'>Lihat Komentar &#187;</a>
</b:if>
</p>
<!-- begin code disqus -->
<div id='disqus_thread'/>
<div id='disqus_post_title' style='display:none;'><data:post.title/></div>
<div id='disqus_post_message' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>
var disqus_url = &#39;<data:post.url/>&#39;;
var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML;
var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML;
</script>
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/>
<noscript><a expr:href='&quot;http://DISQUS-SHORT-URL.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript>
<a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<!-- end code disqus -->
</b:if>
<div id='backlinks-container'>
...
...
<!-- begin code disqus -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName(&#39;a&#39;);
var query = &#39;?&#39;;
for(var i = 0; i &lt; links.length; i++) {
if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) {
query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;;
}
}
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
})();
</script>
</b:if>
<!-- end code disqus -->
</body>
Selamat mencoba, semoga berhasil... Tinggalkan pesan pada komentar jika mengalami kegagalan dan Happy Blogging walaupun lapar... :)