How To Install DISQUS Manually in Blogger

If you're not a great fan of the default Blogger Comments system then DISQUS is a must for you. DISQUS is the best Comment system available for Websites and Blogs. DISQUS is completely SEO friendly and the comments are easily crawled and indexed by Google bots.
DISQUS provides default installation process for various platforms including Blogger, Wordpress, Tumblr, Javascript (for Websites ). But the failure to add the DISQUS widget to Blogger has become a common problem in recent times. So instead of being dissappointed what we can do is Install it manually with this very simple tutorial. Let's get started -

                             

1. Login to Blogger.

2. Go to Layout > Add a Gadget.

3. Select HTML/JavaScript Gadget.

4. Now Login to Disqus (You need to have a registered account in Disqus)

5. Go to Setting > Install.

                             

6. Choose Blogger as the platform.
                     
                           

7. Click on Add to my Blogger Site.
8. You'll be then redirected to the Blogger Add widget page where you'll find two find two sections -
Edit Content and Edit Template
9. Copy the content from Edit Content and paste it in the HTML/Javascript gadget and Save it. Keep the Title of the gadget as DISQUS (or any other name as you wish).

                     



10. Go to Template (Back up your Template) > Edit HTML > Expand Widget Template
11. Search (CTRL+F) for "DISQUS" (or the Title of the gadget in Step 9). You'll find a code similar to this -

       

<b:widget id='HTML5' locked='false' title='Disqus' type='HTML'>
<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>
</b:widget>

12. Now delete the section of code  between " <b:widget id='HTML5' locked='false' title='Disqus' type='HTML'>" and "</b:widget>"

13. Now copy the code content form the Disqus Edit Template section -

                      

14. Paste the copied code between the tags mentioned in Step 12). Your code will now look similar to this (do not copy this code, code is specific for each website)-

<b:widget id='HTML4' locked='false' title='DISQUS' type='HTML'>
<b:includable id='main'>
            <script type='text/javascript'>
                var disqus_shortname = &#39;infy-lounge&#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;http://&#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>
</b:widget>

15. Save Your Template and you're done !

So that's it for now. Try out your new DISQUS commenting system. And do comment if you find any trouble implementing this. I'm here to help :)