With the recent site update to TXP Tips, I thought it might be a good idea to use the excellent commenting service Disqus instead of the in-built Textpattern comments system.

Why? For several reasons:

1. Easy to integrate – just add some code to your page template/s
2. Social sharing, reactions and tagging are included
3. Easy to use
4. Textpattern’s in-built comments system is hard to customise

One potential downside of hosting your comments on Disqus is just that – any comments added are stored on Disqus rather than in Textpattern. However, given that there is an export tool built into Disqus this may not be a deal breaker.

Attribution

This tutorial was originally put together by maniar over on the forums, using the instructions put together by michaelkpate.

The tutorial is not online anymore so I’ve recreated the steps below.

Getting started

Visit the Presentation tab and create a new page template titled disqus. Enter the following code and press save.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:dsq="http://www.disqus.com/"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:wp="http://wordpress.org/export/1.0/">  
  <channel>
    <txp:article_custom limit="99999" section="blog" form="disqus-article" />
  </channel>
</rss>

Change the section="blog" attributes as needed – for TXP Tips I used section="blog, articles" since there were comments in both sections.

Create some forms

Then visit your Presentation > Forms tab and create a new form called disqus-article and enter the following code:

<txp:if_comments>
  <item>
    <!-- title of article -->
      <title><txp:title no_widow="0" /></title>
    <!-- absolute URI to article -->
      <link><txp:permlink /></link>
    <!-- thread body; use cdata; html allowed (though will be formatted to DISQUS specs) -->
      <content:encoded><![CDATA[<txp:body />]]></content:encoded>
    <!-- value used within disqus_identifier; usually internal identifier of article -->
      <dsq:thread_identifier><txp:article_id /></dsq:thread_identifier>
    <!-- creation date of thread (article), in GMT -->
      <wp:post_date_gmt><txp:posted gmt="1" format="%F %T" /></wp:post_date_gmt>
    <!-- open/closed values are acceptable -->
      <wp:comment_status>closed</wp:comment_status>
    <txp:comments form="disqus-comments" wraptag="" break="" />
  </item>
</txp:if_comments>

Then create another form called disqus-comments and enter the following code:

<wp:comment>
  <!-- internal id of comment -->
    <wp:comment_id><txp:comment_id /></wp:comment_id>
  <!-- author display name -->
    <wp:comment_author><txp:comment_name link="0" /></wp:comment_author>
  <!-- author email address -->
    <wp:comment_author_email><txp:comment_email /></wp:comment_author_email>
  <!-- author url, optional -->
    <wp:comment_author_url><txp:comment_web /></wp:comment_author_url>
  <!-- comment datetime, in GMT -->
    <wp:comment_date_gmt><txp:comment_time format="%F %T" /></wp:comment_date_gmt>
  <!-- comment body; use cdata; html allowed (though will be formatted to DISQUS specs) -->
    <wp:comment_content><![CDATA[<txp:comment_message />]]></wp:comment_content>
  <!-- is this comment approved? 0/1 -->
    <wp:comment_approved>1</wp:comment_approved>
  <!-- parent id (match up with wp:comment_id) -->
    <wp:comment_parent>0</wp:comment_parent>
</wp:comment>

Create a new section

Once the forms have been created, its time to add a new section. Visit the Sections tab and create a section named disqus and assign it the page template which we created earlier – disqus.

Visit the new page in the browser

Go to the newly created disqus section of your website by typing in the URL i.e http://example.com/disqus. Choose view source and then save the source as imported-comments.xml or similar name.

Go to Disqus and upload your comments file

Visit your site’s dashboard on Disqus. Click on the “Tools” tab. Go to the ‘Import/Export’ tab and choose Generic (WXR) to import your file.

If you get a success message that your import went ok, then note that the import process takes quite some time.

In case your import fails

In our case, the TXP Tips import failed. Here are some tips to help you overcome this:

• First, be sure to read the error message associated with the failed import
• Visit the Disqus troubleshooting page for any ideas
• If you get a validation error, try the W3C Validator file service to check for errors

With the TXP Tips export, there were many errors and it appeared they were caused by malformed comments. See this helpful post for more information.

Fixing XML validation errors

In the post above, the author suggests using the the xmllint UNIX tool which in built into OSX. Open Terminal.app and enter cd ~/desktop (assuming you placed the saved XML file on your desktop).

Once in your desktop, enter: xmllint imported-comments.xml (assuming your file is titled imported-comments.xml).

You may see a lot of errors, here’s what I got first:

imported-comments.xml:3692: parser error : Opening and ending tag mismatch: encoded line 3543 and script
//]]></script></p></content:encoded>
              ^
imported-comments.xml:3692: parser error : Opening and ending tag mismatch: item line 3531 and p
//]]></script></p></content:encoded>
                  ^
imported-comments.xml:3692: parser error : Opening and ending tag mismatch: channel line 3 and content:encoded
//]]></script></p></content:encoded>
                                    ^
imported-comments.xml:4056: parser error : Opening and ending tag mismatch: rss line 2 and item
  </item>
         ^
imported-comments.xml:4060: parser error : Extra content at the end of the document
  <item>
  ^

To fix the problems above, this is what needs to be removed: </script></p>]]>. With each removal of offending code, I re-saved the imported-comments.xml then entered xmllint imported-comments.xml on the command line.

Each time more errors came up, like this:

imported-comments.xml:15891: parser error : Sequence ']]>' not allowed in content
	<p><img src="http://img.youtube.com/vi/1ib97f7KONQ/default.jpg" alt="" /></p>]]
	                                                                             ^
imported-comments.xml:15891: parser error : internal error
	<p><img src="http://img.youtube.com/vi/1ib97f7KONQ/default.jpg" alt="" /></p>]]
	                                                                             ^
imported-comments.xml:15891: parser error : Extra content at the end of the document
	<p><img src="http://img.youtube.com/vi/1ib97f7KONQ/default.jpg" alt="" /></p>]]
	                                                                             ^

This is the offending portion that needed removing from the line number mentioned: ]]>.

Continue processing the document until Terminal.app returns the entire XML contents. Once that is done, you can re-import your file into Disqus and wait to see what happens!