Xen Project

Adding Disqus comments system to your e107 website

30.05.11 | Posted by Leon Lloyd in Development

Disqus is a global comments system which makes building your community easier by allowing your users to comment on your posts in realtime and the ability to integrate with the most popular social networks.

I’m going to show you how to implement the Disqus comment system on your e107 website. Before you do anything you will need to create an account on Disqus and make a note of your ‘forum name’ which is created for you when you create your account. Log in to Disqus and have a look around the settings, these can be changed at any time.

Now you have created your account we can get it working on your e107 site. The implementation of Disqus is very easy and doesn’t require any modification of core files, all we are doing is creating a couple of new shortcodes and adding them to our theme – whichever theme you are using!

Let’s first create a new shortcode file for our comments box. Name the file disqus.sc and add it to your theme’s folder.

global $pref,$tp;

$test= explode('.',e_QUERY);

if (e_QUERY == ''|| $test[0]== 'default')
{
return;
}
else
{

$news_item = getcachedvars('current_news_item');
$mode = ($parm == "extend") ? "extend" : "item";

return "
<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

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = '".SITEURL."news.php?extend.".$news_item['news_id']."';
var disqus_url = '".SITEURL."news.php?extend.".$news_item['news_id']."';

/* * * 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);
})();
</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'>Comments powered by <span class='logo-disqus'>Disqus</span></a>

";
}

Make sure to edit the above code with your forum shortname which was created for you when you created your account. There is no need to make any other modifications. The code above will display the comments under the extended news only.

Your probably going to want to display a link to your comments on your homepage, so lets make a new shortcode for that too. We’ll call this disqus_link.sc, add this to the theme folder too.

global $pref,$tp;

$news_item = getcachedvars('current_news_item');
$mode = ($parm == "extend") ? "extend" : "item";

return "

<a href='".SITEURL."news.php?extend.".$news_item['news_id']."#disqus_thread'>Comments</a>

";

That’s our shortcodes done, now we have to register them in our theme so they display the output. Open you theme’s theme.php file and add the following code anywhere before $layout = “_default”;

$register_sc[]="DISQUS";
$register_sc[]="DISQUS_LINK";

Now find the news style and add your new shortcode to it under the existing EXTENDED shortcode. Your news style should now look something like this:

$NEWSSTYLE = "
<div>
<h2>{NEWSTITLELINK=extend}</h2>
<ul>
<li>Date: {NEWSDATE}</li>
<li>Author: {NEWSAUTHOR}</li>
<li>Category: {NEWSCATEGORY}</li>
<li>{DISQUS_LINK}</li>
</ul>
{NEWSBODY}
{EXTENDED}
{DISQUS}
</div>
";

Clear your site’s cache and your comments system should now be up and running. Disqus has a number of widgets available which can display recent comments, most popular threads and top commenter menus which can be added to your site by simply adding the code supplied to a custom menu.

I hope you find this useful, I personally think the Disqus system is awesome, it has loads of features, my favourite has to be logging in using your Twitter or Facebook account and I haven’t had any of the usual e107 spammers yet, which is a bonus!