Memasang Komentar Telegram di Blog

Ditulis oleh: Adhy Suryadi

Ditulis pada: 3/22/2021

Memasang Komentar Telegram di Blog - Sebenarnya Telegram sudah mengeluarkan fitur komentar untuk website ini sudah agak lama, sekitar pertengahan tahun 2019 lalu. Namun tampaknya hal ini belum banyak diketahui oleh blogger, termasuk saya yang juga baru mengetahuinya.

Sebagaimana halnya Disqus, Facebook, dan yang lainnya yang menyediakan sistem komentar di blog atau website, Telegram juga menyediakan sistem komentar yang dapat dipasang di blog atau website.

Komentar Telegram di Blog

Penampakan kolom komentar Telegram ini seperti tampak pada gambar berikut ini.

Gambar di atas saya ambil setelah saya coba di halaman static blog Kompi Ajaib. Percobaan ini saya menggunakan script dari Telegram dan kemudian saya coba utak-atik agar valid AMP. Ternyata bisa juga di-embed dengan amp-iframe, namun masalahnya iframe dari komentar Telegram ini tidak resizable sehingga kolom komentarnya terpotong amp-iframe.

Hal ini terjadi karena JS komentar Telegram tersebut menghasilkan kolom komentar di dalam iframe sendiri, sehingga tidak bisa kita buat menjadi resizable. Tidak seperti JS komentar Disqus yang menghasilkan kolom komentar dalam bentuk HTML, sehingga bisa kita buat menjadi resizable.

Jadi, saat ini kolom komentar Telegram hanya bisa digunakan untuk blog non AMP. Sementara untuk blog AMP, kita tunggu saja mudah-mudahan Telegram menyediakan komentar untuk AMP HTML juga.

Ada beberapa hal yang menurut saya masih menjadi kekurangan dari komentar Telegram ini, yaitu:

1. Menggunakan background putih, sehingga ini hanya cocok untuk blog dengan background putih saja. Seharusnya ini tidak menggunakan background seperti Disqus, jadi bisa sesuai dengan warna latar apa saja.
2. Bentuk threaded yang tidak jelas. Saat ini komentar yang dibalas masih berupa blockquote seperti halnya balas chat di aplikasinya.

Mudah-mudahan kekurangan dari komentar Telegram tersebut bisa diperbaiki di masa yang akan datang sehingga dapat menjadi pilihan sistem komentar banyak website.

Namun jika Anda ingin mencoba menggunakan Telegram Comments di blognya, silahkan ikuti langkahnya di bawah ini. Sebelumnya, pastikan Anda sudah memiliki akun Telegram aktif dan mengaktifkan aplikasi Telegram, baik di smartphone ataupun di desktop.

Silahkan masuk ke comments.app lalu pilih "Comments for websites" dengan klik tombol "Connect Website". Atau "Log in to connect" bagi yang belum login Telegram di browsernya kemudian konfirmasi di aplikasi Telegram-nya lalu klik tombol "Connect Website".

Silahkan isikan Site Name dengan nama blog Anda, misalnya Kompi Ajaib. Kemudian isikan Domains dengan domain blog Anda, misalnya www.kompiajaib.com lalu klik tombol "Connect Website".

Selanjutnya akan masuk ke halaman pengaturan, yang perlu Anda lakukan adalah mencatat "Site ID" saja.

Gunakan kode berikut untuk menampilkan komentar Telegram di blogger. Saya sediakan 3 macam kode, tinggal pilih salah satunya yang sesuai. Kodenya simpan di edit HTML blog di mana Anda ingin menampilkan komentarnya.

Asynchronous

<script async="async" src="https://comments.app/js/widget.js?3" data-comments-app-website="Site ID" data-limit="5" data-color="F646A4" data-colorful="1"></script>

Demo JSFiddle

Defer

<script>

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://comments.app/js/widget.js?3";d.setAttribute("data-comments-app-website","Site ID");d.setAttribute("data-limit","5");d.setAttribute("data-color","F646A4");d.setAttribute("data-colorful","1"),document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

Demo JSFiddle

Lazyload

<script>

//<![CDATA[

var lazycommentstelegram=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&lazycommentstelegram===!1||0!=document.body.scrollTop&&lazycommentstelegram===!1)&&(!function(){var d=document.createElement("script");d.src="https://comments.app/js/widget.js?3";d.setAttribute("data-comments-app-website","Site ID");d.setAttribute("data-limit","5");d.setAttribute("data-color","F646A4");d.setAttribute("data-colorful","1"),document.body.appendChild(d)}(),lazycommentstelegram=!0)},!0),window.onscroll=function(){scrollFunction()};

//]]>

</script>

Demo JSFiddle

Kustomisasi:

data-comments-app-website="Site ID" silahkan ganti Site ID dengan Site ID blog Anda.

data-limit="5" untuk mengatur jumlah komentar yang tampil di awal, sisanya disembunyikan dengan toggle.

data-color="F646A4" untuk mengatur warna tombol dan like, silahkan sesuaikan dengan kode warna hex tanpa #.

data-colorful="1" untuk menampilkan warna berbeda pada nama komentator, jika tidak ingin berwarna silahkan ganti dengan 0.

Jika ingin tampilan Dark Theme dengan background hitam, silahkan tambahkan kode data-dark="1"

Semoga bermanfaat.