Inline comments hack

Would you like to be able to feature comments and the comments box beneath your blog posts, Wordpress-style? In this tutorial I will explain how this can be achieved in your Blogger "layouts" template. After you implement this hack, your readers will never have to leave the page to post a comment on your blog!

This is an example of what the inline comments looks like in one of my test blogs (click on the image for a larger version):

You can also see an example of this hack in action on this demonstration blog.

You will be able to change some elements of the inline comments' appearance as I will explain later in this post. For now, let's see how this hack can be done.

How to implement the inline comments hack

Before you do anything to your template, be sure to make a back-up of your existing template. This can be done by going to the Edit HTML page and selecting the "Download Full Template" link near the top of the page. It is always good practise to back-up your template before making ANY changes to it. Then if you make a mistake, you can always revert back to this later.

The following steps will take you through the installation process for the inline comments hack. Be sure to read the instructions carefully and copy the code exactly as it is written.

1. For this hack to work, we will need to change a few settings for your blog. Firstly, go to Settings>Archiving in your Blogger dashboard and ensure that "Enable Post Pages" is set to "yes". This ensures that all of your blog posts are visible on their own page, and ensures that the inline comments will appear, since the iframe containing the comments can only call this once per blog page.
   
   Next go to Settings>Comments and ensure that you have set comments to appear in a pop-up window. This may seem odd considering that we will be displaying comments within the page, but this setting ensures we have a better format for the iframe, as you will see later on.


2. Now that you have the correct settings, let's hack your template to make the inline comments appear. Go to Edit HTML and ensure that "exoand widget templates" is ticked. This means that we can get to the code within the blog posts widget, which is where the settings for your comments are contained.


3. Find this entire section in your blog template:
   
   
   And replace it with this section of code instead:
   
   
   Very little has been done to this section of code, except to add comment code (<!-- like this -->) around the section of comment code we want to hide. This ensures that the correct comment code is generated, but not displayed. Without this present in the template, we can not show the comments at all!
   
   Also, I have added the small iframe section which includes the code to call the comments page and display it beneath the blog post.


4. Now the iframe to display comments is in place, but we just need to make one more adjustment to ensure that the comment link from non-item pages (ie: your front page or search results) directs your readers to the comments on individual item pages.


5. Find this section in your blog template:
   
   
   And replace with this section of code instead:
   
   
   Note that this section of your template may not nescessarily be contained in <span> tags. If this is the case, simply copy the <a class=... section instead.


6. Now save your template and take a look at your new inline comments! When you click the comment link from your home/label/archives/search page, you will be taken straight to the comments section on the individual post page. When you view the post pages themselves, you will easily see the inline comments beneath your blog posts.

You can change some elements of this hack to better suit your blog's style if you prefer. For example, in this default installation, the background color for the iframe is set to #dddddd. You can change this to a different color if you prefer to better complement your template. You can also change the height of the iframe (to display more comments), or could centralize the iframe by wrapping it in div tags with align set to center.

Why this version of inline comments works

Blogger's commenting system is now more secure, and comments can only be made from the actual comments page, rather than inside the post page itself. This decision to make the commenting system more secure was probably to thwart spammers and other malicious attention, though unfortunately this means we cannot implement inline comments very easily, nor can we change the comments page in any way.

The way around this is to feature the comments page in an iframe beneath the post. This means we can display the comments box within the post page, and that readers can leave comments without leaving the page.

Why you may want to install this hack

Your blog's readers are much more likely to make a comment if they do not have to leave the page to do so. It can be quite off-putting to be sent to a new page when you want to leave a comment, so by installing the inline comments you will probably discover that the number of comments increases.

Please let me know if you like this hack, or if you are experiencing any problems installing this in your template. In the near future I will also be posting a peek-a-boo version of this hack which can be used to show or hide comments instead of just displaying by default.

Technorati Tags: inline+comments | comments | blogger | wordpress | template | style