Disqus comments on Blogger static pages

Disqus is an excellent commenting system but it can be even nicer if you slightly hack their script to better integrate with Blogger, a.k.a. Blogspot. Some times ago, Blogger added the possiblity to have static pages where you can have, for example, an introduction about you, or the index for a given subject largely discussed in the blog. To see what I mean, have a look at the links just underneath this page header. At the beginning, static pages where though to be static indeed, no interaction from the readers was foreseen, that is to say, no comment can be left.

Recently, Blogger changed this attitude and now the blog administrator can change on a page by page basis the option to show or not the comment box. Be aware that if you have Disqus and you enable comments on static pages, you will end up having the native blogger interface for comment posting. This is a "feature" - it is too easy to fix to be called a bug! - of the way the Disqus script is working. In fact, the script is checking if the visitor is browsing the front page or a specific article, that in the Blogger nomenclature is called 'item'. A static page is not an item and definitely not the index page and so Disqus script doesn't know what to do and it does nothing allowing the native interface to show up.


To cure this lack, you just need to teach the Disqus widget to take care of pages as well as posts. Here is what you need to do.

1. Go to the administration page of your blog, and select the Design tab. You see this in the picture here on the right.
2. Do a full backup of your template because it is always better to be safe than sorry.
3. Click on Edit HTML and confirm you are aware of what you are about to do.
4. Remember to check the "Expand widget" option and search for the word "disqus". You should get to the Disqus widget that you need to modify adding the highlighted lines in the code snippet here below.
   

   <b:widget id='HTML3' locked='false' mobile='yes' title='Disqus for unico-lab' type='HTML'>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <b:includable id='main'>
               <script type='text/javascript'>
                   var disqus_shortname = &#39;unico-lab&#39;;
                   var disqus_blogger_current_url = &#39;<data:blog.url/>&#39;;
               </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>
               <b:if cond='data:blog.pageType == &quot;static_page&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>
   
   

   Do not copy/past everything, but just the highlighted part, otherwise you will be using unico-lab.discus.com instead of your account!
   
5. Save the template. 
6. Now, edit your static pages and click on the gear wheel on the right column to see the option and allow comments, if it was disabled. Re-publish your page and that's all

Enjoy your brand new Disqus comment on static pages and if you find this howto useful, share it!