Display Disqus On Click Event
I have recently redesigned Paulund and it was design to concentrate on page loading speeds, I wanted to make Paulund load as fast as possible. There are lots of things you can do to improve the loading speeds of your website, you can compress images, improve your web hosts, make your website code more efficient. But one thing that I choose to do with this redesign was to reduce the amount of HTTP requests each page makes when it first loads.
Disqus has become very popular because of the amount of the features that come with it, you automatically get:
- Threaded comments and replies
- Notifications and reply by email
- Subscribe and RSS options
- Aggregated comments and social mentions
- Powerful moderation and admin tools
- Full spam filtering, blacklists and whitelists
- Support for Disqus community widgets
- Connected with a large discussion community
- Increased exposure and readership
To solve this problem I changed the way I displayed the Disqus commenting system, instead of loading this on the page load event I will display Disqus by clicking on a button to show it.
To do this I will use jQuery to ajax in the Disqus script when it is needed. It still makes the same amount of HTTP requests as it does on the page load but it will only make the requests when they are needed. A large percentage of people that visit a blog will not leave a comment on the page, or intend to leave a comment on the page, why display the comment box if a large percentage of people will not comment. It's more efficient to simply display the comments when they are needed.
HTML To Display Disqus
The HTML to display the disqus commenting system is very simple just add the following code.
<div id="comments" class="comments-area"> <div class="showDisqus">Show Comments</div> <div id="disqus_thread"></div> </div>
This will add a comment area to the page, the div with class showDisqus is what we will use as the button to display Disqus.
There is another div with the ID of disqus_thread this is where Disqus will display all the comments for the page.
jQuery To Display Disqus
When the script is loaded it searches for the Disqus div and populates it with the comments.
The problem with loading in Disqus on a click event like above is that search engines will not be able to index your comments. So if you want comments on your site to be indexed by search engines you should not use this method of loading comments.
This will now switch the HTTP requests of Disqus to a click event from page load and will make a big difference to your page loading speeds.
Learn how to code with Treehouse
- Learn projects with access to 1000+ videos
- Practice live with our Code Challenge Engine
- Get help in our members-only forums
- Access 100s of premium tutorials and downloadable content
- Members content consists of premium WordPress plugins
- CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
- In-depth development tutorials
- Priority tutorial requests
- No ads