Disqus comments with Jquery Mobile

Recently, I started a project that required the use of two very popular components, Disqus Comments and jQuery Mobile. I was able to make them work together and decided to write a tutorial to help others trying to implement these two components.

The issue

Currently Disqus supports mobile devices and loads without any problems in static pages, but there is an issue using Disqus with jQuery mobile. Because new pages are loaded using ajax Disqus has no way to know when a new page has been loaded.

Another issue is how jQuery mobile has two pages loaded in DOM at all the times to accomplish page transitions; if Disqus is loaded on the first page visited on a particular site when the second page is requested Disqus is just hidden away and never removed.

The solution

We need to refresh Disqus every time a new ajax page is loaded and pass the new page information to Disqus and if Disqus is loaded on the first page we need to remove it next time Disqus is needed. For the tutorial we will use Disqus’ Universal code and the ajax code suggested by Disqus.

Initial setup

Add the following code where you want Disqus comments to show

<div id="disqus_thread" class="disqus-ajax"></div>
<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>

Javascript/jQuery

Here is where the magic happens. We assume that you have jQuery and jQuery Mobile already running on the page. First will let jQuery mobile load and we will create a few variables. Make sure to change the site domain and populate the right information for username, email and developer.

jQuery(document).ready(function($){

	var disqus = {name:'',email:'' ,developer:0}

	$( document ).bind( 'pageshow',function(event, ui) {

		//change site name
		disqus_shortname = 'SITESHORTNAME';
		disqus_url = document.location.href;

		disqus_def_name = disqus.name || '';
		disqus_def_email = disqus.email || '';
		disqus_developer = disqus.developer || 0;

	});
});

Now will grab story specific data from the page and will load Disqus. Make sure to change the selector to select the right information. The information bellow can be used with the default WordPress theme.

jQuery(document).ready(function($){

	var disqus = {name:'',email:'' ,developer:0}

	$( document ).bind( 'pageshow',function(event, ui) {

		//change site name
		disqus_shortname = 'SITESHORTNAME';
		disqus_url = document.location.href;

		disqus_def_name = disqus.name || '';
		disqus_def_email = disqus.email || '';
		disqus_developer = disqus.developer || 0;

		if( $('.ui-page-active article.post')[0] ){
			//modify selectors to select corrent data
			disqus_title = $('.ui-page-active #content .title').html().replace(/(]+)>)/ig,"");
			disqus_identifier = $('.ui-page-active #content .node').attr('id').replace('-','/');

			//only load disqus if is not already loaded
			if( typeof( DISQUS ) == 'undefined' )
				$.getScript(  'http://' + disqus_shortname + '.disqus.com/embed.js' );

		}

	});
});

Finally will add the logic to load Disqus on the right page at the right time.

jQuery(document).ready(function($){

	var disqus = {name:'',email:'' ,developer:0}

	$( document ).bind( 'pageshow',function(event, ui) {

		//change site name
		disqus_shortname = 'SITESHORTNAME';
		disqus_url = document.location.href;

		disqus_def_name = disqus.name || '';
		disqus_def_email = disqus.email || '';
		disqus_developer = disqus.developer || 0;

		//make sure we are on a article page
		if( $('.ui-page-active article.post')[0] ){
			//modify selectors to select corrent data
			disqus_title = $('.ui-page-active #content .title').html().replace(/(]+)>)/ig,"");
			disqus_identifier = $('.ui-page-active #content .node').attr('id').replace('-','/');

			//only load disqus if is not already loaded
			if( typeof( DISQUS ) == 'undefined' )
				$.getScript(  'http://' + disqus_shortname + '.disqus.com/embed.js' );

			if( $("#disqus_thread").length = 2  )
				$('.disqus-ajax:has(a)').removeAttr('id').empty();

			if( typeof( DISQUS ) !== 'undefined'  ){
				DISQUS.reset({
					reload: true,
					config: function () {
						this.page.url = disqus_url;
						this.page.title = disqus_title;
						this.page.identifier = disqus_identifier;
					}
				});
			}
		}

	});
});

WordPress / Drupal Download

You can download the final script for WordPress or Drupal. Double check jQuery selectors to be sure that the script works with the theme that you are using.

Drupal download disqus.mobile.drupal
WordPress download disqus.mobile.wp