Loading the Disqus Comments By On Click on Website If the Comments on Website are Powered by Disqus
If the comments on website are powered by Disqus, the native commenting engines of Blogger or WordPress have to offer the most popular commenting platform with more features. For example, if Disqus lets to moderate discussions via email the commentators can use their existing Facebook/ Twitter accounts to sign-in for commenting.
When The Disqus widget is loading asynchronously in parallel it will also downloads the JavaScript and it would not impact the loading time of web pages. Even if we are not interested in participating in the discussion also the widget still adds lot of weight to the pages as the Disqus files will download on the user’s computer . The other issue with auto-loading especially when viewed on mobile devices Disqus it makes your pages lengthy.
On Demand with JavaScript Load the Disqus
We can also configure the Disqus on your website as an alternative to load the on-demand but not automatically. When someone clicks a button for example here the widget will be dynamically added to your web page. This lazy-loading technique can be implemented in pure JavaScript without jQuery.
Step 1: In this step go to web page template that has Disqus and replace the #disqus_thread <div> with the following snippet:
<div id="disqus_thread">
<a href="#" onclick="disqus();return false;">Show Comments</a>
</div>
Step 2: The Disqus code before the close <head> tag of your web page. You have to replace the disqus variables like disqus_shortname, disqus_url, etc.with own parameters.
<script type="text/javascript">
// Replace labnol with your disqus shortname
var disqus_shortname = "labnol";
// Put the permalink of your web page / blog post
var disqus_url = "http://example.com/blog-post";
// Put the permalink of your web page / blog post
var disqus_identifier = "http://example.com/blog-post";
var disqus_loaded = false;
// This is the function that will load Disqus comments on demand
function disqus() {
if (!disqus_loaded) {
// This is to ensure that Disqus widget is loaded only once
disqus_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(document.getElementsByTagName("head")[0] ||
document.getElementsByTagName("body")[0])
.appendChild(e);
}
}
</script>
The page have a “Show Comments” button and the comments are loaded when the button is clicked.
Some websites have auto-loading enabled for Disqus but the reader has scrolled to the bottom of the article when widget is loaded. This can be done in JavaScript again. We can use the onscroll method to check whenever the page is scrolled and if the user is near the bottom, the script will load the Disqus widget.
Place this snippet near to the closing </body> tag page.
<script type="text/javascript">
window.onscroll = function(e) {
if ((window.innerHeight + window.scrollY)
>= document.body.offsetHeight)
{
if (!disqus_loaded) disqus();
}
};
</script>
If the comments on website are powered by Disqus, the native commenting engines of Blogger or WordPress have to offer the most popular commenting platform with more features. For example, if Disqus lets to moderate discussions via email the commentators can use their existing Facebook/ Twitter accounts to sign-in for commenting.
When The Disqus widget is loading asynchronously in parallel it will also downloads the JavaScript and it would not impact the loading time of web pages. Even if we are not interested in participating in the discussion also the widget still adds lot of weight to the pages as the Disqus files will download on the user’s computer . The other issue with auto-loading especially when viewed on mobile devices Disqus it makes your pages lengthy.
On Demand with JavaScript Load the Disqus
We can also configure the Disqus on your website as an alternative to load the on-demand but not automatically. When someone clicks a button for example here the widget will be dynamically added to your web page. This lazy-loading technique can be implemented in pure JavaScript without jQuery.
Step 1: In this step go to web page template that has Disqus and replace the #disqus_thread <div> with the following snippet:
<div id="disqus_thread">
<a href="#" onclick="disqus();return false;">Show Comments</a>
</div>
Step 2: The Disqus code before the close <head> tag of your web page. You have to replace the disqus variables like disqus_shortname, disqus_url, etc.with own parameters.
<script type="text/javascript">
// Replace labnol with your disqus shortname
var disqus_shortname = "labnol";
// Put the permalink of your web page / blog post
var disqus_url = "http://example.com/blog-post";
// Put the permalink of your web page / blog post
var disqus_identifier = "http://example.com/blog-post";
var disqus_loaded = false;
// This is the function that will load Disqus comments on demand
function disqus() {
if (!disqus_loaded) {
// This is to ensure that Disqus widget is loaded only once
disqus_loaded = true;
var e = document.createElement("script");
e.type = "text/javascript";
e.async = true;
e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
(document.getElementsByTagName("head")[0] ||
document.getElementsByTagName("body")[0])
.appendChild(e);
}
}
</script>
The page have a “Show Comments” button and the comments are loaded when the button is clicked.
Some websites have auto-loading enabled for Disqus but the reader has scrolled to the bottom of the article when widget is loaded. This can be done in JavaScript again. We can use the onscroll method to check whenever the page is scrolled and if the user is near the bottom, the script will load the Disqus widget.
Place this snippet near to the closing </body> tag page.
<script type="text/javascript">
window.onscroll = function(e) {
if ((window.innerHeight + window.scrollY)
>= document.body.offsetHeight)
{
if (!disqus_loaded) disqus();
}
};
</script>
Post a Comment