Kembali

Cara Menghilangkan Iklan Disqus Dengan 3 Baris Javascript

Photo by Awal Ariansyah on Canva

Disqus merupakan salah satu plugin komentar yang sangat populer karena kemudahannya dalam menggunakan dan mengelola komentar. Bahkan dalam halaman statis seperti blog ini bisa menggunakan fitur komentar berkat adanya Disqus. Namun seringkali iklannya sangat menggangu kenyaman dalam membaca blog dan saya pribadi cenderung ingin cepat-cepat scroll keatas dikarenakan iklan disqus yang terkadang tidak senonoh.

Kali ini berbekal pengetahuan saya di bidang Javascript dan sangat sering melakukan manipulasi DOM. Saya akan menunjukkan bagaimana proses dalam menghilangkan iklan Disqus hanya dengan 3 baris kode Javascript.

Menganalisis pola penamaan elemen Disqus

Hal pertama yang saya lakukan tentu saja adalah mengetahui elemen HTML mana yang menampilkan iklan, bermodalkan Developer Tools (Klik kanan > Inspect Element) saya berhasil menemukan elemen yang menampilkan iklan yaitu berupa tag iframe.

Kesimpulan pertama yang didapatkan adalah

1. Disqus menggunakan iframe untuk menampilkan iklannya
2. Pola penamaan id elemennya adalah dsq-app(nomor)
3. Nomor untuk elemen iklan yang terdapat di halaman ini adalah 5028

Mengambil elemen dan pola urutan

Disqus tentu saja tidak hanya membawa satu iframe, pasti membawa iframe lain untuk hal yang lain. Jika kita analisis berdasarkan tampilan disqus, maka terdapat setidaknya 2 buah iframe untuk menampilkan iklan dan komentar.

Selanjutnya kita coba ambil semua elemen dengan pola penamaan dsq-app menggunakan kode seperti terlihat di gambar.

Ternyata benar asumsi kita bahwa elemen Disqus tidak hanya 1, disini terlihat disqus memiliki 3 elemen iframe dengan pola penamaan yang ada. Kemudian kita tahu bahwa iframe iklan pada halaman ini memiliki angka 5028. Kita dapat menarik kesimpulan lagi sebagai berikut:

1. Elemen iframe Disqus berjumlah 3
2. Elemen iklan Disqus berada pada index ke-0

Maka selanjutnya kita hanya perlu melakukan manipulasi DOM dengan elemen ke-0 iframe Disqus

Menimpa inline style iframe Disqus

Disqus cerdik, mereka menempatkan styling elemen tidak hanya menggunakan eksternal CSS namun juga inline styling dan semua nilai properti cssnya diberikan kode !important untuk memberikan prioritas stylingnya.

Kita akan menghapus inline styling atau lebih tepatnya me-replace inline style iframe Disqus menjadi inline style kosong. Lihat gambar.

Lihat yang terjadi adalah tinggi dari iframe iklan Disqus mengecil menjadi satu blok, namun iklan masih tetap ada. Selanjutnya bisa kita lakukan langkah final.

Menghilangkan semua style eksternal

Kita hanya tinggal memberikan style display: 'none' maka iklan akan menghilang. Tadaaa.

Selanjutnya tinggal menggabungkan seluruh kode menjadi sebuah skrip Javascript yang utuh, seperti dibawah. Bungkus dengan tag <script> lalu letakkan diatas tag </body>.

// Mengambil elemen iframe iklan disqus di index ke-0
var ads = document.querySelectorAll('[id^="dsq-app"]')[0];
// Menghapus inline style Disqus
ads.removeAttribute("style");
// Menghilangkan iklan Disqus
ads.style.display = "none";

Pengembangan

Terkadang kita harus menunggu sampai konten Disqus dimuat terlebih dahulu baru mengeksekusi skrip menghilangkan iklan Disqus. Kita bisa memodifikasi kode diatas menjadi seperti berikut:

// Membuat interval per 100ms untuk mengecek apakah elemen Disqus sudah benar-benar dimuat
// Jika sudah maka jalankan skrip menghilangkan iklan Disqus
// Var digunakan untuk redeklarasi variable
var editable = true;
var interval = setInterval(function() {
	if (document.querySelector("#disqus_thread") != null) {
		if (document.querySelector("#disqus_thread").clientHeight > 0) {
			if (editable) {
				var ads = document.querySelectorAll('[id^="dsq-app"]')[0];
				ads.removeAttribute("style");
				ads.style.display = "none";
				// Hapus 2 baris dibawah untuk web PWA
				clearInterval(interval);
				editable = false;
			}
		}
	}
	// Ubah 100 menjadi 2000 untuk web PWA
}, 100);

Tips untuk web PWA

Jika komentar disqus me-reload tanpa reload page (studi kasus untuk web PWA), maka otomatis iklan akan muncul kembali karena kita tidak me-reload page. Solusinya adalah dengan menghapus clearInterval(interval) dan editable = false kemudian naikkan angka interval dari 100 menjadi 2000 hal ini bertujuan untuk terus menjalankan interval dengan waktu 2 detik sekali jika iklan disqus me-reload tanpa reload page.

Catatan

Cara ini baru diuji di web ini, untuk web lain diperlukan pengujian lebih lanjut. Kemungkinan besar di web lain Disqus menggunakan pola penamaan yang berbeda, oleh karena itu sesuaikan nama id diatas sesuai dengan pola penamaan Disqus di web kamu.