Lazy Load Disqus Comment on Blogger Site
Lazy load Disqus mean set an hold to load Disqus Comment system, the whole page loaded first and then when we hit or scroll on some area in those page will triggering disqus comment system to be load.
This method for lazy loading Disqus comments is adapted for Blogger blog from CSS-Tricks article where originally shared by Osvaldas Valutis. This Blog using that method in Desktop mode, after loading this page, scroll down fast to the bottom, and you will see disqus comment box load after you scroll to it.
Before we begin, dont forget to backup your xml themes, then click on "Edit HTML".
If you have already disqus widget installed, remove it from "Layout" page.
Click on html block text area which is our xml code the hit CTRF + F on the keyboard.
After small input textarea shown on the upper right of our html code, fill with <b:includable id='comments' var='post'> and hit Enter on the keyboard.
Once the result found, we are shown the highlighted word. if it still wrapped, click on ">" on the left line of the highlighted word, so we got code structure like below :
We are about to modify on that structure, to make it look like this :
And this is the code to be paste, save it when its done to make changes :
Explanation:
On the script, you look at "your_disqus_shortname" must be replaced with your disqus shortname self. The script with CDATA in it comes from disqusloader.js by Osvaldas Valutis, minified and write directly on our blog. On the next script disqusloader define div with class disqus to be fill data processed by disqusloader function. Within disqusConfig function, it call callback if disqus ready to appear then giving new class is-hidden with sytle display none to the div with class disqus-loading, so the text "Loading comments..." will dissapear after that.
CSS Trick Lazy Loading Disqus Comments
Sumber https://www.blakbin.com/
This method for lazy loading Disqus comments is adapted for Blogger blog from CSS-Tricks article where originally shared by Osvaldas Valutis. This Blog using that method in Desktop mode, after loading this page, scroll down fast to the bottom, and you will see disqus comment box load after you scroll to it.
Before we begin, dont forget to backup your xml themes, then click on "Edit HTML".
If you have already disqus widget installed, remove it from "Layout" page.
Click on html block text area which is our xml code the hit CTRF + F on the keyboard.
After small input textarea shown on the upper right of our html code, fill with <b:includable id='comments' var='post'> and hit Enter on the keyboard.
Once the result found, we are shown the highlighted word. if it still wrapped, click on ">" on the left line of the highlighted word, so we got code structure like below :
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4><data:post.commentLabelFull/>:</h4>
We are about to modify on that structure, to make it look like this :
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <!-- Paste our newly disqus block code below here --> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4><data:post.commentLabelFull/>:</h4>
And this is the code to be paste, save it when its done to make changes :
<!-- Disqus Block Code --> <b:if cond='data:view.isPost'> <style> .disqus-loading { font-size: 26px; font-weight: 300; color: #777; text-align: center; } .disqus-loading.is-hidden { display: none; } </style> <div class='disqus-loading'>Loading comments...</div> <div class='disqus'/> <script> /*<![CDATA[*/ !function(t,e,n){"use strict";var o=function(t,e){var n,o;return function(){var i=this,r=arguments,d=+new Date;n&&d<n+t?(clearTimeout(o),o=setTimeout(function(){n=d,e.apply(i,r)},t)):(n=d,e.apply(i,r))}},i=!1,r=!1,d=!1,s=!1,a="unloaded",u=!1,l=function(){if(!u||!e.body.contains(u)||"loaded"==u.disqusLoaderStatus)return!0;var n,o,i=t.pageYOffset,l=(n=u,o=n.getBoundingClientRect(),{top:o.top+e.body.scrollTop,left:o.left+e.body.scrollLeft}).top;if(l-i>t.innerHeight*r||i-l-u.offsetHeight-t.innerHeight*r>0)return!0;var c,f,p,y=e.getElementById("disqus_thread");y&&y.removeAttribute("id"),u.setAttribute("id","disqus_thread"),u.disqusLoaderStatus="loaded","loaded"==a?DISQUS.reset({reload:!0,config:d}):(t.disqus_config=d,"unloaded"==a&&(a="loading",c=s,f=function(){a="loaded"},(p=e.createElement("script")).src=c,p.async=!0,p.setAttribute("data-timestamp",+new Date),p.addEventListener("load",function(){"function"==typeof f&&f()}),(e.head||e.body).appendChild(p)))};t.addEventListener("scroll",o(i,l)),t.addEventListener("resize",o(i,l)),t.disqusLoader=function(t,n){n=function(t,e){var n,o={};for(n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);for(n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o}({laziness:1,throttle:250,scriptUrl:!1,disqusConfig:!1},n),r=n.laziness+1,i=n.throttle,d=n.disqusConfig,s=!1===s?n.scriptUrl:s,(u="string"==typeof t?e.querySelector(t):"number"==typeof t.length?t[0]:t).disqusLoaderStatus="unloaded",l()}}(window,document); /*]]>*/ </script> <script> var disqus_shortname = 'Your_Disqus_Shortname'; var disqus_blogger_current_url = "<data:blog.canonicalUrl/>"; disqusLoader( '.disqus', { scriptUrl: '//' + disqus_shortname + '.disqus.com/blogger_item.js', disqusConfig: function() { this.callbacks.onReady = [function() { var el = document.querySelector( '.disqus-loading' ); if( el.classList ) el.classList.add( 'is-hidden' ); // IE 10+ else el.className += ' ' + 'is-hidden'; // IE 8-9 }]; } }); </script> </b:if> <!-- Disqus Block Code End -->
Explanation:
On the script, you look at "your_disqus_shortname" must be replaced with your disqus shortname self. The script with CDATA in it comes from disqusloader.js by Osvaldas Valutis, minified and write directly on our blog. On the next script disqusloader define div with class disqus to be fill data processed by disqusloader function. Within disqusConfig function, it call callback if disqus ready to appear then giving new class is-hidden with sytle display none to the div with class disqus-loading, so the text "Loading comments..." will dissapear after that.
- How to get Api Key for Disqus Comment Count
- Disqus Comment on Click with API Counter Comment Count
- Disqus Comment on Click without API Comment Count
CSS Trick Lazy Loading Disqus Comments
0 Response to "Lazy Load Disqus Comment on Blogger Site"
Post a Comment