Back to Tutorials

Using Disqus for Comments with Wolf CMS

  • on 18/12/2010 (updated on 12/03/2014)
  • in howto.

Wolf comes with its own core Comments plugin. For many users, this is completely adequate for providing a commenting facility on their Wolf site. It’s also common for some users to want to have self-hosted comments on their self-hosted site.

There are other options using third-party commenting services. This article explains how to use Disqus on a Wolf site. To quote from the Disqus site:

Using Disqus with your website gives you a fully-featured comment system, social network integrations, advanced administration and moderation, and other extensive community functionality. Most importantly, with Disqus your website is plugged into a web-wide community network, connecting millions of global audiences to your small blog or large media hub.

If that sounds good, read on! There are four fairly simple steps…

Enable Wolf’s Comments plugin

“What? I thought we were going to use Disqus!” That’s right — we are. But we are going to use Wolf’s own Comments plugin as the easiest way to decide which pages/articles/posts you want to allow comments on.

So before we go to the Disqus site itself, make sure that you have enabled the Comments plugin in Wolf’s Administration panel. (Don’t add any code anywhere yet, though.)

Getting Disqus

If you haven’t already done so, this is the time to sign up for a free Disqus account. (You can use their paid-for upgrades if you’re interested, but there’s no need to.) You can add more than one site, but this article assumes you have at least one!

Once you have an account, you register your Wolf site by using the “+Add” button in the left sidebar of your Dashboard (default view, once you have registered). It takes only three short steps:

  1. your site’s URL and identifier (keep a note of the “shortname” you choose);
  2. options for various settings for comments on that site; and
  3. finally, a page with installation instructions for a variety of sites and systems.

We will be using the one at the bottom, the “Universal Code”. Click on it to open those instructions.

Now we get ready to do a little bit of going back-and-forth between the Disqus instructions, and Wolf’s backend.

Adding Comments to the Layout

Go back to your Wolf site, and open the Layout for editing. Find the location where you want the comments to appear.

First, we insert two, nested “if” statements:

<?php if (Plugin::isEnabled('comment')) : ?>
    <?php if ($this->comment_status == Comment::OPEN) : ?>
...
    <?php endif; ?>
<?php endif; ?>

The outer “if” keeps the rest of the code from throwing an error if the Comments plugin is disabled for some reason. The inner “if” allows us to use the comments setting when editing a Page in Wolf. If comments are “open”, the rest of the code (soon to be inserted!) will appear; otherwise, it won’t.

Next, we go back to the Disqus site to get the install code. Follow the instructions given there to customize the generic code for your own site. Then copy all of the “Embed Code”, return to Wolf, and paste it into the empty space in the middle of our two “if” statements:

<?php if (Plugin::isEnabled('comment')) : ?>
    <?php if ($this->comment_status == Comment::OPEN) : ?>
[PASTE THE DISQUS EMBED CODE IN HERE!]
    <?php endif; ?>
<?php endif; ?>

Save (and continue editing) your layout.

Within the Disqus embed code, you have two options for “linking” your article with its comments, either by id or url:

// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';

Linking it by “id” is easier and more reliable and this is how you do it:

var disqus_identifier = '<?php echo $this->id(); ?>';

A side note: If you don’t link it with “id” or “url” your comments will remain same on all your pages.

That’s all we need for adding comments, but we’ll probably want to display comment counts as well…

Adding the Comment Count

Back to the Disqus site. After the “Embed Code”, Disqus gives you some more code to enable tracking the number of comments on a given page or article. We follow their instructions: copy the javascript code block, return to Wolf, and paste it into your Layout, just before the closing </body> tag. Save the Layout.

Now to display the count of comments. One good place is on the monthly archive page (as it appears in a default Wolf installation). Under the “Articles” page, there is one with the name “%B %Y archive” — that’s the one we want. Open it for editing, and we see the lines:

<p class="info">
Posted by <?php echo $archive->author(); ?> on <?php echo $archive->date(); ?>
</p>

Before the closing </p> tag, we’ll add in our comment count — if comments have been “opened” for that page:

<p class="info">Posted by <?php echo $archive->author(); ?> on <?php echo $archive->date(); ?> 
<?php if ($archive->comment_status == Comment::OPEN) : ?>
  with <a href="<?php echo $archive->url(); ?>#disqus_thread"> </a>
<?php endif; ?>
</p>

(There’s no need to put in text for your a href anchor — Disqus will take care of that for you.)

As the Disqus install page explains, the important step is “appending #disqus_thread to the end of the href attribute of your links”, and you can see that’s what our additional line includes.

Don’t forget to save your page!

Ready to Go!

Disqus is now installed and is ready to use. When you want to include comments on a page or article, just set the “Comments” drop-down under the page editing area to “Open”. Disqus will do the rest!

There are other formatting and configuration options you can set with Disqus, and these are described on the Disqus site itself. These can be explored whenever you like.

blog comments powered by Disqus