How-To: Integrate DISQUS on Blogger/BlogSpot Classic Template


Check for Updates below this guide.
Latest update dated – 2009-04-28TUE.


Maybe you’ve read my HOW TO: Add DISQUS Manually on Blogger/BlogSpot but found out it is for XML-based templates. Fret not, in this HOW TO, we are going to integrate DISQUS on your Blogger/BlogSpot Custom Template!

But first, thanks to Nathan Henderson for sharing the changes he did. I then added a few more edits to give the finishing touch.

Finally, before we begin read this first.

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.

Blogger Classic Template before DISQUS

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; that shows up on your main page)

Code:

><$I18NNumComments$>

OR

Code:

><$BlogItemCommentCount$> Comments

Step 2.2 Change to:

Code:

View Comments »

OR

Code:

View Comments »

======== STEP 3 ========

Step 3.1: Look for:
(this is for: the 0 Comment; 1 Comment; 10 Comments; that 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 )

Code:

<$I18NNumComments$>:

OR

Code:

<$BlogItemCommentCount$> Comments:

Step 3.2: Change to:

Code:

Comments:

OR

Code:

Comments:

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

Step 4.1: Look for:

Code:

<$BlogItemCreate$>

Step 4.2: Change to:

Code:

Step 4.3: Look for:

Code:

<$BlogItemFeedLinks$>

Step 4.4: Change to:

Code:

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

Step 5.1: Look for:

Code:

Step 5.2: Add ABOVE/BEFORE:

Code:

    
    
    <$BlogItemTitle$>
    <$BlogItemBody$>
    
    
    
    [a class='dsq-brlink' href='https://disqus.com']blog comments powered by Disqus[/a]
    

Step 5.3: From the Step 5.2 code, change the DISQUS-SHORT-NAME to well, your blog’s DISQUS URL.
Example: If your DISQUS URL is LibreSoftware.disqus.com then change DISQUS-SHORT-NAME to LibreSoftware, there are two to change!

======== STEP 6 ========

Step 6.1: Look for:

Code:

Step 6.2: Add ABOVE:

Code:

  

Step 6.3: From the Step 6.2 code, change the DISQUS-SHORT-NAME to well, your blog’s DISQUS URL.
Example: If your DISQUS URL is LibreSoftware.disqus.com then change DISQUS-SHORT-NAME to LibreSoftware, one to change here.

======== STEP 7 ========

Step 7: Copy your finish 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 forces your browser to fetch all files from the server.

YOU’RE DONE!!

These edits are designed to still show the comments posted via your built-in comment system while at the same time, disabling any new comments from being posted via your built-in comment system (by removing the link).

Special note: The ## Comments won’t show up on your frontpage for some reason, or maybe it’s just on the Classic Template I used. I am not sure if it’s the same case with other Classic Template-based templates. (If anyone knows how to make it work, share it to the community!)

You can also find the DISQUS API for the adventurous and wanting more SEO power by clicking here.

Hope that helps!

Here is a live Google Blogger/BlogSpot using a Classic Template with Disqus enabled:

Blogger Classic Template after DISQUS


If you are using XML-based Blogger/BlogSpot template, read this instead.


UPDATE 2008-06-14SAT:
1) Updated the instructions to include the older Classic Template codes
2) Updated Step 6, the reason why the ## Comments is not showing up, as previously mentioned, was because I missed to change one instance of DISQUS-SHORT-NAME, 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 ^_^ ).

UPDATE 2009-04-28TUE:
Corrected Steps 5.2 and 6.2, credits goes to chrisdfeld.

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 *