How to use Disqus in AngularJs

If you have ever added Disqus platform in your site, you should know Disqus provides a universal code which you can add in your site and Disqus will work flawlessly, it looks like this,

Disqus universal script

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'yourshortname';
    
    /* * * 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="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

Here is the bad news for AngularJS developers, if you add the same script in your angular website it will not work, the way angular works, it won't let Disqus script to execute, so how to fix this problem, well there are workarounds but here is the best solution I have found.

Prerequisites

You need to register your site to Disqus before you can add it to your site, head over to Disqus site if you have not registered yet.

Using  dirDisqus directive

Recently I came across this directive by Michael Bromley , that makes painful Disqus integration in angular app really easy, all you need to do is to add dir-disqus directive, give it few attributes and you are basically done.

Getting dirDisqus directive

Head over to  dirDisqus repo in GitHub and download dirDiscquss.js file and put it in the folder where you put your JavaScript files, that's all we need to do for now.

Using dirDisqus directive

Before we can use dirDiscuss directive we need to add it in our markup.

<!DOCTYPE html>
<html lang="en" ng-app="app"> 
<head>
	<meta charset="UTF-8">
	<title>Disquss Example</title>
	<script type="text/javascript" src="js/bower_components/angular/angular.min.js"></script>
	//adding dirDisqus script
    <script type="text/javascript" src="js/dirDisqus.js"></script>
</head>
<body>

	
</body>
</html>

Now we are ready to place dir-disqus directive in our page,  first add dir-disqus element on the page where we want Disqus to show up, which is usually at the bottom, let's also warp it with DisqusController. 

<div ng-controller="DisqusController as disqus">
	<dir-disqus disqus-shortname="yourshortname"
				disqus-identifier="{{ disqus.identifier }}"
				disqus-title="{{ disqus.title }}"
				disqus-url="{{ disqus.url }}"
				>
	</dir-disqus>
</div>

Note: This directive primarily needs four main attributes to work,

disqus-shortname: The name you can choose when  your register your website in Disqus

disqus-identifier: Unique id of your page which Disqus will use to show comments

disqus-title: Title of your article

disqus-url: URL of your current page

There are few more attributes which you can use, but they are not mandatory, read the documentation for full API.

We will get the value of these attributes from DisqussController which we are also going to create.

(function() {
    //getting dirDisqus module as dependency
	var app = angular.module('app', ['angularUtils.directives.dirDisqus'], ['$locationProvider', function ($locationProvider) {

		$locationProvider.html5Mode(true);
		$locationProvider.hashPrefix('!');
	
	}]);
	
	app.controller('DisqusController', function() {
		var vm = this;
		
		vm.title = 'Some title';
		vm.identifier = 'some identifier';
		vm.url = window.location.href;
	});
	
		
}());

That's it guys, now you can use Disqus in you site, you can also modify your code to directly print the value of disqus-identifier, disqus-title and disqus-url from you PHP or any server side language you are using.

If you liked this post, hit the Social Buttons Below and share with your friends, now if you have any question, suggestion or any thoughts,  feel free to ask us in the comment section below.

Something to say? Tell us in comment section.