Cara Menambahkan Komentar Disqus di Blog Jekyll

Blog statis Jekyll tidak punya fitur komentar bawaan — karena memang tidak ada database. Tapi bukan berarti blog Jekyll tidak bisa punya kolom komentar. Solusi paling populer adalah menggunakan Disqus, layanan komentar pihak ketiga yang bisa diintegrasikan ke situs statis mana pun hanya dengan beberapa baris kode JavaScript.

Apa itu Disqus?

Disqus adalah platform komentar berbasis cloud yang sudah digunakan oleh jutaan situs web di seluruh dunia. Disqus menangani semua urusan penyimpanan komentar, moderasi, notifikasi email, dan spam filtering — kamu hanya perlu menyematkan widget-nya.

Kelebihan Disqus

Setup sangat mudah, hanya butuh shortname
Fitur moderasi komentar yang lengkap
Notifikasi email untuk penulis dan pembaca
Fitur SSO dan login via Google, Facebook, Twitter
Tersedia di plan gratis

Kekurangan Disqus

Menambahkan JavaScript pihak ketiga → sedikit memperlambat halaman
Plan gratis menampilkan iklan di kolom komentar
Privasi: data komentar tersimpan di server Disqus

Langkah 1: Daftar dan Buat Site di Disqus

Buka disqus.com dan daftar akun
Setelah login, klik Get Started
Pilih I want to install Disqus on my site
Isi Website Name — ini akan menjadi shortname Disqus kamu (misalnya: nama-blog)
Pilih kategori dan bahasa
Pilih plan Basic (gratis) atau pilih plan berbayar jika ingin tanpa iklan
Di halaman “Select Platform”, pilih Universal Code

Catat shortname Disqus kamu — ini yang akan dipakai di konfigurasi Jekyll.

Langkah 2: Tambahkan Shortname ke `_config.yml`

Buka _config.yml dan tambahkan konfigurasi Disqus:

disqus: nama-shortname-kamu

Ganti nama-shortname-kamu dengan shortname Disqus yang sudah kamu buat.

Langkah 3: Buat File Include Komentar

Buat file _includes/comments.html dengan kode berikut:

{% if site.disqus and page.comments != false %}
<section id="comments">
  <div id="disqus_thread"></div>
  <script>
    var disqus_config = function () {
      this.page.url = "{{ page.url | absolute_url }}";
      this.page.identifier = "{{ page.url }}";
      this.page.title = "{{ page.title }}";
    };

    (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://{{ site.disqus }}.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>
    Aktifkan JavaScript untuk melihat komentar
    <a href="https://disqus.com/?ref_noscript">powered by Disqus.</a>
  </noscript>
</section>
{% endif %}

Langkah 4: Sisipkan Komentar di Layout Post

Buka file _layouts/post.html dan tambahkan include komentar di akhir konten artikel:

<article>
  <h1>{{ page.title }}</h1>

  <div class="post-content">
    {{ content }}
  </div>

  <!-- Komentar Disqus -->
  {% include comments.html %}

</article>

Langkah 5: Kontrol Komentar per Artikel

Kamu bisa menonaktifkan komentar untuk artikel tertentu melalui front matter:

---
title: "Judul Artikel"
comments: false
---

Dan mengaktifkannya secara default di semua post lewat _config.yml:

defaults:
  - scope:
      path: "_posts"
    values:
      comments: true

Menampilkan Jumlah Komentar

Disqus juga menyediakan JavaScript untuk menampilkan jumlah komentar di daftar artikel. Tambahkan ini sebelum tag </body>:

<script id="dsq-count-scr" src="//{{ site.disqus }}.disqus.com/count.js" async></script>

Lalu di setiap link artikel, tambahkan #disqus_thread sebagai fragment:

<a href="{{ post.url }}#disqus_thread">
  Komentar
</a>

Disqus akan otomatis mengganti teks “Komentar” dengan jumlah komentar yang sebenarnya.

Alternatif Disqus

Jika kamu tidak ingin menggunakan Disqus karena alasan privasi atau iklan, ada beberapa alternatif yang bisa dipertimbangkan:

Platform	Deskripsi	Harga
Giscus	Berbasis GitHub Discussions, open source, tanpa iklan	Gratis
Utterances	Berbasis GitHub Issues, ringan, developer-friendly	Gratis
Commento	Self-hosted atau cloud, privacy-focused	Gratis/Berbayar
Cusdis	Open source, ringan, bisa self-hosted	Gratis/Berbayar

Giscus — Rekomendasi untuk Developer

Giscus adalah pilihan terbaik jika pembaca blog kamu mayoritas developer yang punya akun GitHub. Setup-nya mirip Disqus tapi komentar tersimpan di GitHub Discussions repositori kamu — tidak ada data yang dikirim ke pihak ketiga.

Konfigurasi di giscus.app dan dapatkan script embed yang tinggal ditempel.

Troubleshooting

Widget Disqus tidak muncul:

Pastikan site.disqus sudah diisi di _config.yml
Cek di browser bahwa tidak ada adblocker yang memblokir Disqus
Disqus tidak berfungsi di localhost — harus di domain yang sudah diregistrasi ke Disqus

Komentar berbeda di tiap halaman padahal artikel sama: Pastikan page.url konsisten dan sudah menggunakan absolute_url. Ini terjadi jika kamu pernah mengakses artikel dengan URL berbeda (dengan/tanpa trailing slash).

Kesimpulan

Menambahkan Disqus ke blog Jekyll sangat mudah — cukup daftar, dapatkan shortname, tambahkan satu baris di _config.yml, dan buat file include. Dalam 10 menit kolom komentar sudah aktif di semua artikel.

Jika kamu lebih peduli pada privasi dan developer-friendly experience, pertimbangkan Giscus sebagai alternatif yang lebih modern.