You are on page 1of 11

11/28/2015

How to use Disqus in AngularJs

Ads

(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use-disqus-angula
(http://devartisans.com/articles/use-disqu

How to use Disqus


in AngularJs

If you have ever added Disqus platform in your site, you shouldknow Disqus provide
flawlessly, it looks like this,

disqusuniversal script
HTML
<divid="disqus_thread"></div>
<scripttype="text/javascript">
/***CONFIGURATIONVARIABLES***/
vardisqus_shortname='yourshortname';

/***DON'TEDITBELOWTHISLINE***/
(function(){

vardsq=document.createElement('script');dsq.type='text/javascript';dsq.async
dsq.src='//'+disqus_shortname+'.disqus.com/embed.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body'
http://devartisans.com/articles/use-disqus-angularjs

1/11

11/28/2015

How to use Disqus in AngularJs

);
})();
</script>
<noscript>PleaseenableJavaScripttoviewthe<ahref="https://disqus.com/?ref_noscript"
>commentspoweredbyDisqus.</a></noscript>

Here is the bad news for AngularJS developers, if you add the same script in your an

execute, so how to fix this problem, well there are workarounds but here is the best s

Prerequisites
You need to register your site to Disqus before you can add it to your site, head over

Using dirDisqusdirective

Recently I came across this directive (https://github.com/michaelbromley/angularUt


(https://github.com/michaelbromley)Bromley (https://github.com/michaelbromley)
do is to add dir-disqusdirective, give it few attributes and you are basicallydone.

Getting dirDisqusdirective

Head over to dirDisqus (https://github.com/michaelbromley/angularUtils/tree/mast

dirDiscquss.js (https://github.com/michaelbromley/angularUtils/blob/master/src/di
JavaScript files, that's all we need to do for now.

Using dirDisqusdirective
Before we can use dirDiscuss directive we need to add it in our markup.
HTML
<!DOCTYPEhtml>
<htmllang="en"ng-app="app">
<head>
http://devartisans.com/articles/use-disqus-angularjs

2/11

11/28/2015

How to use Disqus in AngularJs

<metacharset="UTF-8">
<title>DisqussExample</title>

<scripttype="text/javascript"src="js/bower_components/angular/angular.min.js"></script
//addingdirDisqusscript
<scripttype="text/javascript"src="js/dirDisqus.js"></script>
</head>
<body>

</body>
</html>

Now we are ready to place dir-disqus directive in our page, first adddir-disquseleme
bottom, let's also warp it with DisqusController.
HTML
<divng-controller="DisqusControllerasdisqus">
<dir-disqusdisqus-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 registeryour 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 th

(https://github.com/michaelbromley/angularUtils/tree/master/src/directives/disqus

We will get the value of these attributes from DisqussController which we are also go
JAVASCRIPT
(function(){
http://devartisans.com/articles/use-disqus-angularjs

3/11

11/28/2015

How to use Disqus in AngularJs

//gettingdirDisqusmoduleasdependency

varapp=angular.module('app',['angularUtils.directives.dirDisqus'],['$locationProvid
($locationProvider){
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

}]);

app.controller('DisqusController',function(){
varvm=this;

vm.title='Sometitle';
vm.identifier='someidentifier';
vm.url=window.location.href;
});

}());

That's it guys, now you can use Disqus in you site, you can also modify your code to
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
comment section below.

(https://twitter.com/intent/tweet?url=http://devartisans.com/articles/use (http://devartisans.com

discussions

General Discussion About This Article (http://devartisans.com/forum/thread/article-descussion/a

Ask Questions Related This Article (http://devartisans.com/forum/thread/questions-answers/com

Common Errors Related To This Article (http://devartisans.com/forum/thread/errors/common-err

PREVIOUS ARTICLE

How to share data between controllers in Angular

http://devartisans.com/articles/use-disqus-angularjs

4/11

11/28/2015

How to use Disqus in AngularJs

NEXT ARTICLE

How to share data between directives in AngularJ

Don't Miss Out!


Get updates on new articles, and
other great technology stuff.

your@email.com

Subscribe

http://devartisans.com/articles/use-disqus-angularjs

5/11

11/28/2015

http://devartisans.com/articles/use-disqus-angularjs

How to use Disqus in AngularJs

6/11

11/28/2015

How to use Disqus in AngularJs

Top Articles in Angular (http://devartisans.com/categories/angular)


1
How to share data between controllers in AngularJS
(http://devartisans.com/articles/share-data-between-controllers-angularjs)

2
Simple Sidebar navigation example using angular
(http://devartisans.com/articles/sidebar-navigation-using-angular)

3
http://devartisans.com/articles/use-disqus-angularjs

7/11

11/28/2015

How to use Disqus in AngularJs

WYSIWYG Rich Text Editor Using AngularJS


(http://devartisans.com/articles/wysiwyg-rich-text-editor-angularjs)

4
How to submit forms in AngularJs Multiple ways
(http://devartisans.com/articles/angularjs-ways-submit-forms)

5
How to use Disqus in AngularJs
(http://devartisans.com/articles/use-disqus-angularjs)

ARTICLES YOU MIGHT BE INTERESTED IN

(http://devartisans.com/articles/upload-imagedropzone-laravel5)

(http://devartisans.com/articles/working-withgulp-js)

UPLOADING IMAGE USING

WORKING WITH GULP.JS

DROPZONE.JS AND LARAVEL5

(HTTP://DEVARTISANS.COM/ARTICLES/WORKING

(HTTP://DEVARTISANS.COM/ARTICLES/UPLOAD-

WITH-GULP-JS)

IMAGE-DROPZONE-LARAVEL5)

http://devartisans.com/articles/use-disqus-angularjs

8/11

11/28/2015

How to use Disqus in AngularJs

(http://devartisans.com/articles/react-js-propscomponent)

(http://devartisans.com/articles/angularjsways-submit-forms)

REACT.JS PROPS COMPONENT

HOW TO SUBMIT FORMS IN

(HTTP://DEVARTISANS.COM/ARTICLES/REACT- ANGULARJS MULTIPLE WAYS


JS-PROPS-COMPONENT)

(HTTP://DEVARTISANS.COM/ARTICLES/ANGULAR
WAYS-SUBMIT-FORMS)

Something to say? Tell us in comment section.

http://devartisans.com/articles/use-disqus-angularjs

9/11

11/28/2015

How to use Disqus in AngularJs

0 Comments
Recommend

devartisans

Share

gna

Sort by Best

Start the discussion

Be the first to comment.

WHAT'S THIS?

ALSO ON DEVARTISANS

Sending AJAX request from Angular to


Laravel
3 comments 4 months ago

I've got this message

after following everithing in this post(I


have checked it atleast 3 times): POST
http://localhost:8000/api/search 500

Many to many relationship(


belongsToMany )
1 comment 7 months ago

Kenold Beauplan in user.php, the class

should be "User" instead of Role class


Role extends Model { protected
$table='users'; public function roles(){

Working with Dropbox in Laravel 5


2 comments 6 months ago

Aurlio Guedes Thank you. This is a

great tutorial, i am happy with that.

Image Upload in Laravel 5


3 comments 7 months ago

Dy Say FatalErrorException in

C:wampwwwtest-laravel-5projectstorageframeworkviews722a95231a3ecf420
line 20:Class 'Form' not found

GET NOTIFIED WHEN NEW TUTORIAL IS POSTED


your@email.com

http://devartisans.com/articles/use-disqus-angularjs

SUBSCRIBE

10/11

11/28/2015

How to use Disqus in AngularJs

Quick links

Share

Other Links

FORUM

FACEBOOK

LARAVEL

(HTTP://DEVARTISANS.COM/FORUM)(HTTPS://WWW.FACEBOOK.COM/DEVARTISANS)
(HTTP://LARAVEL.COM/)
CONTACT US

TWITTER

ANGULARJS

(HTTP://DEVARTISANS.COM/CONTACT)
(HTTPS://TWITTER.COM/DEVARTISANS)
(HTTPS://ANGULARJS.ORG/)
ABOUT US

GOOGLE

(HTTP://DEVARTISANS.COM/ABOUT)(HTTPS://PLUS.GOOGLE.COM/111720122139625635049/ABOUT)
PRIVACY POLICY
(HTTP://DEVARTISANS.COM/PRIVACY)

Copyright 2015 Devartisans. Website is built using Laravel PHP framework and AngularJS.

http://devartisans.com/articles/use-disqus-angularjs

11/11