Cara Optimasi Kolom Komentar Disqus di Blogger Terbaru

Pembahasan mengenai Cara Optimasi Kolom Komentar Disqus di Blogger Menggunakan Metode Lazy Load dan OnClick Event.

Disqus adalah sebuah platform dan plugin untuk berdiskusi yang biasa dipasang pada website dalam bentuk kolom komentar. Sedangkan dari Wikipedia Disqus adalah layanan hosting komentar blog untuk situs web dan komunitas online yang menggunakan platform jaringan online. Platform perusahaan mencakup berbagai fitur; seperti integrasi sosial, jejaring sosial, profil pengguna, alat spam dan moderasi, analitik, pemberitahuan email, dan komentar seluler. Selain populer di kalangan Blogger, Disqus juga banyak digunakan pada situs online lain seperti Wordpress dll.

Tetapi, dibalik banyaknya fitur yang ditawarkan oleh Disqus, terdapat beberapa permasalahan yang sering ditemui oleh pengguna yang mengunjungi web yang telah dipasangi Disqus. Pertama, pemuatan yang lambat apabila dalam laman tertentu memiliki komentar yang banyak. Kedua, tidak adanya optimasi yang dilakukan oleh Disqus dalam meningkatkan pengalaman pengguna yang mengunjungi situs tersebut.

Nah, pada kesempatan kali ini saya akan memberikan beberapa alternatif dalam optimasi kolom komentar Disqus pada platform Blogger.
Sebelum dimulai, sangat disarankan untuk membuat backup terlebih dahulu untuk menanggulangi hal-hal yang tidak diinginkan.

Menggunakan Metode Lazy Load Disqus

Lazy load yang dimaksud adalah kolom komentar Disqus baru akan dimuat ketika area tempat Disqus tersebut telah tampil di layar pengguna, atau dengan kata lain kolom komentar disqus tidak akan dimuat jika belum terlihat oleh pengguna.
Metode ini saya kutip dari laman CSS-Tricks dan menggunakan plugin JQuery. Berikut tutorialnya.

1. Pertama, Disarankan meletakkan kode pemanggil Komentar Disqus ini:
   

   <div class="disqus"></div>

   Di dalam kode ini;
   

   <b:includable id='comments' var='post'>
   ...
   </b:includable>

   Jadinya seperti ini;
   

   <b:includable id='comments' var='post'>
    <div class="disqus"></div>
   </b:includable>

2. Ketiga,
   Pastikan sudah memasang plugin script JQuery di template, lalu paste kode pemanggil DisqusLoader ini di atas tag </body>
   

   <b:if cond='data:blog.pageType == "item"'>
   <script src='https://cedeen.netlify.app/script/disqusloader.js'></script>
   <script type='text/javascript'>
   $.disqusLoader( '.disqus', { scriptUrl: '//username.disqus.com/embed.js' });
   </script>
   </b:if>

3. Terakhir, simpan template.

Menggunakan Metode OnClick Event

Sedangkan OnClick Event adalah memuaat kolom komentar Disqus setelah tombol tertentu dipencet.
Metode OnClick Event ini saya kutip dari laman W3Bits.com. Langsung saja, berikut tutorialnya.

1. Pertama, Copy Paste kode CSS berikut ini di atas tag </head>
   

   <b:if cond='data:blog.pageType == "item"'>
    <style>
   /* Onclick Disqus Comment */
   #comments{display:none}
   .post-comment-link{visibility:hidden}
   #disqus_thread{background:#fff;margin:10px 0 0 0;padding:0}
   #disqus_trigger{position:relative;overflow:hidden;display:block;text-align:center;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:20px;margin:10px auto;padding:10px;border:1px solid #999999;color:#7D7D7D;transition:all .3s;border-radius:3px}
   #disqus_trigger:hover,#disqus_trigger:active{border-color:#2185D0;color:#2185D0}
    </style>
   </b:if>

2. Kedua, cari kode
   

   <b:includable id='comments' var='post'>
   ...
   </b:includable>

   Lalu ganti seluruh includable diatas dengan kode ini;
   

   <b:includable id='comments' var='post'>
   <div id='disqus_thread'>
     <div id='disqus_trigger' onclick='load_disqus('username')'><i class='far fa-comments'/> Load Comments</div>
   </div>
   </b:includable>

   Ganti kode Username yang ditandai dengan username Disqus yang ingin dipasang.
3. Ketiga, Paste kode berikut ini di atas tag </body>
   

   <b:if cond='data:blog.pageType == "item"'>
    <script>
   function load_disqus( disqus_shortname ) {
    // Prepare the trigger and target
    var disqus_trigger = document.getElementById('disqus_trigger'),
     disqus_target  = document.getElementById('disqus_thread'),
     disqus_embed   = document.createElement('script'),
     disqus_hook    = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
    // Load script asynchronously only when the trigger and target exist
    if( disqus_target &amp;&amp; disqus_trigger ) {
     disqus_embed.type = 'text/javascript';
     disqus_embed.async = true;
     disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     disqus_hook.appendChild(disqus_embed);
     disqus_trigger.remove();
     console.log('Disqus loaded.');
    }
   }
    </script>
   </b:if>

4. Terakhir, jangan lupa simpan template.
   

Dan demikian artikel singkat tentang Cara optimasi dan memasang Lazy Load serta OnClick Event pada Kolom Komentar Disqus di Bloggger. Semoga bermanfaat.

---

Download Links

Download	Type	Size
DisqusLoader	JS	0.3 KB

---

Referensi

https://css-tricks.com/lazy-loading-disqus-comments/
https://w3bits.com/load-disqus-on-click/