Load disqus dynamically using an _id
or fallback to current URL.
meteor add webtempest:disqus
First initialize disqus and pass in your shortname (you will need to create a new 'Site' in Disqus to get this). You can do this anywhere - just make sure it's only on the client. You also don't have to attach it to the window.
window.disqus = new Disqus('your_shortname');
Make sure your template has the <div>
that holds your comment thread (yes the id
MUST be 'disqus_thread'):
<div id="disqus_thread"></div>
In your javascript, load the comments (usually in your onRendered
callback):
Template.blogPost.onRendered(function(){
disqus.loadComments();
});
You can pass in the following (optional) options to loadComments
.
identifier
A unique id for your comment thread - defaults to current URL. I recommend passing in the _id
of whatever database object your showing.
title
A title for the comment thread. Defaults to page <title>
.
url
URL of current page. Defaults to window.location.href
. I wouldn't bother with this.
category_id
The category used for the current page. I don't really know what this is for so don't worry about it.
Most common usecase:
Template.blogPost.onRendered(function(){
var post = Posts.findOne(idFromRouter);
disqus.loadComments({
identifier: post._id,
title: post.title
});
});
Maybe on your home page you want to display the number of comments for a particular thread.
There are two ways of specifying where you want your count
to be in your html.
Find the <a>
tag you want to display your comments and make sure the href
attribute follows this pattern:
url_of_comment_thread#disqus_thread
So if you had a blog post and it is sitting on the URL http://yourblog.com/posts/my-post
, then your <a>
should be:
<a href="http://yourblog.com/posts/my-post#disqus_thread"></a>
Then in your javascript, run this AFTER your template has rendered:
disqus.loadCounts();
This simply downloads the disqus counts script, which will look over your code for these kinds of URLs and replace the contents with "3 comments" or whatever your comment count is. You can change what is actually written in your Disqus admin - eg. you can make it say "3 amazing comments" or something.
If you want to use a <span>
or something to show your comment count, the element needs two things:
- a
class
of "disqus-comment-count" - a
data
attribute - can either bedata-disqus-url
ordata-disqus-identifier
(depending on whether you pass in identifiers or not in yourloadComments()
calls)
Example: if you rely on URLs as identifiers:
<span class="disqus-comment-count" data-disqus-url="http://yourblog.com/posts/my-post"></span>`
Example: if you pass in real identifiers (like an _id
of a blog post):
<span class="disqus-comment-count" data-disqus-identifier="article_1_identifier"></span>`