Load Disqus Comments On Scroll – On Demand – On Click

By Anil Gupta, 0  Tech Tips

Tried and tested JQuery code to load Disqus on Scroll. Use it to load Disqus comments on demand with a click in WordPress as well. No Plugins required.


Loading Disqus comments on scroll is a pretty basic requirements these days when you are developing a responsive web design.

We load Disqus on our website only when the user has scrolled down to the level where comment section starts.

This helps is reducing the initial page download time along with restricting the amount of data that gets downloaded. So, the users who never scroll down (example, surfing on a smaller screen like mobile), to see the comments never load the extra baggage.

Load disqus on scroll or on click

Load disqus on scroll or on click

Here is our tried and tested JQuery code to load Disqus on demand and that too Asynchronously.

  1. Jquery is required
    Make sure you are loading JQuery in your web page before adding this code.

    If you don’t it in your code, you can add it using this line of code (using Google hosted JQuery CDN):

    	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    

    You can add this line of code either in <head>…</head> tag of your HTML page or at the bottom of the page just above the closing </body> tag.

  2. Choose your preferred Disqus lazy load code.

    Copy and paste this Disqus Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load Disqus - START*/
    var disqus_identifier = window.location.url; //Use current page URL as Disqus_URL_Identifier. You can change it as per your requirement.
    var ds_loaded = false; //To track loading only once on a page.
    function loadDisqus()
    {
        var disqus_div = $("#disqus_thread"); //The ID of the Disqus DIV tag
        var top = disqus_div.offset().top;
        var disqus_data = disqus_div.data();
        if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) 
        {
            ds_loaded = true;
            for (var key in disqus_data) 
            {
                if (key.substr(0,6) == 'disqus') 
                {
                    window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
                }
            }
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        }  
    }
    /*AM22 Named Function to load Disqus - END*/
    /*AM22 Disqus lazy load - START*/
    $(function () 
    {
        var disqus_div = $("#disqus_thread");
        if (disqus_div.size() > 0) 
        {
            $(window).scroll(loadDisqus);      
        }  
    }
    );
    /*AM22 Disqus lazy load - END*/
    </script>
    

    Copy and paste this Disqus Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load Disqus - START*/
    var disqus_identifier = window.location.url; //Use current page URL as Disqus_URL_Identifier. You can change it as per your requirement.
    var ds_loaded = false; //To track loading only once on a page.
    function loadDisqus()
    {
        var disqus_div = $("#disqus_thread"); //The ID of the Disqus DIV tag
        
        var disqus_data = disqus_div.data();
        if ( !ds_loaded) 
        {
            ds_loaded = true;
            for (var key in disqus_data) 
            {
                if (key.substr(0,6) == 'disqus') 
                {
                    window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
                }
            }
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        }  
    }
    /*AM22 Named Function to load Disqus - END*/
    /**************************************************************/
    /*AM22- Load Disqus comments on click of button - START*/
    $(function () {
            $("#btnDisqusLoadComments").click(loadDisqus);
        });
    /*AM22- Load Disqus comments on click of button - END*/
    </script>
    

    Copy and paste this Disqus Lazy load code at the bottom of your web page just before the closing </body> tag.

    <script>
    /**************************************************************/
    /*AM22 Named Function to load Disqus - START*/
    var disqus_identifier = window.location.url; //Use current page URL as Disqus_URL_Identifier. You can change it as per your requirement.
    var ds_loaded = false; //To track loading only once on a page.
    function loadDisqus()
    {
        var disqus_div = $("#disqus_thread"); //The ID of the Disqus DIV tag
        var top = disqus_div.offset().top;
        var disqus_data = disqus_div.data();
        if ( !ds_loaded && $(window).scrollTop() + $(window).height() > top ) 
        {
            ds_loaded = true;
            for (var key in disqus_data) 
            {
                if (key.substr(0,6) == 'disqus') 
                {
                    window['disqus_' + key.replace('disqus','').toLowerCase()] = disqus_data[key];
                }
            }
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        }  
        /*Disqus is not loaded - Show the button to load*/
        if (ds_loaded) 
        {   
            $("#btnDisqusLoadComments").hide();
        }
        else 
        {
            $("#btnDisqusLoadComments").show();
        }   
    }
    /*AM22 Named Function to load Disqus - END*/
    /*AM22 Disqus lazy load - START*/
    $(function () 
    {
        var disqus_div = $("#disqus_thread");
        if (disqus_div.size() > 0) 
        {
            $(window).scroll(loadDisqus);      
        }  
    }
    );
    /*AM22 Disqus lazy load - END*/
    /**************************************************************/
    /*AM22- Load Disqus comments on click of button - START*/
    $(function () {
            $("#btnDisqusLoadComments").click(loadDisqus);
        });
    /*AM22- Load Disqus comments on click of button - END*/
    </script>
    

  3. Add a DIV placeholder for Disqus comments

    Add this line of code where you want the Disqus Comments to appear (for all 3 cases as mentioned above).

    <div id="disqus_thread" data-disqus-shortname="YOUR_DISQUS_SHORTNAME"></div>
    

    Replace the YOUR_DISQUS_SHORTNAME with your website’s Disqus shortname.

  4. Add the Disqus comment Load button (Only required if you chose button click code above)

    Add this DIV tag to show the button. This should ideally be placed at the comments location in your HTML code.

    This button will show up when the Disqus comments were not loaded automatically on scroll. If they were indeed loaded, the button will be hidden.
    In case you choose only the ‘Click’ load code, this button would show up irrespective of scroll.

     
    <button type="button" id="btnDisqusLoadComments" >Load Disqus Comments</button>
    

Related: Disqus Vs facebook Comments


Loading Disqus On Scroll in WordPress

If you are using WordPress, JQuery is loaded automatically by core code.

But, here the location of the JQuery load matters to make our code work.

How to check location?

Go to any page/post of your site and Right click on your browser window->view Source->search for JQuery.js
Once found, you can see its location.

It would most probably be either in the head section or the footer of web page.

Now, choose your case and then proceed:

  1. JQuery loads in HTML Head section

    By default, WordPress loads JQuery in <head >section. Copy and paste the Disqus lazy load code in comments.php file and you are all set.

    This would work as JQuery would have already been loaded when comments.php file loads or gets a hit.

  2. JQuery loads in footer section of web page

    If you are using a good optimized theme or a custom one, you might fall in this case. This is in-fact a recommended approach to speed up the website page load.

    In this case, your Disqus code in comments.php won’t work as JQuery is not available at the time of loading comments.

    Whats the solution?

    1. Create a new *.js file in your active theme’s folder. You can give it any name like disqusLazyLoad.js.
    2. Add the above Disqus lazy load code (only the script portion) to this file. You can skip the opening and closing <script> tags.
    3. Add the following code to your WordPress active theme’s functions.php file. This code simply instructs wordpress to load your javascript file (i.e. Disqus lazy load) after JQuery has loaded.
      function am22_enqueue_custom_scripts()
      {
          wp_enqueue_script('am22-script', get_stylesheet_directory_uri() . '/disqusLazyLoad.js', array('jquery'), FALSE, TRUE); 
      }
      add_action( 'wp_enqueue_scripts', 'am22_enqueue_custom_scripts', 30 );
      

      It would make sure that the lazy load code is always executed only when JQuery is available.

      The benefit with this approach is the applicability in both cases i.e. even the one where JQuery is loaded in head section.

    4. Add the Disqus_Thread placeholder DIV code (given above) to comments.php file.
      Example:

      Load disqus on scroll in wordpress. Comments.php file example

      Load disqus on scroll in wordpress. Comments.php file example

FAQ – Frequently Asked Questions

  1. Can we use this code with Disqus wordpress plugin?
    • No. You have to ditch the official Disqus plugin to get this Disqus lazy load working.
  2. I have added the code and disqus comments have stopped loading at all.
    • This is a very common case. Your web page is not loading JQuery before this Disqus load code gets executed. Please move JQuery load statement above this script code and things will start working.