Manually adding a Disqus gadget to Blogg

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.



 Add a new gadget

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 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 (Command-F on OSX) 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 change EXAMPLE to your site's shortname – you should leave both ''' characters on either side of the shortname):
   
   

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

   
   


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. For more information see Troubleshooting Disqus in Internet Explorer 8/9/10