How-To: Add DISQUS Manually on Blogger/BlogSpot


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:

   Comments

Step 2.2 Change to:

Code:

  
 
  
  View Comments »
  

======== 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 :p instead, skip to the next step.)

Code:

    1 :
  
     :

Step 3.2: Change to:

Code:

    
  
    
Comments:

======== STEP 4 ========

Step 4.1: Look for:

Code:

Step 4.2: Usually, above that bit (Step 4.1) you will find this:

Code:

  

* 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:

  

======== STEP 5 ========

Step 5.1: Look for:

Code:

Step 5.2: Above it add:

Code:

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 ~


Leave a Reply

Your email address will not be published. Required fields are marked *