Cara Pasang Lazy Load Disqus Comment di Blogger

Disqus adalah salah satu alternatif terbaik buat lo yang mau ganti komentar default Blogger. Selain punya tampilan yang lebih bagus, komentar Disqus juga punya banyak fitur tambahan yang menarik.

Sayangnya memasang Disqus bukannya tanpa kendala. Salah satu yang biasanya jadi masalah besar adalah soal loading blog yang biasanya jadi lebih lambat. Kalau jadi lambar sepertsekian detik mungkin tidak terlalu masalah. Tapi kalau sampai bikin loading blog beberapa detik lebih lambat, itu masalah besar!

Untungnya ada beberapa trik yang bisa dipakai supaya blog tidak jadi lambat saat pasang komentar Disqus di Blogger. Salah satunya adalah dengan memasang lazy load Disqus Comment.

Dengan metode lazy load, komentar Disqus hanya akan muncul saat dibutuhkan saja. Jadi kalau pengunjung belum scroll sampai ke bagian komentar, Disqus belum akan muncul.

Terus bagaimana caranya? lha mudah banget!

Langkah #1: Buat Form Komentar Disqus

Cari salah satu kode berikut ini

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

atau,

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

Perhatikan, kedua kode di atas hanya berbeda pada garis miring (/) yang menandakan akhir sebuah kode saja.

Kalau lo menemukan kode yang pertama, tambahkan kode berikut tepat di bawahnya,

<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'>
  <div id='disqus_empty'/>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><b:include data='post' name='disqus-comment'/></b:if>
</b:if>

Kalau lo menemukan kode yang kedua, tambahkan kode berikut ini tepat di bawahnya,

<b:includable id='commentPicker' var='post'>
<b:if cond='data:view.isSingleItem'>
<div id='disqus_thread'>
  <div id='disqus_empty'/>
</div>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><b:include data='post' name='disqus-comment'/></b:if>
</b:if>
</b:includable>

Langkah #2: Tambahkan Kode Disqus

Cari kode <b:includable id='comments' var='post'> atau

<b:includable id='comments' var='post'/> lalu tambahkan kode berikut ini tepat di atasnya

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.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 #3: Tambahkan Kode Javascript

Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu tambahkan kode berikut di atas kode tersebut,

Jangan lupa ganti YOUR_DISQUS_SHORTNAME pakai nama Disqus lo sendiri,

<b:if cond='data:view.isSingleItem'>
<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('YOUR_DISQUS_SHORTNAME');
    console.log('Disqus loaded.');
  }
}, false);
//]]>
</script>
</b:if>

4. Langkah #4: Tambahkan Kode CSS

Supaya tampilan komentar Disqus lebih keren, tambahkan kode CSS berikut di atas kode </style> atau ]]></b:skin>

#disqus_thread{margin:25px auto;  padding: 10px; background-color:#fff;}

Kalau sudah, simpan perubahan dan lihat hasilnya.

Sebagai langkah terakhir, lo juga bisa mematikan komentar bawaan Blogger supaya tampilan kolom komentarnya tidak menumpuk dengan Disqus Comment