How to Set Lazy Load Disqus Comments in Blogger?

How to Install Lazy Load Disqus Comments is one way to make your blog load faster. Its operation and usage are similar to slow loading Adsense ads. I seem to discuss Disqus comments a lot. From posting Disqus Onclick events to how to return Disqus comments in Blogger comments. Discussions related to Disqus comments have also been encountered frequently on various blogs with different perspectives and ways of setting them up. But one thing is important to know: if you decide to post Disqus comments on Blogger / blogspot, you will inevitably have to take part in the finalization of Disqus when the blog pages load.

Because the completeness of the offered features, combined with its weaknesses, slows down the site’s performance.

However, with the help of Disqus Comments lazy loading, we will achieve fast loading of blog pages.

Applying Lazy Load Disqus Comments on Blogger / Blogspot

In this case, I am assuming that you have already created a Disqus comments account for one of your blogs. If not, register at https://disqus.com/admin/create/, then write down the short name of the Disqus comment for the blog.

Step 1: Place the Disqus comment form

This code is the caller of Disqus.

<b:includable id=’commentPicker’ var=’post’> или <b:includable id=’commentPicker’ var=’post’/>

If you find the code, <b: includable id = ‘commentPicker’ var = ‘post’> add the following div tag code below:

<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 code, <b: includable id = ‘commentPicker’ var = ‘post’ /> remove it 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 instructions to add the Disqus comment form code as above.

Step 2. Adding Blogger Disqus URL

This code is useful for loading Disqus comment content into source page / url. Although the content of Disqus comments is made and viewable on different devices.

For example, if the content of a Disqus comment is generated with a mobile url, which usually renders a url with an extra character? M = 1, for example https://tekhnologiya.blogspot.com/2020/04/uslovnyj-teg-blogger-dlya-mobilnyh-ustrojstv.html?m=1 – then the content of the Disqus comment will still be displayed on other devices with the actual URL.

To install, find the code <b: includable id = ‘comments’ var = ‘post’> … </ b: includable>
or <b: includable id = ‘comments’ var = ‘post’ />  and replace with the following code:

<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 & lt;! – </body> – & gt; & lt; / body & gt; place this code above your 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 the Disqus short name for your blog. Do not replace the <script> tag in the JavaScript code above <script type = ‘text / javascript’> . Because, it will upset the load on disqus.com/blogger_item.js di tampilan mobile.

Step 4: Edit CSS

Step 5: Save changes

Step 6. Disable Blogger Comments

Prior to step 5 above, the installation steps for lazy loading Disqus comments are complete.

So that Disqus comments do not overlap with default Blogger comments, disable Blogger comments as follows.

• Go to Settings> Messages, comments.

• Then, in the comments area, select Hide.

• After that click the Save After button in the upper right corner.

Advanced settings

Disqus comments not showing up?

Indicates that the default call tag for comments has been removed in the template. To do this, please find the </article> code and add the following code:

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

or

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

Note: the
conditional data: view.isSingleItem tags will display comments on the post and page / static page side. If you only want to display the post, replace the code with data: view.isPost . Everything works in new Blogger themes, checked on the Contempo theme