How to Add Disqus Comments Widget to Your Blogger Blog

Disqus has many integrations available which make installation easy. The most popular integrations also come with built-in importing and syncing tools so you can bring in your old comments as well. Before installing, make sure you have registered a Disqus shortname, and this will be used to reference all of your comments and settings.

Install Disqus Comments Widget

If You want to Install Disqus widget in your website/blog mannulaly then you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won’t work with Dynamic Views templates. Follow these steps:

1. Go to your Blogger “Layout” section and click Add a gadget in the sidebar

2. In the Add a Gadget popup, scroll down to find the HTML/Javascript gadget and click the + button

3. Enter Disqus as the title and the following code for the content:

<!-- Disqus comments gadget -->

4. Click save and the window will close

5. Click Save arrangement in the Layout viewer

Add the Disqus code to your template

1. Go to your blog’s Template section, click “Edit HTML“, and then click the “Edit template” button

2. Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F then typing Disqus. You should find the following line:

<b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>

3. Change that line to add mobile=’yes’ to load Disqus on your mobile template. It will look like this when you’re done:

<b:widget id=’HTML1′ locked=’false’ mobile=’yes’ title=’Disqus’ type=’HTML’>

4. Below that locate and DELETE the following code right before the closing tag. The section you’re deleting should 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. Before the closing  </b:widget>  tag, add the following Disqus code (remember to replace “EXAMPLE” with your forum shortname and be sure to leave ‘&#39;’ in front of your shortname and ‘&#39;;’ after it.):

<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = &#39;EXAMPLE&#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;http://&#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>

6. Click Save template. Assuming there are no errors, Disqus should properly show up on your site now.

7. (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards.