How to Install Lazy Load Disqus Comments on Blogger

Cyreug 1/01/2020 Blogger

How to install Lazy Load Disqus Comments is one way to accelerate the loading of blogs. Its work and usability are similar to the lazy load of AdSense ads.

The discussion related to Disqus comments will also be often encountered in various blogs, with multiple viewpoints and ways of installation.

But one thing is essential to know, if dare to put a comment Disqus on Blogger/Blogspot, then inevitably have to accept Disqus contribution to the loading of the blog page.

Because, completeness of the features offered, as a rhythm with its weakness that will make the website speed slow.

However, by using the lazy load Disqus Comments trick, it is the case that the site will also be able to fall into the speed.

DEMO

The application of Lazy Load comment Disqus on Blogger/Blogspot

In this case, I assume you've created a Disqus comment account for one of your blogs. If not yet, please register to https://disqus.com/admin/create/ and note Shortname Disqus comments for the blog.

Step 1: Laying out the Disqus comment Form

This code is a DISQUS caller comment.

Find code <b:includable id='commentPicker' var='post'> or <b:includable id='commentPicker' var='post'/>.

If it finds the code <b:includable id='commentPicker' var='post'> then add the following div tag code underneath it:

<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>

However, if you find the code <b:includable id='commentPicker' var='post'/> Then remove that code, and replace it as this:

<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>

Attention:
For a Blogger template that still uses older versions of comments, please find the code <b:includable id='comment_picker' var='post'> or <b:includable id='comment_picker' var='post'/>. Then follow the steps put the Disqus comment form code as above.

Step 2: Add the Disqus Blogger URL

This code is useful for loading Disqus comment content on the original page/URL. Although Disqus comment content is created and viewed on different devices.

For example, if the comment content of Disqus is made via the mobile URL – which usually forms a URL with additions ?m=1 behind it, example https://cyreug.blogspot.com/2020/01/how-to-install-lazy-load-disqus.html?m=1 – then the Disqus comment content will still be visible in other devices, with the real URL.

For installation, please search code <b:includable id='comments' var='post'> or <b:includable id='comments' var='post'/> then put the following code on it:

<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>

Step 3: Add JavaScript

Find the code </body> or </body > Then place this code above the code:

<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>

Note:

Replace YOUR_DISQUS_SHORTNAME with Shortname Disqus for your blog.

Do not replace the <script> tag in the above JavaScript code with <script type='text/JavaScript'>. For this reason, it will thwart loading on disqus.com/blogger_item.js in Mobile view.

Step 4: Edit the CSS

Add the following CSS above the code </style> or ]]></b:Skin>.

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

Step 5: Save the changes

Please save the template changes by clicking the Save Theme button or save icon.

Step 6: Turn off Blogger comments

As of step 5 above, the lazy load Disqus Comments Installation step is complete.

Well, to Disqus comments do not overlap with the default Blogger comments, please disable Blogger comments in the following way.

Go to Settings > posts, comments, and sharing.
Then under Comment Location, select Hide.
After that, click the Save Settings button after in the upper right corner.

Advanced Settings

Disqus comments do not appear?

Means in that template, the default tag caller's comment was removed. For that, please find the code </article> then add the following code above it:

<b:include cond='data:view.isSingleItem' data='post' name='comment_picker'/>

<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

Note:
The conditional data:view.isSingleItem Tag will display the comments on the Post and page/static page. If you only want to show in a post, replace it with data:view.isPost.

Conclusion

To post a comment Disqus lazy load above, there is no need to delete the commented default Blogger, which now becomes more interesting than previous Blogger form comments.

To just be watchful. Perhaps your future will change your appetite. Want to re-use Blogger comments, but do not bother to excessive edit.

Or it could be, about to use two comments at once, i.e., Blogger and Disqus comment with an onclick event.

Well enough, hopefully, the article How to Install Lazy Load Disqus Comments on Blogger can be beneficial for all of us.

Most Visited