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.
- Pertama, Disarankan meletakkan kode pemanggil Komentar Disqus ini:
Di dalam kode ini;<div class="disqus"></div>
Jadinya seperti ini;<b:includable id='comments' var='post'> ... </b:includable>
<b:includable id='comments' var='post'> <div class="disqus"></div> </b:includable>
- 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>
- 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.
- 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>
- Kedua, cari kode
Lalu ganti seluruh includable diatas dengan kode ini;<b:includable id='comments' var='post'> ... </b:includable>
Ganti kode Username yang ditandai dengan username Disqus yang ingin dipasang.<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>
- 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 && 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>
- Terakhir, jangan lupa simpan template.
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/