Manually Adding Disqus Comment Box On Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Previously we discussed about adding Disqus comment system to Blogger. Now i'll tell you how to add Disqus comment system manually on your blog.

If the Disqus gadget installer isn't working, 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.

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Enter Disqus as the title and the following code for the content:

<!-- Disqus comments gadget -->

• Click save and the window will close....

Now all done in Layout section of your blog, now it's time to move to the Template section.

• Go to your blog's Template section and then click the "Edit HTML" button > Proceed

• Click 'Expand Widget Templates' box

• Search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing Disqus. You should find the following line: 

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

• 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>

• Now before the closing </b:widget> tag, add the following Disqus code

<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;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>

• Now change EXAMPLE to your site's shortname.

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

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.