150 How to add a comment form beneath your blog posts Friday, June 27, 2008 /

Blogger have developed an inline (embedded) comment form which can be enabled through Blogger in Draft. This is probably the most requested feature for Blogger, and I'm sure many of you will want to use this straight away!

To enable inline comments for your Blogger powered blog, you need to log into your dashboard through Blogger in Draft. Then go to Settings>Comments and scroll down the page to see the new "Comment form placement" setting:

Check the radio setting for "Embedded below post" which will enable the display of the comment form below your blog posts.



If you have customized your template, you will need to make a small change to your template code for this comment form to display. But don't worry, it's a very simple customization to make!



Simply go to Layout>Edit HTML in your blog's dashboard and check the "Expand widget templates" box.

Then search for this section of code:

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>

Replace this entire section of code with the following instead:

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>

Then save your template.

Now when you view a post page in your blog, you should see the new comment form in place!



Update: As many of you have pointed out in the comments, not all templates feature the code I've described above.



Luckily, Is has offered a method which is much easier to use, and has worked for every template I've tried so far. So if my original method isn't working for you, try this instead:



Search for this line in your template code:

<b:include data='post' name='comments' />

Immediately after this line, add the following line of code:

<b:include data='post' name='comment-form'/>

Then save your template. This method adds the required code for the comment form without having to alter the whole comment area, and is very useful if you have experienced problems using the original method Thanks for the hint, Is!



If you don't see your comment form, make sure you have changed this setting through Blogger in Draft and have added your code in the correct place in your template.



You can see this comment form in action beneath this post. Using this comment form allows readers to comment using their Google account, OpenID, Name/URL and all of the settings previously available when using a pop-up or full page comment form (depending on the settings you have chosen).



I am very happy to see that Blogger have listened to our requests and have added this great functionality to our blogs. There are also some other new features added to Blogger in Draft including an improved posting page and import/export features which you can read about in the Blogger in Draft blog.



Please let me know what you think of this new feature by leaving your comments below.