Install Disqus Comment Widget into Blogger Manually.

Disqus is most popular comment management system. Disqus comment system is compatible with search engine optimization. Comment from disqus are easy crawled by Google bot and other popular search engine. Now more that 750,00 website are using disqus comment management system. Disqus provide plugin for installation disqus comment in Blogger, but some time plugins are not installed. That time you need to install manually. One mistake is happened in manual installation is, disqus comment system is see on the index page also. So I tell you step by step how to install disqus comment correctly in blogger manually.

1. Login to Blogger.
2. Go to Layout > Add a Gadget.
3. Select HTML/JavaScript Gadget.
4. Now Login to Disqus.
5. Goto Setting > Install.
   
   
   
6. Select Blogger Platform.
   
   
   
7. Click on the Add to my Blogger Site.
   
   
   
8. Copy the content from "Edit Content".
   
   
   
9. And Paste into HTML/Java Script Gadget with title as Disqus and Save this Gadget.
10. Now go to Template > Edit HTML > Check Expand Widget Template.
11. Search for Disqus (if you given different name for HTML/JavaScript Gadget, then search with this name). then you look like this code.

    <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. Delete the code in between tags
    

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

    and

    </b:widget>

13. Now copy the second code from Disqus which is below Edit content named as Edit Template.
    
    
    
14. And paste code in between tags mention at the step 12.
15. Which is look like this

    <b:widget id='HTML5' locked='false' title='Disqus' type='HTML'>
            <b:includable id='main'>
                <script type='text/javascript'>
                    var disqus_shortname = 'growinfotech';
                    var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
                    if (!disqus_blogger_current_url.length) {
                        disqus_blogger_current_url = "<data:blog.url/>";
                    }
                    var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
                    var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
                </script>
                <b:if cond='data:blog.pageType == "item"'>
                    <style type='text/css'>
                        #comments {display:none;}
                    </style>
                    <script type='text/javascript'>
                        (function() {
                            var bloggerjs = document.createElement('script');
                            bloggerjs.type = 'text/javascript';
                            bloggerjs.async = true;
                            bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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('script');
                        bloggerjs.type = 'text/javascript';
                        bloggerjs.async = true;
                        bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                    })();
                    </script>
            </b:includable>
    </b:widget>

16. And save template.

You done it. I hope help to install disqus comment into blogger without any problem. If you have any problem they feel free to ask.

Updation Credit:
 This post is updated at 31-12-2012 and credit go to Michael Hazell.

Tag :

• Blogging
• Disqus

Share this Post :

• 
• 
• 

Digvijay Todkar

He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger & an addicted Web Developer.know more..

Older Post