Wednesday, February 26, 2014

How To Add Multiple DISQUS Threads On Same Page Using Codeigniter ?

Recently, I came around a problem with the Disqus comment system while I needed multiple disqus comment threads on one page. I have solved my problem using following method.

You can add multiple or several disqus threads on same page using little trick. You can read about reset method in Using Disqus on AJAX sites

Let's start with the control set for loading the Disqus module in a form of a "show comments" link below each individual post that would point to some function outside and pass all the necessary attributes for loading Disqus for the first time or resetting it with new parameters if it was already loaded.

We need disqus_identifier that tells Disqus how to uniquely identify the current page and disqus_url that tells Disqus the location of the page for permalinking purposes.

<div class="wrapper-1">
<a onclick="loadDisqus(jQuery(this), 'upcoming', '<?php echo base_url()."#!upcomingEvents"; ?>');">
Show comments</a>

<div class="wrapper-2">
<a onclick="loadDisqus(jQuery(this), 'future', '<?php echo base_url()."#!futureTrends"; ?>');">
Show comments</a>

Armed with the controls, let's create a generic outside function that seals the deal. Put that in a file somewhere, in the page header or anywhere you like.
<script type="text/javascript">
var disqus_shortname = 'your-sites-short-name-in-disqus';
var disqus_identifier;
var disqus_url;

function loadDisqus(source, identifier, url) {

if (window.DISQUS) {
   /** if Disqus exists, call it's reset method with new parameters **/

  reload: true,
  config: function () { = identifier.toString();    //important to convert it to string = url;
} else {
//insert a wrapper in HTML after the relevant "show comments" link

   jQuery('<div id="disqus_thread"></div>').insertAfter(source);
   disqus_identifier = identifier; //set the identifier argument
   disqus_url = url; //set the permalink argument
   //append the Disqus embed script to HTML
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://' + disqus_shortname + '';
While using DISQUS.reset method, you must follow following requirements
Both variables and
Full hashbang #!