Better Comments in CONTENTdm

CONTENTdm included comment functionality as part of the version 6 release last year, a desirable and useful feature that many users had requested. The problem, atleast for us, was that it was lacking in several key areas, mainly notifications. The only way to see if a comment was made was to log into the back end via the website configuration tool and check to see if there were any new comments. This makes it hard to manage comments and while we don’t want to necessarily police comments we need to know when they are made.

Table of Contents

CONTENTdm included comment functionality as part of the version 6 release last year, a desirable and useful feature that many users had requested. The problem, atleast for us, was that it was lacking in several key areas, mainly notifications. The only way to see if a comment was made was to log into the back end via the website configuration tool and check to see if there were any new comments. This makes it hard to manage comments and while we don’t want to necessarily police comments we need to know when they are made.

###Enter Disqus

I looked at a few discussion tools out there but this post is going to focus on Disqus. Using jQuery, and the embed options for the Disqus plugin, we can include comments in CONTENTdm that can be managed using Disqus. This includes notifications, approvals, sharing, following and subscription options that we and our users have all grown to expect in commenting functionality.

It should be noted that Disqus works by linking each comment to a url, so if the url of an item ever changes those comments will be lost, at least from a public interface but they can be retrieved from Disqus.

###Steps

Step 1.Create Account with Disqus – http://disqus.com/

Step 2. Add your site.
This will include a url, site name and a shortname that you will need in order to embed this in CONTENTdm. This also creates a direct url that can be used to mange comments for any site. For example: http://YOUR SHORTNAME.disqus.com/ would be a link to your site’s management console for Disqus.

Step 3. Choose your Platform
Choose the Universal Code option to include this in CONTENTdm. We are going to change the code a bit in order to include this in CONTENTdm.
If you already have an account setup with Disqus, you would choose the Install option under the settings tab to access the embed code options.


Step 4. Create the js file to add to CONTENTdm

In order to include this in CONTENTdm, we need to upload it as a separate js script in the bottom includes section of the web configuration tool. We are editing the code a bit so that we can insert the Disqus container div where we want it to go, using jQuery which is already part of CONTENTdm. We do this by adding the following line which inserts our Disqus comments after the details section of the item.

$('#details').after('<;div id="disqus_thread">;<;/div>;');


This will place the comments section under the Description container on each items detail page.

Here is the complete version with our addition:
Using what ever tool you like best (Dreamweaver, notepad, TextWrangler) add the following code, including your own forum shortname and save the file as disqus.js

// JavaScript Document
//Adding DisQus Plugin to CONTENTdm
//CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE
var disqus_shortname = 'xxx'; // required: replace example with your forum shortname
// Insert Disqus thread after details area in CDM
$('#details').after('<;div id="disqus_thread">;<;/div>;');
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

Step 5: Style it.

You can style the comment area and plugin by targeting the #disqus_thread ID. This style can be added to an existing style sheet or a new one.
Example:

#disqus_thread { border: 1px solid #DDD; padding: 1em 4px 4px 4px; width: auto; }

Step 6: Add Disqus to CONTENTdm

Just login to the Website Configuration Tool for CONTENTdm and using the Custom Pages/Scripts options, choose Custom Scripts and add the new disqus.js file to the ‘upload bottom includes’. Add your CSS to the css area within CONTENTdm. Finally you just need to save and then publish your changes. This can be added at either a global level, or for each individual collection.


The end result will allow your users to post comments within CONTENTdm on any item, and you or your staff can manage the comments, including receiving notifications using Disqus.

Note: We should have an example in production in the near future, and this will also be added to GitHub. I’ll also be posting on how to remove the comment count.