Langkah Mudah Memasang Form Komentar Disqus

Langkah Mudah Memasang Form Komentar Disqus

Tutorial Information

ProgramHTML
DifficultyPemula
Estimated Time30 Menit

Pada tulisan sebelumnya penulis pernah menjelaskan tentang cara Membuat Form Komentar Anti Spam dengan Recaptcha Library. Kasus tersebut adalah kasus sederhana dalam membuat sebuah…

Pada tulisan sebelumnya penulis pernah menjelaskan tentang cara Membuat Form Komentar Anti Spam dengan Recaptcha Library. Kasus tersebut adalah kasus sederhana dalam membuat sebuah form komentar yang terkadang masih cukup sering digunakan.

Dalam hal lain, kita mungkin akan berpikir bagaimana membuat sebuah aplikasi komentar yang mudah diatur tanpa banyak berurusan dengan kode-kode pemrograman. Untuk yang satu ini jawabannya adalah menggunakan aplikasi Disqus. Disqus adalah sebuah layanan diskusi yang mendukung banyak platform blogging dan situs web, seperti WordPress, Tumblr, Blogger, Drupal, dan web berbasis HTML &  Javascript lainnya.

Disqus menyediakan script khusus yang nantinya di-embed (ditempelkan) ke dalam aplikasi web yang kita inginkan. Anda harus mendaftarkan diri terlebih dahulu di www.disqus.com agar bisa menggunakan layanan Disqus. Anda bisa menggunakan akun Twitter, Google, atau email pribadi untuk melakukan pendaftaran.

Sign in Disqus

Sign in Disqus

Pada tutorial berikut, penulis akan menjelaskan bagaimana cara memasukkan kode Disqus ke dalam halaman web yang kita kembangkan sendiri (non-CMS).

  1. Login ke dalam Disqus, kemudian Anda akan mendapati halaman Dashboardseperti pada gambar berikut:
    Dashboard Disqus

    Dashboard Disqus

  2. Di sebelah kiri halaman Dashboard, klik Add di bagian Your Sites, sehingga akan muncul formberikut. Isikan URL dan nama situs Anda.
    Isi URL dan situs

    Isi URL dan situs

  3. Apabila sudah berhasil, maka nama situs Anda akan tampil di sebelah kiri halaman Dashboard. Kemudian klik nama situs Anda untuk melakukan pengaturan.
  4. Klik tab Setting, maka akan muncul sebuah halaman pengaturan yang bisa Anda sesuaikan dengan kebutuhan.
    Halaman Pengaturan

    Halaman Pengaturan

  5. Masih di halaman Setting, klik Install, sehingga akan muncul halaman baru berisi daftar platform web yang Anda gunakan. Apabila web Anda bukan berupa CMS, maka pilihlah Universal Code.
    Daftar Platform Web

    Daftar Platform Web

  6. Selanjutnya Anda akan masuk di halaman yang berisi kode Universal, baca baik-baik instruksi di halaman tersebut, lalu copy pastekode tersebut di halaman web Anda.
    Halaman Kode Universal

    Halaman Kode Universal

  7. Misalnya, penulis mempunyai halaman web sederhana berikut (simpan dengan nama index.html):
    <!DOCTYPE html>
    <head>
    	<title>Contoh Menggunakan Disqus</title>
    </head>
    <body>
    	<h3>Judul Artikel</h3>
    
    	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    
    	<div class="komentar">
    
    	<!-- KODE BERIKUT ADALAH KODE HASIL COPY PASTE DARI DISQUS-->
    		<div id="disqus_thread"></div>
    			<div id="disqus_thread"></div>
    			<script type="text/javascript">
    					/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    					var disqus_shortname = 'bisakomputer'; // required: replace example with your forum shortname
    
    					/* * * DON'T EDIT BELOW THIS LINE * * */
    					(function() {
    					var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    					dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    					(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    					})();
    				</script>
    			<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    <!-- END -->
    
    	</div>
    </body>
    </html>
  8. Apabila halaman index.html di atas dipanggil melalui browser, maka akan tampak sebagai berikut:
    Tampilan Komentar pada Browser

    Tampilan Komentar pada Browser

  9. Setiap kali ada komentar yang masuk, maka akan secara otomatis akan tersimpan di halaman moderasi Disqus akun kita.
    Moderasi Disqus

    Moderasi Disqus

    Melalui halaman moderasi tersebut kita dapat melakukan banyak hal, contohnya yaitu menentukan jenis moderasi yang harus di-approve terlebih dahulu setiap kali ada komentar masuk, agar bisa tertampil di halaman web kita. Kita juga dapat menambahkan admin/moderator lain untuk membantu mengelola komentar-komentar yang masuk melalui Disqus.

Penutup

Menurut penulis, Disqus sangat cocok jika digunakan untuk membuat form komentar yang rapi dan dilengkapi banyak fitur. Selain fitur moderasi layaknya forum online, Disqus juga mempunyai fitur lain seperti memberi rating thread, share thread ke jejaring sosial Facebook dan Twitter, melanggan (subscribethread) melalui email dan RSS, mengurutkan komentar berdasarkan tanggal, serta dapat menampilkan daftar rekomendasi thread lain yang sedang populer. Tertarik untuk mencoba? :)

Tag: , , , , ,

45 Comments

Leave Comment
  1. Kalau untuk WordPress setahu saya bisa lebih mudah lagi caranya. Tinggal pasang plugin Disqus :)

  2. FLP Sumbar says:

    Assalamualaikuum….mau tanya mas. blog saya sudah berkali2 dipasang disqus. ` tapi form disqus tidak muncul di bawah postingan. terima kasih

  3. klo pake yg ginian rwan spamre ga om?

  4. Bang dayat says:

    Disqus tampilannya keren dan membuat blog menjadi elegan. Saya belum pernah menggunakan disqus dan mencari referensi tentang disqus dengan secara tak sengaja saya menemukan blog agan. Saya ingin menanyakan bagaimana cara pemasangan disqus pada cms wordpress? Apakah menggunakan plugin? Untuk penulisan komentar pada disqus apakah bisa hanya memasukkan name, website dan kolom komentar saja? Terima kasih gan atas jawabannya.

  5. memasang DISQUS bisa menjadi salah satu pilihan agar dapat memiliki komunitas di webnya tanpa harus membuat halaman atau web komunitas sendiri.

    nice info :D

  6. tutorial lengkap & sangat berguna sekali, Thank’s

  7. Sore….terima kasih infonya….

  8. reza pratama says:

    saya ingin menanyakan dalam konten yg berdinamis, misalkan sama membuat artikel dinamis dengan id 1, dan saya komen mengunakan disqus ini di id 1 , dan saya tampilkan / approve komenan di id 1 tersebut, apakah ketika saya menuju id berikutnya , komenan di id 1, ttp mucul ? dan bagaimana solusinya agar setiap komenan berbeda beda setiap id atau topik

  9. Selamat sore Semuanya, Salam Kenal Buat Yg EM-punya web, Terimakasih untuk informasinya….

  10. Crystal X says:

    Indahnya berbagi: setuju kalau untuk WordPress memang tinggal pasang saja pluginnya

  11. aul bourne says:

    terimakasih,lumayan bagi saya sebagai pemula

  12. Kefo says:

    kepo banget lu

  13. wah bisa diterapkan diblog nih gan…makasih infonya…dicoba dulu pasang disquss….oh iya bisa digabung dengan komentar blog ga ya?

  14. Ini nih yang saya cari-cari, saya coba dulu ah..

  15. padli says:

    Akhirnya ketemu juga di blog bisakomputer setelah lama keliling di mbah google cari , saya ijin praktek

  16. kalau dipasang gtu blog nya masih SEO FRIENDLY ga?

  17. AgaricPro says:

    siap,….bisa langsung prajtek

  18. langsung hajarrr…

    nice info gan bermanfaat banget…

  19. JASA SEO says:

    boleh tau bagus juga nih disqus tapi sayangnya jeleknya harus login dahulu u/ komentar di posting.

  20. Mas aku pake wp tapi gak berhasil muncul Unable to connect to the Disqus API servers gimana ngatasinya

  21. saya pasang di wp koq gk muncul2 ya?

  22. hery says:

    punya saya kok nggak muncul ya mas?? apa templete saya ya…

  23. Mishba7 Blog says:

    makasih gan, sip cukup membantu :-)

  24. Menarik sekali, saya coba aplikasikan di web. Sebelumnya saya memakai html comment box, sayangnya tampilannya tidak user friendly. Terima kasih info nya… Salam blogger

  25. Aplikasi Web says:

    Nice sekali gan…, bisa langsung ke TKP nih

  26. jasa seo says:

    kadang2 ada web hosting yang ngeselin blok plugin kaya gini jadi gak bisa dipasang.

  27. jual ladyfem says:

    mantep nih salah satu ngurangin bebas spam

  28. masih ngandelin dari komentar wp hehe

  29. herdian says:

    guys ini free atau berbayar yahh??

  30. reza says:

    mau nanya gan misalkan kita membuat website memakai disqus dan itu kita pasang misakan selain index apakah pemasangan nya sama seperti itu juga :)

  31. rafel says:

    mau tanya kalau buat kolom komentar seperti kolom komentar blog ini gimana dan apa namanya

  32. harus pasang juga nih di website
    biar sedikit spam yang masuk

  33. Adsensenesia says:

    Di blogger bisa gak mas pasang komentar disqus?

  34. Thanks infonya gan langsung ke TKP ane…

  35. CHMviews says:

    Mantap Gan.. Makasi Infonya

Write Comment

Your email will not be published. The marked label is required.