I recently implemented the Disqus comment system on this and another of my blogs. I am really pleased with the service. It works extremely well, allows me to moderate all of the comments on my multiple blogs and my online conversations in one location, and the user interface is seriously kick-ass. My only complaint was that there is no way to change the look of the Comments and Reactions count. Or so I thought. Thanks to Ryan at Disqus, I learned there is a very simple, but admittedly unknown, way to do this.
It turns out that in the Settings section for your Disqus approved sites, you can change the text of the comment counts. That part is well known. What is not well known is that the text fields where you change the text will accept HTML.
NOTE: You can find the settings to which I refer in this post by logging into your Disqus.com account. From your Dashboard, click on the site for which you want to implement this change from the section labeled “Your Sites”, then click the “Settings” tab at the top of the page. Then click on the “Appearance” tab in the left-hand side of the page. The Comments and Reactions count settings are towards the bottom of the page.
In my case, I wanted to show only the integer value that represents the comment count. I do, however, have Reactions enabled so the text output for the count looks something like this:
10 Comments and 8 Reactions.
The settings allows me to change each part but it won’t let me show only the “10” form the example above. The example above is represented in the settings via two text fields containing one each of “10 Comments” and “8 Reactions”. You can delete the contents of the “Reactions” field, but Disqus will still display the “and” even if the field is empty.
The Workaround
The work around is to add an opening SPAN tag to the end of the “10 Comments” field and a close SPAN tag to the “8 Reactions” field like this:
10 <span class="hide">Comments 8 Reactions</span>
So when the fields are concatenated in the page, the output will look like this:
10 <span class="hide"> and 8 Reactions</span>
The form even allows you to add custom CSS in the handy textarea labeled “Custom CSS”. So I can simply add the following code to hide the text enclosed in my SPANs:
.hide { display: none; }
Note that There are three text fields for comments and three for reactions.
0 Comments
1 Comment
{num} Comments
0 Reactions
1 Reaction
{num} Reactions
Make sure you enter the HTML in each field like this:
0 <span class="hide">Comments
1 <span class="hide">Comment
{num} <span class="hide">Comments
0 Reactions</span>
1 Reaction</span>
{num} Reactions</span>
This trick could also be used to change the look of the different parts of the string as well. You could do something like this:
{num} <span class="comments">Comments</span>
<span class="reactions">{num} Reactions</span>
The output of the above would look like this:
{num} <span class="comments">Comments</span> and
<span class="reactions">{num}Reactions</span>
