Inline Blogger.com Comment Form

Avi Alkalay Web 2.0

  • WARNING: This script is not being supported anymore since I moved to a much better blogging system with WordPress.

If you don’t want your blog visitors to be redirected to blogger.com website just to write a comment for your post, you are in the right place.

This page will show you how to include a comment form directly into your post page, just as you can see in this very page, bellow. After installing this solution in your blogger.com blog you’ll feel an instant increase in the number of comments people write for you, because a comment form right in the face of your visitor is way more intuitive and inviting tsule with nowadays blogger.com interfaces, and stepped out from a hack status into a clean, functional and well documented solution.

PLEASE, write a comment here, including a link to your blog so people can know who else is using this solution.

PLEASE, do not make test in this post. PLEASE, leave it for real comments or support questions. PLEASE, use this post to test the form.

Installing

  1. Download this script and make it available somewhere on your website, for example from the URL http://my.website.com/resources/bloggerCommentForm.js (this is the URL we’ll use in our examples).
  2. Edit your blogger.com template and look for the end of the HTML header marked by the </head> tag.
  3. Right before the header ending include the following piece of code in a way that everything will look like: 
    <ItemPage>
<script type="text/javascript" xsrc="http://my.website.com/resources/bloggerCommentForm.js"  >
</script>

<script type="text/javascript">
// Lets configure the comment form a little bit

// Include some style
commentFormStyle();

</script>
</ItemPage>  </head>
  4. Now you’ll have to place a call to a JavaScript method that will render the form. Scroll down and look for the section on your template that renders the comment. It starts with a <div id=”comments”> tag. This code should be included right after it: 
    <a name="postcomment"></a><h4>Write a Comment</h4>

<script type="text/javascript">
commentForm('<$BlogItemCommentCreate$>');
</script>
  5. Save your template and republish your blog.
  6. Visit one of your posts page, see if the form appears, and try posting some different comments as different users.

Configuring the Form

You can configure the form, specialy for internationalization, in a very clean way without having to change the code. For example, look how it looks in a brazilian portuguese blog post.

  1. For that, edit your template again and look for the script initialization part you just included in the <head> section.
  2. You can define some JavaScript variables that will define the form language and other parametrizations. Copy and paste these defaults to start translating: 
    <script type="text/javascript">

// Lets configure the comment form a little bit

// Include some style
commentFormStyle();

// General parameters
var labelWidth = 80;
var bloggerFormActionURL="http://www.blogger.com/login-comment.do"
var confirmBeforePost = true;

// Language defaults
var bloggerUserLabel = "Blogger.com user";
var otherUserLabel = "Other";
var customUserLabel = "Name or nickname: ";
var urlLabel = "URL: ";
var anonLabel = "Anonymous";
var rememberLabel = "Remember Me";
var postedByText = "Posted by";
var commentButtonText = "Post Comment";
var previewButtonText = "Preview";
var previewWindowTitle = "Comment Preview";
var confirmText = "Post this comment?";
var boldButtonText = "B";
var italicsButtonText = "I";
var linkButtonText = "Link";
var linkPrompt = "Link Text:";
var urlPrompt = "Link URL:";
var quoteButtonText = "Quote";
var quotePrompt = "Use your mouse to select the text"+
" in the comment you want to quote.n"+
"Then press the quote button.";
</script>

Additionally, you may want to change the target links in your template to make them point visitors to the comment form in the post page. For example, I have the following piece of code in my template that renders each post footer:

<p class="post-footer">
<em><$BlogItemDateTime$></em> |
<a xhref="<$BlogItemPermalinkUrl$>"
title="permanent link">permalink</a>
<BlogItemCommentsEnabled>
<a class="comment-link"
xhref="<$BlogItemPermalinkUrl$>#postcomment"><$BlogItemCommentCount$>
comments</a>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a class="comment-link"
xhref="<$BlogItemPermalinkUrl$>#links"  >links to this post</a>
</BlogItemBacklinksEnabled>
<$BlogItemControl$>
</p>

This script is free and licensed under the LGPL.
Enjoy.

24 thoughts on “Inline Blogger.com Comment Form”

  1. great hack!

    but why it shows the blogger comment page instead stay in the same item page?

    is there anything you can do about it?

  2. Thats because the form that appears in your webpage is only a front end to a request on blogger.com website.

    Next version will fix this.

    Stay tunned.

  8. This is awesome. I was looking all over the place for something like this. will post the result once i’ve tried it. thanks heaps 🙂

  16. Somehow I can’t get it to work for me. I tried it with the Rounders 4 template and the Scribe templates on Blogger for my blog. But the comment form refused to show up. I have uploaded bloggerCommentForm.js to my Filexoom acvount and given that url. Any suggestions?

Comments are closed.