DISQUS

DISQUS Hello! DISQUS Blog and Forum is using DISQUS, a powerful comment system, to manage its comments. Learn more.

Community Page

DISQUS Blog and Forum

The official Disqus forum. This is the place to receive beta support and offer suggestions.
« Back
Author

jQuery Disqus Plugin

Started by Rob Loach · 11 months ago

When integrating Disqus using the JavaScript integration, it instructs you to place some < script > tags within your document. Although this is fine, it's not that great for performance because when the users' browsers reaches the script tags, it automatically downloads, and runs the script. A better practice to managing JavaScript is to have it load all the content first, and then execute the JavaScript when the page is completely ready.

jQuery comes with this ability through a call to:

$(document).ready(function() {
// Do stuff here!
});


I wanted Disqus to use this so that when the page was loading, it wouldn't stall when it started loading the Disqus thread. So I started working on a Disqus jQuery plugin.... The code is right here at the moment, but I will officially publish it once everything is working.

The idea is that you just provide the basic DOM that Disqus recommends. With the number of comments links with the #disqus_thread fragment at the end, and a < div id="#disqus_thread" > where you want the Disqus comment thread to appear. At the top at the page through, we add a call to the jQuery Disqus plugin:

$(document).ready(function(){
$.Disqus({domain:"myusername"});
});

This call would do all the JavaScript execution, making the comment links reflect their number of comments, and make the Disqus thread visible. Since it's using jQuery's ready event, it wouldn't stall the page on load. If you have a look at the JavaScript page though (http://drupalbin.com/2575), you see that I ran into some problem when attempting to show the Disqus thread.


// Call the Disqus script to create the Disqus comment thread
alert('Attempting to create the comment thread!');
//$('#' + disqus_container_id).load('http://disqus.com/forums/' + settings.domain + '/embed.js');
//$('#' + disqus_container_id).text('').append('<script type="text/javascript" src="http://disqus.com/forums/' + settings.domain + '/get_num_replies.js"/>');
//$.getScript('http://disqus.com/forums/' + settings.domain + '/embed.js');

$('#' + disqus_container_id).appendDom([{
tagName :'script',
type : 'text/javascript',
src : 'http://disqus.com/forums/' + settings.domain + '/embed.js'
}]);

alert('Done creating thread, ready for the white screen?!');


This is where we add the < script > tag, using jQuery, after the < div id="disqus_thread">. When we make the call to Disqus though, it ends up just showing a white screen forever. This embed.js is a horrible peice of code, and extremely limiting. Is there anyway around this?

10 comments

  • Daniel Ha

    11 months ago

    Hi Rob,

    Sorry about the issues. The white screen is because of how jQuery
    handles onDomReady.

    Since Disqus needs to modify the DOM, there is a race condition with
    jQuery's event listener. What ends up happening is that Disqus writes
    to the page while jQuery is modifying the DOM and ends up writing over
    the entire page (e.g. white screen).

    This is not an issue with how the Disqus script is written. jQuery's
    onDomReady reacts similarly with most applications that need to modify
    the DOM. We've been working around this recently and hope to update
    you on the matter soon.

    Thanks.
    reply
  • Rob Loach

    11 months ago

    I knew something was wrong with how the events were being handled. Well, here's something to work off of: http://drupalbin.com/2575 . If there's anyway I can help, feel free to let me know.
    reply
  • Daniel Ha

    11 months ago

    Thanks for the contribution, Rob.
    reply
  • zaidler

    7 months ago

    will the inclusion of javascript in a web page would make the page to load slowly?
    Thanks in advance
    regards
    Figurative Paintings
    reply
  • manojkumar

    6 months ago

    hello
    reply
  • lv handbags

    6 months ago

    i prefer to use ajax, it is much faster and your eyes is always on the screen
    reply
  • Moritz Angermann

    6 months ago

    I have done exactly the same for my blog application. And ran into the same issue.
    The only feasible work around, I found so far is to split the embed.js apart.

    The document.write in the embed.js basically just injects the stylesheet. Which can easily been pulled out and offered as separate file. I wonder why this is not a default option for embedding disqus, especially as some people use to alter the disqus theme by overwriting the css, in which case loading the base css is kind of pointless.

    One problem persists though, if you split the embed.js apart, you get your forum id hardcoded into the js file.

    Assuming you split the embed.js apart, you could do something like this, using jQuery:


    if($("#disqus_thread").length) {
    var head = document.getElementsByTagName('head')[0];
    $(document.createElement('link'))
    .attr({type: 'text/css', href: '/media/css/disqus.css', rel: 'stylesheet', media: 'screen'})
    .appendTo(head);
    $.getScript('/contrib/js/disqus.embed.js');
    }


    This obviously will only load the disqus script and style if the element with the id #disqus_thread exist and requires the head tag to be present.

    You can take a look at it at:

    http://journal.moritzangermann.com

    the splitted files are (for convinience):
    http://journal.moritzangermann.com/media/css/di...
    http://journal.moritzangermann.com/contrib/js/d...
    reply
  • chris

    5 months ago

    Thanks for this example Moritz.

    I've just implemented your mod on a test system ( where I'm trying out Disqus integration) and found this sped page loads considerably. Cheers
    reply
  • Moritz Angermann

    5 months ago

    @chis, you are welcome

    I just hope disqus will at one point integrate this.
    reply
  • mathi_s

    4 months ago

    sorry can't delete
    reply

Add New Comment

Returning? Login