Membuat dan Memasang Komentar Giscus Github di Blogger

Huda

Diperbarui: 14 Apr, 2024 • 0 • menit membaca

Daftar Isi

Cara memasang komentar Giscus (GitHub Discussions) di postingan blogger. Banyak blog yang saya temukan memakai komentar default blogger dan komentar disqus.

Fungsi komentar adalah untuk upaya interaksi antara penulis blog dan pengunjung. Hal ini, bertujuan untuk menanyakan dan menjawab dari informasi di postingan.

Selain menggunakan sistem komentar dari disqus dan default blogger, yaitu dengan Giscus.

Nah, tutorial ini saya akan bagikan tentang memasang komentar dengan menggunakan giscus github di postingan blogspot.

Pengertian Giscus

Apa itu komentar giscus github? seperti halnya menyematkan komentar discus ataupun komentar default dari blogger, giscus merupakan sistem komentar Open source dari GitHub Discussions.

Menyematkan komentar giscus memiliki beberapa kelebihan di banding dengan discus.

Adapun kelebihannya antara lain:

Tanpa iklan
Tidak terdapat pelacakan
Open source (Bersumber terbuka)
Data pengguna disimpan di Github Discussions
Mendukung tema buatan sendiri
Mendukung banyak bahasa
Dapat dikonfigurasi secara luas
Otomatis mengambil komentar dan perubahan baru dari GitHub
Lazyload komentar

Cara Memasang Giscus di Blogger

Membuat komentar dari giscus dengan memasang kode javascript dari web giscus. Contoh demo-nya seperti berikut ini.

Cara pemasangan dan mendapatkan kode giscus ke blogger, silahkan simak tutorial berikut ini.

Buat akun github terlebih dahulu, bagi yang belum memiliki akun.

Buat repositori baru, dan pilih publik.

Berikan nama yang spesifik, seperti contohnya saya buat dengan nama komentar.

Setelah membuat repositori, silahkan masuk ke menu setting. Cari bagian Features dan centang pada bagian Discussions.

Selanjutnya lakukan penginstalan (giscus github), untuk menghubungkan akun github ke sistem aplikasi giscus.

Setelah terinstall, pilih Only select repositories dan pilih repositori yang telah kamu buat tadi.

Lalu pilih install.

Cara Mendapatkan Kode Giscus

Setelah berhasil menginstal dan berhasil terhubung giscus dengan repositori github, selanjutnya mengonfigurasi Parameter Giscus.

Silahkan, Buka situs Aplikasi Giscus.

Sesuaikan konfigurasi, meliputi:

Bahasa : Pilih bahasa yang akan ditampilkan giscus. Pilih saja pada bahasa indonesia.
Repositori : Silahkan kamu masukkan repositori github.
Pemetaan Halaman Diskusi : Pilih pada Judul diskusi mengandung URL halaman.
Kategori Diskusi : Gunakan kategori dengan tipe Announcements supaya diskusi baru hanya dapat dibuat oleh pengurus dan giscus.
Fitur : Silahkan kamu centang semua fitur tersebut untuk disematkan di komentar nantinya.
Tema : Silahkan sesuaikan selera tema yang akan kamu pilih.

Setelah mengikuti langkah demi langkah seperti diatas, silahkan salin kode yang tertera di giscus app tersebut untuk mengaktifkan dan memasang komentar giscus ke blogger.

<script src="https://giscus.app/client.js"
        data-repo="BungHuda/komentar"
        data-repo-id="R_kgDOKivuzQ"
        data-category="Announcements"
        data-category-id="DIC_kwDOKivuzc4CaSdz"
        data-mapping="url"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="id"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

Cara Memasang Komentar Giscus di Blogger

Buka setelan blogger, sematkan atau aktifkan komentar bagi komentar yang belum muncul.
Selanjutnya, buka tema > edit HTML tema.
Silahkan cari kode comment yang merujuk ke iframe komentar. Tiap template mungkin berbeda-beda kodenya, jadi silahkan cari kode javascript komentar iframe default blogger dan ganti dengan kode javascript di giscus tadi.

Jika masih bingung meletakkan kode giscus komentar ke tema blogger, bisanya kode komentar terletak di bawah kode <data:post.body/>.

Silahkan tambahkan kode berikut ini,

<b:if cond='data:view.isSingleItem'> 

Isi kode giscus

</b:if>

Setelah komentar berhasil disematkan, maka akan muncul dan dapat berkomentar dengan akun Github.

Agar komentar tidak double silahkan sembunyikan komentar default dari blogger di setelan.

Cara Memasang Komentar Github Giscus di Template Median UI 1.7

Bagi pengguna template Median UI dari jagodesain, saya akan beri tutorial memasang komentar ini.

Silahkan cari kode [ Comment iframe ], dan ganti kode javascript komentar iframe default dari median ui ke kode github giscus.

Kode defult iframe komentar median ui 1.7 seperti berikut.

<script src='https://www.blogger.com/static/v1/jsbin/157798655-comment_from_post_iframe.js'/>
        <script>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);</script>

dan ganti ke kode komentar github giscus dengan tambahan beberapa kode.

<b:if cond='data:view.isSingleItem'> 
<script src="https://giscus.app/client.js"
        data-repo="BungHuda/komentar"
        data-repo-id="R_kgDOKivuzQ"
        data-category="Announcements"
        data-category-id="DIC_kwDOKivuzc4CaSdz"
        data-mapping="url"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="id"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>
</b:if>

Nah, komentar dari github telah dibuat.

Terdapat beberapa manfaat menampilkan komentar github giscus di blogger.

Selain itu kamu juga dapat menambahkan format syntax penulisan komentar.

Cara menghapus dan mengelola komentar yang sudah disematkan, silahkan masuk ke akun github dan pilih pada bagian Repositori > Discussions. Maka akan muncul data komentar dari blog tersebut, kamu dapat mengedit, menambahkan dan menghapus komentar.

Penutup

Sekian tutorial mengenai cara memasang komentar giscus github di postingan blogger. Semoga totorial dari blog ini membawa manfaat dan apa yang kamu cari dapat ditemukan di blog ini.

Huda Hallo saya adalah penulis di blog bunghuda.com. Saya blogger biasa, cuma kebetulan suka menulis.

Bung Huda