---
title: Load Disqus on demand
date: 2014-11-15T11:37:00+00:00
author: Seth Warburton
canonical_url: "https://internet-inspired.com/wrote/load-disqus-on-demand"
section: News
---
If you want commenting on your blog [Disqus](http://disqus.com/) seems like a great solution but it comes at a cost, page-weight. If you care about your visitors you should load that overhead only when it is requested.

Don’t get me wrong, Disqus offers plenty of advantages over self-hosted options and it’s a solution I use myself when I require commenting. My only concern is the weight it adds to a page. Even with no comments, i.e., an empty comment form, the call to Disqus will load an extra 226Kb, *minimum*. If your page has comments this can be far higher. Don’t assume your visitors will always want that, give them the option to choose.

Admittedly, Disqus is loaded asynchronously so it won’t block loading of your page, a point which Disqus are quick to make but this doesn’t account for the fact that people *pay* for bandwidth. If your visitors happen to be on a mobile device they may pay *a lot* for that bandwidth. If you care about page-weight you’ll want to ensure that additional overhead is only loaded if it is actually requested.

I created a quick [Github Gist](https://gist.github.com/nternetinspired/7482445) to show how I’d handle this.

`400: Invalid request`

/​/​Requires jQuery of course.

$(document).ready(function() {

$(“.show-comments”).on(“click”, function(){

var disqus\_​shortname = ​“YOUR-DISQUS-USERNAME”; /​/​Replace this value with \*your\* username.

/​/​ajax request to load the disqus javascript

$.ajax({

type: ​‘GET’,

url: ​‘http://’ + disqus\_​shortname + ‘.dis​qus​.com/​e​m​b​ed.js’,

dataType: ​‘script’,

cache: true

});

/​/​hide the button once comments load

$(this).fadeOut();

});

});

[view raw](https://gist.github.com/nternetinspired/7482445/raw/ebd61f570fd58d92394652fb2d470038f30c30ea/gistfile1.js) [gistfile1.js ](https://gist.github.com/nternetinspired/7482445#file-gistfile1-js)hosted with ❤ by [GitHub](https://github.com)

<!– An element a visitor can click if they <3 comments! –>

<button class=‘show-comments’>Load Disqus comments</button>

<!– The empty element required for Disqus to loads comments into –>

<div id=‘disqus\_thread’></div>

[view raw](https://gist.github.com/nternetinspired/7482445/raw/ebd61f570fd58d92394652fb2d470038f30c30ea/gistfile2.html) [gistfile2.html ](https://gist.github.com/nternetinspired/7482445#file-gistfile2-html)hosted with ❤ by [GitHub](https://github.com)

Assuming you are already loading jQuery then you can simply drop the script into your template’s main scripts file (which you already combine and minify, right??) and the html into your posts /​article view. You could inline the script of course, but personally I wouldn’t as I like to keep things organised.

## Where are *your* comments?

The observant among you will have already noticed that, for the time being, I’ve decided to not bother with commenting on my blog posts. I did actually implement this solution on this site, along with a method to allow/​disallow commenting on a post by post basis, then I decided to leave it disabled.

I’d love hear what you have to say though so feel free to [comment directly on my code at Github](https://gist.github.com/nternetinspired/7482445) or Tweet me.

Thanks.

## Get in touch!

If you need an engaging, modern website that will get you where you want to be **faster**, and **without stress**, just get in touch and we can get a conversation started!

- [hello@internet-inspired.com ](mailto:hello@internet-inspired.com)