Cara Memasang Komentar Disqus dengan Lazy Load di Blogger [Load on Scroll]

Daftar Isi

Kolom komentar Disqus adalah salah satu alternatif dari kolom komentar default bawaan Blogger. Kolom komentar Disqus banyak digunakan oleh blog-blog besar bahkan web-web besar karena beberapa manfaat. Beberapa diataranya:

1. Punya fitur moderasi dan admin dimana kita bisa tambahkan orang lain sebagai admin khusus membalas komentar Disqus tanpa perlu memberi akses ke blog atau website.
2. Ada fitur analytics. Berguna banget buat kamu yang sering olah data dari engangement user.
3. Ada fitur eksternal keren seperti Related Post dan Smiley Response.
4. Beragam pilihan login mulai dari Email, sosmed, sampai komentar Anonim yang tidak perlu login.
5. Bisa jadi penghasilan tambahan melalui Disqus Ads.

Mungkin masih banyak manfaat lain dari komentar Disqus yang nggak saya sebutkan dan tentu masih banyak upgrade yang mungkin diberikan ke depannya.

Sayangnya, dengan segala kemudahan yang ditawarkan tersebut, script bawaan untuk komentar Disqus ini terbilang besar dan cukup memakan waktu saat pertama kali halaman web dimuat.

Namun, hal tersebut bisa diakali dengan menerapkan efek lazy load pada script asli bawaan Disqus. Untuk menerapkannya, silahkan ikuti panduan singkat berikut.

Alat

1. Komputer / Laptop

Bahan

1. Koneksi Internet
2. Akun Blogger
3. Akun Disqus

Lainnya

Estimasi Waktu: 5 menit.

Biaya: Rp0

Panduan

Langkah 1 - Copy dan edit script ini

Pertama, silahkan kamu copy script di bawah ini. Setelah itu, paste-kan di Notepad. Lalu, ganti username ASIBUKA yang saya tandai dengan warna hijau dengan username Disqus kamu.

<b:includable id='disqus-comment' var='post'><div id='disqus_thread'><div id='disqus_empty'/></div><script>//<![CDATA[ function load_disqus( disqus_shortname ) {var y = document.getElementById('disqus_empty'),t = document.getElementById('disqus_thread'),e = document.createElement('script'),d = document.createElement('script'),h = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);if( t && y ) {e.type = 'text/javascript';e.async = true;e.src = '//' + disqus_shortname + '.disqus.com/embed.js';h.appendChild(e);d.type = 'text/javascript';d.async = !0;d.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';h.appendChild(d);y.remove();}}window.addEventListener('scroll', function(e) {var currentScroll = document.scrollingElement.scrollTop;var t = document.getElementById('disqus_thread');if( t && (currentScroll > t.getBoundingClientRect().top - 150) ) {load_disqus('ASIBUKA');console.log('Disqus loaded.');  }}, false);//]]>var disqus_blogger_current_url = &quot;<data:blog.url.canonical/>&quot;;if (!disqus_blogger_current_url.length) {disqus_blogger_current_url = &quot;<data:view.url/>&quot;;}var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;</script></b:includable>

Langkah 2 - Login ke Blogger

Selanjutnya, silahkan kamu login ke akun Blogger kamu. Pilih blog yang ingin kamu pasangi script ini (jika kamu punya lebih dari satu blog).

Langkah 3 - Masuk menu Theme, lalu masuk menu Edit HTML

Jika kamu sudah ada di blog ya dimaksud, langsung saja buka menu Theme atau Tema lalu pilih opsi Edit HTML untuk masuk ke Template Editor.

Langkah 4 - Cari salah satu tag ini

Di halaman Template Editor, silahkan kamu klik script-mu, lalu tekan tombol CTRL+F untuk mengaktifkan fitur Find dari template Editor. Jika sudah muncul silahkan cari salah satu tag berikut ini:

<b:includable id='commentForm' var='post'>

<b:includable id='commentPicker' var='post'>

<b:includable id='comment-form' var='post'>

Note: Pastikan tag yang kamu temukan ada di dalam widget Blog.

Langkah 5 - Pastekan script di atas tag yang ditemukan

Jika salah satu tag di atas sudah ketemu, silahkan kamu paste-kan script yang sudah kamu edit tepat di atas tag yang kamu temukan.

Langkah 6 - Cari salah satu tag berikut

Selanjutnya, silahkan kamu cari salah satu dari tag berikut ini.

<b:include name='comment-picker'/>

atau

<b:include name='commentPicker'/>

Jika tidak ketemu, coba kamu cari tag tersebut tanpa <b:include.

Jadi, silahkan cari name='comment-picker' atau name='commentPicker'.

Jika tidak ketemu juga, silahkan kamu cari <data:post.body/>.

Langkah 7 - Paste-kan script ini sesuai kondisi

Setelah ketemu salah satu tag di atas, silahkan kamu pastekan tag berikut sesuai kondisi.

Jika kamu menemukan tag name='comment-picker' atau name='commentPicker', silahkan kamu ganti namenya menjadi name='disqus-comment' untuk menggantikan komentar bawaan dari Blogger. Jika, kamu tidak mau menggantikan komentar bawaan Blogger, silahkan kamu tambahkan script berikut tepat di atas tag yang kamu temukan.

<b:include cond='data:view.isSingleItem' name='disqus-comment'/>

Langkah 8 - Save template

Terakhir, silahkan kamu save template kamu dan silahkan kamu cek hasilnya.

Hasil

Jika kamu menerapkan secara benar maka hasilnya akan menjadi seperti kolom komentar Disqus yang ada di blog ini. Komentar baru akan muncul setelah kamu scroll mendekati area kolom komentar sehingga loading konten menjadi tidak berat.

Jika kolom komentar Disqus kamu tidak muncul, silahkan periksa lagi hasil kerja kamu, terutama pada langkah-langkah input. Perhatikan baik-baik note yang saya berikan.

Hasilnya kurang lebih seperti kolom komentar Disqus yang ada di bawah artikel ini.

Modifikasi Komentar Disqus

Untuk modifikasi, kamu bisa lakukan langsung melalui dashboard Disqus Admin Panel-nya langsung. Jika kurang paham, akan saya buatkan tutorial terpisah tentang itu.

Penutup

Mungkin itu saja yang bisa saya bagikan tentang cara memasang komentar Disqus dengan efek lazy load on scroll di blog Blogger. Jika dirasa ada yang kurang jelas, silahkan sampaikan saja melalui kolom komentar. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.