Instantly share code, notes, and snippets.

Embed
What would you like to do?
Load Disqus comments only on demand if you give a shit about page weight and your visitors. Even with no comments, i.e. an empty comment form, calling Disqus will load an extra 226Kb. If your page has comments this can be far higher. This Gist accompanies my blog post: http://internet-inspired.com/wrote/load-disqus-on-demand/
// 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 + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
// hide the button once comments load
$(this).fadeOut();
});
});
<!-- 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>
@elidupuis

This comment has been minimized.

elidupuis commented Dec 20, 2013

Simple and effective. Thanks for posting.

@Penworks

This comment has been minimized.

Penworks commented Feb 19, 2014

REALLY useful. I knew that my page loads were being really severely effected by Disqus. Though I do also think Disqus is a great solution for comments, the loading time is a major issue so its worth sacrificing and using dynamic load. This is also majorly true for mobile devices. THANK YOU! :)

@ifightcrime

This comment has been minimized.

ifightcrime commented Apr 11, 2014

$.getScript would tidy things up a bit.

edit: ahh, the downfall is this sets cache to false. So you'd have to do something in ajax setup... or just don't listen to me and do what @nternetinspired said. :)

@Alpha0007

This comment has been minimized.

Alpha0007 commented May 28, 2014

  1. How to make it open in a new window/pop up window ?
  2. How this code can be changed for using multiple threads on same page?
@Averyy

This comment has been minimized.

Averyy commented Jun 9, 2014

Amazing, thanks for this.

@fredericmohr

This comment has been minimized.

fredericmohr commented Jan 23, 2015

This is awesome - finally I found a solution that works with Content-Security-Policies. My attempts to get Disqus with the jQuery load() function all resulted in a unsafe-eval violation.

Thank you so much!

@LaGross

This comment has been minimized.

LaGross commented Feb 28, 2015

Fixed: I fixed the problem. The problem was that blogger redirects to the country specific blogger domain. That's when disqus looses the thread-url. I needed to use the disqus variables from their original code (https://help.disqus.com/customer/portal/articles/888340-manually-adding-a-disqus-gadget-to-blogger). The second problem was the embed.js script. I changed it to blogger_item.js and now everything works fine.

(original question)
When I use this code for my blog, commens which already have been postet to it are not displayed. Somehow Disqus can not make the reference to the previous comments. Is there a way to fix this? Can I use the page URL as parameter somehow? I created a test-blog and there it works. Only difference: my shortname. the shortname for my real blog has "-" in it. Can it effect it? Do I need to escape them?

@euler0

This comment has been minimized.

euler0 commented Jun 4, 2015

It's more practical to use protocol-relative URL, '//' instead of 'http://'. Disqus also suggests it in their template code.

@seb86

This comment has been minimized.

seb86 commented Feb 6, 2017

How does this work on WordPress blog posts?

@rrecinos

This comment has been minimized.

rrecinos commented Feb 8, 2017

@seb86 you could just place the HTML code into the single.php file and the SCRIPT into the footer.php and that should do it.

@seb86

This comment has been minimized.

seb86 commented Mar 22, 2017

@rrecinos Do I not have to specify a post ID?

@zenbug

This comment has been minimized.

zenbug commented Sep 15, 2017

Possible to make that button toggle comments on and off?

@shuibaco

This comment has been minimized.

shuibaco commented Oct 14, 2017

Thank you very much 👍

@JamesSkemp

This comment has been minimized.

JamesSkemp commented Oct 30, 2017

Piggybacking off of euler0's comment, in this day and age you really just want to use HTTPS instead of protocol-relative.

See for example https://jeremywagner.me/blog/stop-using-the-protocol-relative-url

@mohinilu

This comment has been minimized.

mohinilu commented Dec 4, 2017

This is awesome - finally I found a solution that works with Content-Security-Policies. My attempts to get Disqus with the jQuery load() function all resulted in a unsafe-eval violation. Call girls in goa

@mohinilu

This comment has been minimized.

mohinilu commented Dec 4, 2017

This is magnificent - at last I found an answer that works with Content-Security-Policies. My endeavors to get Disqus with the jQuery stack() work all brought about a hazardous eval infringement. Best Delhi Escorts

@Salamander3

This comment has been minimized.

Salamander3 commented Feb 24, 2018

Why does it has to be jquery? Can't JavaScript do this? Since it's to reduce bloat might as well do it in pure JavaScript.

@PolHaghverdian

This comment has been minimized.

PolHaghverdian commented Mar 19, 2018

How to specifiy postID etc... ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment