Integrating Disqus comments onto an eZ Publish website

Disqus is one of the most popular third-party commenting tools that can be integrated onto your website. There are a few special considerations when implementing Disqus onto a website where an article might have multiple locations and/or the article's URL might change. In this post, we'll walk you through a basic but robust implementation within an eZ Publish site.

Implementing Disqus on your eZ Publish website can be as simple as registering for a Disqus account and embedding the Disqus code in the relevant templates, such as at the bottom of your blog post full view template. However, you should pay special attention to setting the Disqus identifiers and URLs for your pages.

The base Disqus embed code looks like this:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<example>'; // Required - Replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src  = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>
    Please enable JavaScript to view the 
    <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">
    blog comments powered by <span class="logo-disqus">Disqus</span>
</a>

The most important variable is "disqus_shortname", which is set for your Disqus account and uniquely identifies your site.

var disqus_shortname = 'mugoweb';

"disqus_identifier" is an additional variable that is quite important to set.  You want this to be a unique identifier for the page. In eZ Publish, we recommend using the object ID, because this is a reliable, unique identifier for every node / location of that object. This ensures that there is only one comment thread for an object; comments added to the object's nodes will all get added to the same thread. If a node is renamed, moved, or deleted, the object ID will not change. Otherwise, you risk losing existing comments or having multiple threads of comments for the same object.

var disqus_identifier = 'object_{$node.contentobject_id}';

For a similar reason, you should also set the "disqus_url" variable. When you enable Disqus' site discovery features, a list of other articles on your site will appear below the comment box:

To produce this list, Disqus stores the URLs of all of your site's pages based on the "disqus_url" variable. By default, when the "disqus_url" variable is not set, Disqus will use the URLs at which pages are accessed. This can change when locations are added and removed, and when a page is renamed, resulting in broken links. One option is to use the main node URL as the "disqus_url", but a more robust option is to once again use the object ID, this time through a custom module. This custom module will take the object ID and redirect to the main node URL.

We will call the module "redirect" with a view "link". We won't go through all of the details of creating a module here, but there are plenty of other good tutorials on that topic such as this one.

Our "link" view looks like this:

<?php
$http      = eZHTTPTool::instance();
$object_id = (integer) $Params['object_id'];

$object_found = eZFunctionHandler::execute( 'content', 'object', array( 'object_id' => $object_id ) );
if( $object_found )
{
    $node = $object_found->attribute( 'main_node' );
    if( $node )
    {
        if( $node->attribute( 'url_alias' ) !== '' )
        {
            $http->redirect( '/' . $node->attribute( 'url_alias' ) );
        }
    }
}

$Result = array( 'path' => array(), 'content' => ezpI18n::tr( 'disqus', 'There is no such page' ) );

return $Result;
?>

We can then set the "disqus_url" to use our new module's URLs:

var disqus_url = '{concat( 'redirect/link/', $node.contentobject_id )|ezurl( 'no', full' )}';

The final embed code is as follows:

<div id="disqus_thread"></div>
<script type="text/javascript">
{literal}
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname  = 'mugoweb'; // Required - Replace example with your forum shortname
    {/literal}
    var disqus_identifier = 'object_{$node.contentobject_id}';
    var disqus_url        = '{concat( 'redirect/link/', $node.contentobject_id )|ezurl( 'no', 'full' )}';
    {literal}
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src  = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
{/literal}
</script>
<noscript>
    Please enable JavaScript to view the 
    <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">
    blog comments powered by <span class="logo-disqus">Disqus</span>
</a>

Do you have any other Disqus-related or comments-related tips?  Share them below!