Header ads

How to install Lazy Load Disqus Comments


How to install Lazy Load Disqus Comments is one way to speed up blog loading. How it works and uses are similar to lazy loads of AdSense ads . It seems that I often discuss Disqus's comments. Starting from how to post Disqus Onclick Event comments to how to return Disqus comments to Blogger comments . Discussions related to Disqus comments also must have often been encountered in various blogs, with various points of view and how to install it. But one important thing to know, if you dare to post Disqus comments on Blogger / blogspot, then inevitably have to accept the contribution of Disqus to loading blog pages.

Because, the completeness of the features offered, in tune with its weaknesses that will make the website speed slower.

However, by using the lazy load Disqus Comments trick, the share that helps slow the site speed will fail.


Application of Lazy Load Disqus Comments on Blogger / Blogspot

In this case, I assume you have already created a Disqus comment account for one of your blogs. If not, please register at https://disqus.com/admin/create/ then note the Disqus comment Shortname for the blog.

Step 1: Put the Disqus Comment Form

This code is the Disqus comment caller .

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

If you find the code <b:includable id='commentPicker' var='post'>then add the following div tag code below 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 delete the code, and replace it like 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>

Note:
For Blogger templates that still use 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 for putting the Disqus comment form code as above.

Step 2: Add the Blogger Disqus URL

This code is useful for loading Disqus comment content on the original page / url. Although the contents of the Disqus comments are made and viewed on different devices .

For example, if the content of a Disqus comment is made via a mobile url - which usually forms a url with the addition of ? M = 1 behind it, for example https://www.bungfrangki.com/2019/07/cara-redirect-301-di-blogger.html? m = 1 - then the Disqus comment content will still be visible on other devices, with the actual url.

For installation, please search for the code <b:includable id='comments' var='post'>or <b:includable id='comments' var='post'/>then place 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

Search for the code </body>or &lt;!--</body>--&gt;&lt;/body&gt;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 Disqus Shortname for your blog.
  • Don't replace the tag <script>in the JavaScript code above with <script type='text/javascript'>Because, will frustrate loading on disqus.com/blogger_item.js di tampilan mobile.

Step 4: Edit 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 Changes

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

Step 6: Disable Blogger Comments

Up to step 5 above, the installation steps for lazy load Disqus comments are complete.

Now, so that Disqus comments don't overlap with Blogger's default comments, please deactivate Blogger comments in the following way.

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

Advanced Settings

Disqus comments not appearing?

Means that in the template the default tag caller comment has been deleted. For that, please find the code </article>and add the following code on it:

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

Or

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

Note:
Conditional tags data:view.isSingleItemwill display comments on the side of the post and page / static page. If you only want to display in the post just replace the code with data:view.isPost.

Conclusion

To install the Disqus lazy comments above, there is no need to delete Blogger's default comments, which are now more interesting than the previous Blogger comments form.

Just in case. Maybe in the future you will change your taste. Want to go back to using Blogger comments, but don't want to bother over-editing.

Or it could be, want to use two comments at once, namely Blogger comments and Disqus with the onclick event.

Post a Comment

0 Comments