How-To: Add DISQUS Manually on Blogger/BlogSpot
- Posted by JC John Sese Cuneta on 05.23.2008
- View Comments »
Check for Updates below this guide.
Latest update dated - 2008-08-23SAT.
If like me you are using DISQUS for your blog or site commenting comments system, then maybe you’ve encountered a problem with integrating it to your custom theme/template. In this simple tutorial, I will show you which code-bits to edit to successfully integrate DISQUS into your Google Blogger/BlogSpot XML-based template. (Basically it’s the same with any theme/template regardless of blog platform or CMS.)
But if you have a Classic Template, then read: HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template instead.
Update (2008/08/23SAT): Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion (thanks to hackcrack ^_^ ).
Update (2008/05/26MON): Chinese version (Taiwan) by Blacktale.
WARNING: Be sure to backup your working template before attempting to overwrite it! And this is recommended only if you are comfortable with HTML editing.
DISQUS on the Official HighStreet5 Community Blog, CSS customized
With that said, let’s begin!
Follow up:
======== STEP 1 ========
Step 1: Add this to your CSS area or CSS file
Code:
// Depending on your template, sometimes on some browsers, disqus doesn't auto-width 100% // | |
#disqus_thread, #disqus_thread #dsq-content { | |
width: 100%; | |
} |
======== STEP 2 ========
Step 2.1 Look for:
(this is for: 0 Comment; 1 Comment; 10 Comments. It shows up on your main page)
Code:
<b:if cond='data:post.allowComments'> | |
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments</a> | |
</b:if> |
Step 2.2 Change to:
Code:
<b:if cond='data:post.allowComments'> | |
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments</a> --> | |
| |
<!-- +disqus --> | |
<a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>View Comments »</a> | |
<!-- -disqus --> | |
</b:if> |
======== STEP 3 ========
Step 3.1: Look for:
(this is for: the 0 Comment; 1 Comment; 10 Comments. This shows up when viewing a specific post.)
(Note: Some templates do not have this, so if you can’t find it, don’t bump your head 
instead, skip to the next step.)
Code:
<b:if cond='data:post.numComments == 1'> | |
1 <data:commentLabel/>: | |
<b:else/> | |
<data:post.numComments/> <data:commentLabelPlural/>: | |
</b:if> |
Step 3.2: Change to:
Code:
<!-- <b:if cond='data:post.numComments == 1'> --> | |
<!-- 1 <data:commentLabel/>: --> | |
<!-- <b:else/> --> | |
<!-- <data:post.numComments/> <data:commentLabelPlural/>: --> | |
<!-- </b:if> --> | |
Comments: |
======== STEP 4 ========
Step 4.1: Look for:
Code:
<div id='backlinks-container'> |
Step 4.2: Usually, above that bit (Step 4.1) you will find this:
Code:
<p class='comment-footer2'> | |
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> | |
</p> |
* Note #1: It may be enclosed on a DIV instead of a P element
* Note #2: Sometimes its arranged differently, just look for any bits as shown on Step 4.1, also be sure it looks closely similar.
Step 4.3: Once you find it, change it to:
Code:
<!-- <p class='comment-footer2'> --> | |
<!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> --> | |
<!-- </p> --> |
======== STEP 5 ========
Step 5.1: Look for:
Code:
<div id='backlinks-container'> |
Step 5.2: Above it add:
Code:
<!-- +disqus --> | |
<div id='disqus_thread'/> | |
<div id='disqus_post_title' style='display:none;'><data:post.title/></div> | |
<div id='disqus_post_message' style='display:none;'><data:post.body/></div> | |
<script type='text/javascript'> | |
var disqus_url = '<data:post.url/>'; | |
var disqus_title = document.getElementById('disqus_post_title').innerHTML; | |
var disqus_message = document.getElementById('disqus_post_message').innerHTML; | |
</script> | |
<script src='http://disqus.com/forums/DISQUS-SHORT-URL/embed.js' type='text/javascript'/> | |
<noscript><a expr:href='"http://DISQUS-SHORT-URL.disqus.com/?url=" + data:post.url'>View the entire comment thread.</a></noscript> | |
<a class='dsq-brlink' expr:href='"http://disqus.com"'>blog comments powered by <span class='logo-disqus'>Disqus</span></a> | |
<!-- -disqus --> |
Note: If above the code-bit on Step 5.1 there is </b:if>, then put the Step 5.2 code BEFORE </b:if>. If it isn’t there (there are some templates that doesn’t have it in that position), then just add it up.
Step 5.3: From the Step 5.2 code, change the DISQUS-SHORT-URL to well, your blog’s DISQUS URL.
Example: If your DISQUS URL is LibreSoftware.disqus.com then change DISQUS-SHORT-URL to LibreSoftware, there are two to change!
======== STEP 6 ========
Step 6.1: Look for:
Code:
</body> |
Step 6.2: Add ABOVE:
Code:
<!-- +disqus --> | |
<b:if cond='data:blog.pageType != "item"'> | |
<script type='text/javascript'> | |
(function() { | |
var links = document.getElementsByTagName('a'); | |
var query = '?'; | |
for(var i = 0; i < links.length; i++) { | |
if(links[i].href.indexOf('#disqus_thread') >= 0) { | |
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; | |
} | |
} | |
document.write('<script type="text/javascript" src="http://disqus.com/forums/DISQUS-SHORT-URL/get_num_replies.js' + query + '"></' + 'script>'); | |
})(); | |
</script> | |
</b:if> | |
<!-- -disqus --> |
Step 6.3: From the Step 6.2 code, change the DISQUS-SHORT-URL to well, your blog’s DISQUS URL.
Example: If your DISQUS URL is LibreSoftware.disqus.com then change DISQUS-SHORT-URL to LibreSoftware, there is one to change.
======== STEP 7 ========
Step 7: Copy your final code to your Blogger’s Template and Save it.
======== STEP 8 ========
Step 8: Force Refresh your blog and blog-post (usually CTRL+F5) to see the changes.
* Force refreshing tells your browser not to use your browser’s cache, instead fetch the files fresh from the server.
YOU’RE DONE!!
These edits are designed to still show the comments posted on your built-in comment system while at the same time, disabling any new comments from being posted (on your built-in comment system) by removing the link.
If a user knows the direct link to Blogger’s/BlogSpot’s built-in comment system, s/he can still post comments on your blog that way. To effectively disable it without hiding all previous comments, you need to edit the Post Options of each of your posts and change it to “Don’t allow, show existing". Later however, Disqus will have an import feature, so all old comments will be copied to your Disqus as well. Until then, this is the solution and you have to be patient.
There is a way to show the “## Comments” from your built-in comment system, it isn’t included here (did not bother implementing that on the blogs I handle).
Built-In Comments and DISQUS together (on OneWayToSalvation Blog)
You can also find the DISQUS API for the adventurous and who wants wanting more SEO power by clicking here.
Hope that helps!
Here are live Google Blogger/BlogSpot blogs with Disqus enabled:
DISQUS on 心道 (xīn dào) Blog, Blending In
If you have a Classic Template, read: HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template.
Update (2008-05-24SAT): Thanks to Disqus (and) Daniel Ha for featuring this How To article on Disqus! Glad to be of help!!
Featured
Oh, he’s an Asean brother! Aseans rock!!
Update (2008/05/26MON): Chinese version (Taiwan) by Blacktale.
UPDATE 2008-06-14SAT:
1) Updated Step 6, I missed to change a Disqus-URL to DISQUS-SHORT-URL, it was previously pulling data from “highstreet5″. Please check your codes on Step 6.
* Updates thanks to the classic blogger code provided by Daviv Alvarez, you can find his blog at balazos.blogspot.com.
** Was helping him integrate DISQUS, and I caught the code I missed for Step 6.
UPDATE 2008-08-02SAT:
The tutorial was added at DISQUS help forums by Andrew (from DISQUS). Thank you very much and I’m glad to be help to the Community!!
UPDATE 2008-08-23SAT:
Changed /{YOUR-DISQUS-URL}/ to /DISQUS-SHORT-URL/ to avoid confusion (thanks to hackcrack ^_^ ).
If you have other questions, just don’t hesitate to drop-by on the DISQUS forums.
~ DISQUS is the way ~
In General
