Ads

Mempercepat Komentar Disqus Di Blogger maupun WordPress

Mempercepat Komentar Disqus Di Blogger maupun WordPress
Dagruel

Komentar Disqus baru muncul saat discroll

Seperti judul nya Script disqus akan dieksekusi jika pengunjung melakukan Scrolling terhadap halaman anda tapi jika tidak maka takkan pernah muncul.

Pertama hapus script disqus yang dulu nya terpasang diblog kalian. Dan Ganti dengan HTML berikut.

<div id="disqus_thread">
  <div id="disqus_empty"></div>
</div>

Diteruskan script berikut tempelkan dibawah HTML diatas.

function load_disqus( disqus_shortname ) {
  
  var is_disqus_empty = document.getElementById('disqus_empty'),
      disqus_target   = document.getElementById('disqus_thread'),
      disqus_embed    = document.createElement('script'),
      disqus_hook     = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);

  if( disqus_target && is_disqus_empty ) {
    disqus_embed.type = 'text/javascript';
    disqus_embed.async = true;
    disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    disqus_hook.appendChild(disqus_embed);
    is_disqus_empty.remove();
  }
}

window.addEventListener('scroll', function(e) {
  var currentScroll = document.scrollingElement.scrollTop;
  var disqus_target = document.getElementById('disqus_thread');

  if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top - 150) ) {
    load_disqus('YOUR_DISQUS_SHORTNAME'); // Ganti dengan shortname Disqus kamu
    console.log('Disqus loaded.');
  }
}, false);

Kalian bisa lihat Demo nya seperti berikut.

Catatan untuk pengguna Blogger Memasang HTML dan Script diatas disarankan menempelkannya diantara tag Kondisional seperti dibawah.

<b:if cond='data:view.isSingleItem'> <!-- Tanda nya hanya menampilkan Di halaman Item (post dan page) -->
<!--HTML-->
<!--Script-->
</b:if>

Komentar Disqus baru muncul saat diklik

Berbeda dengan diatas yang ini baru muncul apabila pengunjung melakukan klik terhadap Komentar tersebut.

Sama seperti diatas cara nya, yang berbeda hanya HTML dan Script nya saja.

<div id="disqus_thread"></div>
<div id="disqus-comments">
  <button id="callDisqus">Buka Komentar</button>
</div>
<script> //<![CDATA[
    $('#callDisqus').on('click', function(){
    var disqus_shortname = 'YOUR_DISQUS_SHORTNAME' // Ganti dengan shortname Disqus kamu
        $.ajax({
             type: 'GET',
             url: '//' + disqus_shortname + '.disqus.com/embed.js',
             dataType: 'script',
             cache: true
        });
        $(this).fadeOut();
    });
//]]> </script>
Script diatas menggunakan jQuery jadi jangan lupa pasang.

satu lagi jika jQuery kalian versi 1.12.4 seperti punya saya maka gunakan Script dibawah bukan diatas.

<script> //<![CDATA[
    jQuery('#callDisqus').on('click', function(){
    var disqus_shortname = 'YOUR_DISQUS_SHORTNAME' // Ganti dengan shortname Disqus kamu
        jQuery.ajax({
             type: 'GET',
             url: '//' + disqus_shortname + '.disqus.com/embed.js',
             dataType: 'script',
             cache: true
        });
        jQuery(this).fadeOut();
    });
//]]> </script>

Untuk Demo nya sendiri bisa diklik tombol Komentar dibawah.

Catatan untuk pengguna Blogger Memasang HTML dan Script diatas disarankan menempelkannya diantara tag Kondisional seperti dibawah.

<b:if cond='data:view.isSingleItem'> <!-- Tanda nya hanya menampilkan Di halaman Item (post dan page) -->
<!--HTML-->
<!--Script-->
</b:if>

Menampilkan Jumlah Komentar Disqus

jika kalian bingung coba buka halaman depan Blog saya, tepat di daftar artikel dibawah Gambar dan judul ada Tanggal Postingan dan Jumlah Komentar.

Jumlah komentar itulah yang saya maksud, seperti gambar dibawah.

Menampilkan Jumlah Komentar Disqus
Dagruel

Langsung saja cara nya, Tempelkan script berikut diatas tag </body>.

<script id="dsq-count-scr" src="//YOUR_DISQUS_SHORTNAME.disqus.com/count.js" async></script>
Ganti YOUR_DISQUS_SHORTNAME dengan Shortname Disqus Anda.

Kemudian Tempelkan HTML dibawah di tempat kalian ingin memunculkan nya.

Ini untuk Blogger

<span class="comments-link">
  <a expr:href='data:post.url + &quot;#disqus_thread&quot;' expr:title='data:post.title'>0</a>
</span>

Ini untuk WordPress

<span class="comments-link">
<a href="<?php the_permalink(); ?>#disqus_thread">0</a>
</span>

Untuk Mengubah Tulisan Komentar yang tampil misal 1 Komentar 2 Komentar, bisa kalian atur di https://disqus.com/admin/settings/community/

https://einzford.net/
https://www.igniel.com/
https://help.disqus.com/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!