Disqus + jQuery Hack = Awesome UX
Comment systems suck. Except for Disqus, which offers a wide array of functionality in a fantastic user interface. But, awesome UX doesn’t always come “out-of-the-box”.
I am obsessive when it comes to certain design elements. If there is something about a platform I can’t customize, it usually leads me to develop my own platform. In this case I found everything I needed in Disqus, except for one: the ability to embed multiple comment forums on a single page. Why would I need this? Because UX matters to me, and I couldn’t think of a good reason to force visitors to jump pages for comments.
I wanted to load comments with AJAX, on-demand.
It turns out, Disqus does not support this, but they were support-ive:
“You may be able to accomplish your goal by implementing some iframe hackery, though some additional JavaScript and CSS may be necessary at that point. Let us know what you come up with, we always enjoy seeing Disqus customized in new implementations.
And do let us know if we can be of any further assistance; while we don’t officially support multiple embeds on the same page, we’d be glad to lend a second opinion where appropriate.”
— Tyler, Disqus Support Guy
So I hacked it.
Surprisingly, my hack worked in every browser except Firefox. Whoa. What the... yeah. It works fine on first load, but subsequent loads won't allow you to type a comment. To deal with this, I force Firefox to jump to a blog detail page after the first Disqus forum loads. Most people will never run into this case, and although rare, we'll blame Firefox for a slightly crappier user experience.
You might notice I used this pattern on "Read more" links also. Again, the idea is to eliminate an unecessary page jump. And why not? This was the promise of the AJAXian age, where web sites feel more like web apps.
Anything for a little UX love.
Oh, and here's my hack:
<div class="comments">
<p class="nocomment">
<a class="nocomment" href="/">Hide comments</a>
</p>
<div class="disqus_thread"></div>
</div>
<p class="comment">
<a class="comment"
href="http://collaborable.com/blog/blog-entry-title"
data-disqus-identifier="blog-entry-id">
<span>Leave a comment</span>
</a>
</p>And...
// DISQUS vars.
var disqus_shortname = 'collaborable';
var disqus_identifier = '';
var disqus_url = '';
// Leave a comment/cancel.
$('.entry a.comment').click(function ()
{
// Firefox? Bad firefox.
if ($.browser.mozilla && window.disqus_loaded)
{
return true;
}
// Init DISQUS.
disqus_identifier = $(this).data('disqus-identifier');
disqus_url = $(this).attr('href');
// DISQUS requires each thread to have the ID #disqus_thread.
$entry = $(this).parents('div.entry');
$('#disqus_thread').removeAttr('id');
$entry.find('div.disqus_thread').attr('id', 'disqus_thread');
// Load DISQUS script, if not already loaded.
if ($entry.find('div.disqus_thread .dsq-reply').length == 0)
{
$.getScript('http://'+disqus_shortname+'.disqus.com/embed.js',
function ()
{
window.disqus_interval =
setInterval('is_disqus_loaded("'+$entry.attr('id')+'")',
200);
}
);
}
// Hide/kill other DISQUS forums.
$entry.find('a.nocomment').trigger('click');
$(this).find('span').addClass('loading');
return false;
});
// Hide/kill all open DISQUS forums.
$('.entry a.nocomment').click(function ()
{
$('div.comments').slideUp('normal',
function () { $(this).find('.disqus_thread').empty(); });
$('p.comment').slideDown();
return false;
});
function is_disqus_loaded (entry_id)
{
$entry = $('#'+entry_id);
if ($entry.find('div.disqus_thread .dsq-reply').length)
{
clearInterval(window.disqus_interval);
window.disqus_loaded = true;
$entry.find('div.comments').slideDown();
$entry.find('a.comment span').removeClass('loading');
$entry.find('p.comment').slideUp();
}
}Like this blog? Follow me on Twitter @ericingram and subscribe to the RSS feed.
Hide comments