Sep 29, 2016

How To Load Disqus Comments On Click Or Scroll In Blogger

data:blog.title
Disqus is one of the best and most popular third party commenting system available for the blogger blogs, offers a lot more features than default commenting engine of BlogSpot. In previous, I've shared a trick to loading Disqus on a scroll and now I'm again here with another method to load Disqus comments on click or scroll.

Update :- Some of readers are facing problem in using disqus on demand function (Disqus on Click) in blogger due to BlogSpot parameter ?m=1. It means disqus is considering same URL as two different URLs. When someone leave comment on desktop then it is not showing in mobiles and same condition is happening when someone leave their comment using mobile. So, I've updated the code right now. Now it is working well on both devices.
Load Disqus On Click, On Scroll Load Disqus

Benefits Of Using This Method:


There are top two benefits of using this trick on your blogger blog which is given below:
  • Disqus comments only load when someone clicks on load button.
  • Auto-Loading Disqus comments make your blog page too lengthy especially when viewed on a mobile device. So this hack helped you in preventing auto-loading Disqus comments.
  • It will assist you in reducing your web page loading time.


How To Apply Load Disqus On Demand System In Blogger?

Load Disqus Comments on demand or scroll is a must requirement these days when someone is designing a responsive template. As I've mentioned above, This method helps in reducing the initial page download time along with restricting the amount of data that gets downloaded. 

So, the users who never click or scroll down to load Disqus button, to see the comments never load the extra baggage on your blog page. If you want to add this method to your blogger blog, then read and follow the complete steps, which is given below.

STEP 1] For this trick, you need to add jQuery to your blogger template. You've to paste below the line in <head> ... </head> section of your Blogspot theme.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

STEP 2] Now choose your preferred Disqus-Lazy-Load Code. Paste it just before of the </body> tag.


<script>
// <![CDATA[
/**************************************************************/
/*MBG load Disqus On Scroll - 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);
    }
}
/*MBG load Disqus On Scroll - END*/
/*MBG Disqus lazy load - START*/
$(function ()
{
    var disqus_div = $("#disqus_thread");
    if (disqus_div.size() > 0)
    {
        $(window).scroll(loadDisqus);    
    }
}
);
/*MBG Disqus lazy load - END*/
// ]]>
</script>
<script type='text/javascript'>
        //<![CDATA[
function load_Comments() {
    var hidediv = document.getElementById('disqusdiv');
    hidediv.style.display = 'none';
    var disqus_shortname = 'mybloggerguides';
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
}
//]]></script>

Note: If you're using click on load disqus (Load on demand) then replace mybloggerguides with your disqus shortname.

STEP 3] Now search for <data:post.body/> code and paste below code just above of it.

Note: This code is used to install anything below the post body, in case you want to install the Disqus comments somewhere else, then search for that code and paste below code just before/after of that code.

Note: If you're using Only On Scroll Method then remove Purple-White Highlighted code.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div data-disqus-shortname='MyBloggerGuides' id='disqus_thread'/>
<button id='btnDisqusLoadComments' type='button'>Load Disqus Comments</button>
</b:if>

STEP 4] Now change Disqus short name from MyBloggerGuides to your own, you can see that in your Disqus Profile.

Don't Ignore - How To Manually Add Disqus Comments in Blogspot?

STEP 5] Now, If you're using On Click Load Disqus or Both functions, then paste whole below code just above of ]]></b:skin> tag and if you're using Only On Scroll function, then paste only code which is highlighted with Red-White Text.

/* Disqus Comments Load On Click By www.MyBloggerGuides.Com */
#comments{display:none;}
.post-comment-link {visibility:hidden;}

#btnDisqusLoadComments{background:#650692;width:100%;display:block;text-align:center;text-transform:uppercase;padding-top:10px!important; padding-bottom:10px!important;font-size:18pt;color:white!important;text-shadow:1px 1px black;font-weight:bold;border-bottom:0!important;}
#btnDisqusLoadComments:hover{background:#0c6aff}

Note: STEP 6 is only for those who are using Load on Click Disqus system (Disqus on Demand) and if you're using only on scroll method, then skip this step and headover to the Step 7. :)

STEP 6] Using CTRL+F, Find <b:includable id='post' var='post'> code in Blogger Template code area and Paste the following code just below it.

<script>var disqus_url = &quot;<data:post.canonicalUrl/>&quot;;</script>

STEP 7] Now, Simply Click on Save Template button.

That's it. Now open your blog's any post and see this effect live on your blogger blog.

Must Read - Best Third-Party Commenting System For Blogger Blogs?

Conclusion:

So above guide is about "How To Load Disqus Comments On Click Or Scroll In Blogger?" I've tried my best to make this tutorial as easy as possible but if in any case you're facing any kind of issue, then let me know via leaving a comment below. I'll help you out of sure.

Did you like this post? If yes, then do share this excellent trick with your blogger friends.

Don't forget to subscribe to get latest updates direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.