TheTechPie
Disqus on Blogger

How to Install DISQUS on Blogger

DISQUS with over 3 MILLION active installs, is probably the most famous commenting system on the internet!
Previously, I had published an article on Top 5 Commenting Systems For Blogger
Considering how people face issues with Blogger Template platform, here’s a How-To guide on Installing Disqus on Blogger

 

There are 2 different methods to Install Disqus on Blogger, I would suggest you to the way Disqus recommends.

How To Install Disqus on Blogger

  • First of all Sign up on Disqus
  • After setting up your account, Register your Website on Disqus
Disqus site setup
DISQUS Site Setup
Click on Next button and you’ll be redirected to a website like this:
Disqus Setup
Disqus Setup for different Platforms
Select Blogger as of now. I’ll also post on how to setup on Blogger with Universal Code (just in case)
As soon as you click on Blogger, you will be redirected to a page like this
disqus blog setup
Disqus Blog Setup
  • Click on Add ‘xyz’ to my Blogger site. After this, you’ll be redirected and asked to Disqus Comments widget in Blogger, Click on Add Widget button to add it!
Disqus widget for Blogger
Disqus widget for Blogger
  • After Adding the Disqus Widget, go back to Disqus Admin Dashboard and Import your existing comments on it!
It’ll start the Sync process for your Comments and soon it’ll display on your blog in Disqus layout!
That’s all on how to add it through the Easy way..

How to Install Disqus on Blogger (Manual Method)

    1. Go to Blogger Layout section and click Add a gadget (preferably in the sidebar)
      Disqus Gadget
      Disqus Gadget
    2. Click on Add a Gadget and select HTML/Javascript gadget!
    3. Enter Title as Disqus and paste the following code

<!-- Disqus on blogger comments gadget -->

  1. Save the Gadget and it’ll close!
  2. Click Save Arrangement button

Add Disqus Code to your template

    1. Go to your blogger blog’s Template section, click on Edit HTML button.
    2. Search for the newly created Disqus Widget by pressing Ctrl + F or Command-F (MacOS) and then type Disqus on blogger
      You’ll find something like this
      <b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>
    3. To make your Disqus system mobile friendly(recommended), add the following code!
      <b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>
    4. Now you’ve to delete the code below it manually. It’ll look like this <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <data:content/>
      </div>
      <b:include name='quickedit'/>
      </b:includable>
    5. Replace the following code with the one you just deleted. Make sure you replace THETECHPIE with your channel/forum name. You can find it in your Disqus Admin Dashboard!
      <b:includable id='main'>
      <script type='text/javascript'>
      var disqus_shortname = &#39;THETECHPIE&#39;;
      var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;if (!disqus_blogger_current_url.length) {
      disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
      }var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
      var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
      </script><b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
      #comments {display:none;}
      </style><script type='text/javascript'>
      (function() {
      var bloggerjs = document.createElement(&#39;script&#39;);
      bloggerjs.type = &#39;text/javascript&#39;;
      bloggerjs.async = true;
      bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
      })();</script>
      </b:if>
      <style type='text/css'>
      .post-comment-link { visibility: hidden; }
      </style><script type='text/javascript'>
      (function() {
      var bloggerjs = document.createElement(&#39;script&#39;);
      bloggerjs.type = &#39;text/javascript&#39;;
      bloggerjs.async = true;
      bloggerjs.src = &#39;//&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
      })();
      
      </script>
      </b:includable>

 

  • Now save the template and visit your blog to make sure Manual process worked!

 

Conclusion

Disqus is the best third party commenting system for Blogger blogs! Anybody who was looking for how to add diqus on blogger or setup disqus on blogger must have found their solution!
If you’re facing any issue, comment down below and we’ll help you!
TheTechPie

Hey There!

Subscribe to our mailing list and get interesting tech stuff, updates and giveaway right into your email inbox.

Sanket Maheshwari

I'm a tech enthusiast who sometimes writes on his blog!

4 Comments

  1. Md.Arman October 8, 2016
    • Sanket Maheshwari October 22, 2016
  2. Josh November 20, 2016
    • Sanket Maheshwari November 24, 2016

Leave a Reply

We’re Social

Hey! Make sure you are following us!