Rafał Wrzeszcz - Wrzasq.pl

Using Disqus in XHTML applications

Wednesday, 28 November 2012, 09:22

Disqus is a great service! Without any doubt - brilliant comments system for any website you have. With it you no longer need to care about implementing comments system, moderation tools, social stream etc. Everything you need from commenting system is there. However there is one problem with it - it doesn't work with real XHTML applications (not so common over the net, but still). What's even worse Disqus team stated clearly that they will not care about XHTML applications. If they won't, then I will :).

What's the problem?

You may ask - What's the problem? I use XHTML and Disqus work's fine for me. Right… so you probably don't use XHTML, just it's doctype. XHTML is an XML application, more restrictive then HTML, which is mostly just a tag soup. XHTML documents need to be served with application/xhtml+xml content type, not text/html. And this is cause of all the problems, because then, browsers turn into much stricter mode. The funny fact is, that you usually use XML APIs to work with HTML documents, so in most cases, if your code is good it should work with XHTML without any problems. But HTML is more tolerant and if you write your code in messy way without taking care about details, it will work with HTML, but won't with XHTML - this applies especially to DOM operations.

Disqux

Fortunately Disqus is just loaded into <iframe>, so the external document does not need to be XHTML - only loading part, contianed within their's embed.js script needs to be XHTML-compilant. After formatting the code out of minified version, to be more debugger-friendly, the fix was very easy. As you can see on the bottom of this page it works!

I published fixed script on GitHub as https://github.com/rafalwrzeszcz/Disqux, so if you also use XHTML in your web application and want to use Disqus, you finally can!

The fix

You maybe wonder what was the fix? Just one space! Just a missing space between attributes. This is exactly what I wrote in second paragraph - the problem is all caused by not giving enought attention to details. Can't understand why Disqus team don't want to fix that. It is all described in README file.

Tags: XHTML, Web, Disqus, Code, JavaScript