Singpolyma - Technical Blog: Asynchronous Comment Form

Singpolyma - Technical Blog

2006-06-08

body

See this page for a similar hack for the new version of Blogger.

This hack does not work with Blogger BETA.

This is a new, partly experimental, upgrade to my inline comments form. Credit goes to Aditya of The Last Word for inspiring this hack. Comments are posted without ever leaving the post page and then the page is reloaded. You never see the Blogger comment page unless there is an error. The form is still coComment compatible and supports posting using your Blogger account :)

Word verification for comments must be turned off (to do this go to the 'comments' tab in your blog settings, scroll to 'Show word verification for comments?' and select 'No')
Turn comment posting by anonymous users on (to do this go to the 'comments' tab in your blog settings, scroll to 'Who Can Comment?' and select 'Anyone')
Insert the following code into the <head> section of your blog template :

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1338954"></script>
<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div>\n';
//]]>
</script>
Insert the following code directly after your <body> tag:

<iframe id="comment_form_target" name="comment_form_target" style="display:none;" onload="if(comment_form) {check_comment_posted();}"></iframe>
Replace the <$BlogItemCreate$> tag with the following code:

<div id="comment_form_preview<$BlogItemNumber$>"></div>

<ItemPage>
<script type="text/javascript">

var blogTool = "Blogger";
var blogURL = "<$BlogURL$>/";
var blogTitle = "<$BlogTitle$>";
var postURL = "<$BlogItemPermalinkUrl$>";
var postTitle = "<BlogItemTitle><$BlogItemTitle$></BlogItemTitle>";
var commentAuthorFieldName = "anonName";
var commentAuthorLoggedIn = "false";
var commentFormID = "cformtag<$BlogItemNumber$>";
var commentTextFieldName = "postBody";
var commentButtonName = "post";
var cocomment_force = false;

</script>
<script id="cocomment-fetchlet" type="text/javascript" src="http://www.cocomment.com/js/cocomment.js"> </script>
</ItemPage>

<ItemPage><a href="javascript:toggleitem('cform');">Post a Comment</a>
<div style="display:block;" id="cform"></ItemPage>
<MainOrArchivePage><a href="javascript:toggleitem('cform<$BlogItemNumber$>');">Post a Comment</a>
<div style="display:none;" id="cform<$BlogItemNumber$>"></MainOrArchivePage>
   <form target="comment_form_target" id="cformtag<$BlogItemNumber$>" action="http://www.blogger.com/login-comment.do" onsubmit="comment_form_submit(this);isSubmit=true;" method="post"><div>
      <input type="hidden" name="blogID" value="<$BlogID$>" />
      <input type="hidden" name="postID" value="<$BlogItemNumber$>" />
      <div>
         <h2 class="sidebar-title form-title"><label class="cbody">Leave your comment </label></h2>
         <h2 class="sidebar-title"> You can use some HTML tags, such as <b> <b>, <i>, <a> </b> </h2>
         <textarea name="postBody" class="comment" rows="8" cols="40" onkeyup="comment_form_preview(this.form);"></textarea>
         <h2 class="sidebar-title identity"> Choose an identity </h2>
         <div>
            <div>
               <input id="idenBlogger<$BlogItemNumber$>" type="radio" name="iden" value="Blogger" checked="checked" onchange="toggleitem('cfo<$BlogItemNumber$>');comment_form_preview(this.form);" />
               <label> Your Blogger display name </label>
            </div>
            <div>
               <input type="radio" name="iden" value="Other" onchange="toggleitem('cfo<$BlogItemNumber$>');comment_form_preview(this.form);" />
               <label>Other</label>
               <div style="display:none;" id="cfo<$BlogItemNumber$>">
                  <table style="margin-left: 4em;" cellpadding="0" cellspacing="0">
                  <tr> <td colspan="2" style="padding-top:.4em;position:relative;left:-4em;" align="left"> These fields are optional, but I would appreciate it if you filled them out. </td></tr>
                  <tr> <td> <label> Name </label> </td>
                  <td> <div class="errorbox-good"> <input type="text" name="anonName" value="" maxlength="100" class="text" /> </div> </td> </tr>
                  <tr> <td> <label> Your web page </label> </td>
                  <td> <div class="errorbox-good"> <input type="text" name="anonURL" value="" maxlength="100" class="text" /> </div> </td> </tr>
                  </table>
               </div>
            </div>
            <div class="diff-user"> Or you can sign in <a href="http://www.blogger.com/login.g?r=http%3A%2F%2Fwww.blogger.com%2Fcomment.g%3FblogID%3D<$BlogID$>%26postID%3D<$BlogItemNumber$>"> as a different user</a>.</div>
         </div>
      </div>
      <div class="errorbox-good"> </div>
      <p class="buttons">
         <input style="margin-right:.3em" name="post" value="Publish Your Comment" class="publish" type="submit" tabindex="2" />
         <input value="Preview" type="submit" name="preview" tabindex="3" />
      </p>
   </div></form>
</div>
Save your template and republish your blog

Note to advanced users : The variable set in step 3 is the template used by the script to generate previews. You can modify it to be closer to the code generated for comments on your blog so that users get a better preview :) Some may also wish to browse the JavaScript source.

Tags:

Singpolyma at Thursday, June 08, 2006 | 66 | 0 Backlinks | permalink

There is an RSS Feed for comments on this post.

Comment at 08 June, 2006 10:06 by Trevor

body

I'm guessing this works here? Woah, nice preview :)
Comment at 08 June, 2006 18:24 by Venkataramani

body

Cool. Awesome work. I tried something similar before but didn't know that Blogger identity can work too.
Comment at 08 June, 2006 18:24 by Venkataramani

body

Cool. Awesome work. I tried something similar before but didn't know that Blogger identity can work too.
Comment at 08 June, 2006 18:45 by cool

body

Cool. I'm struck by this hack.
Comment at 08 June, 2006 20:44 by cool

body

I will insert this hack.
Comment at 08 June, 2006 22:02 by Venkataramani

body

Are you sure the "sign in as different user" works? If I click that link, it takes me to this invalid URL.
http://singpolyma-tech.blogspot.com/login.g?r=http://www.blogger.com/comment.g?blogID=18522301&postID=114976179885663779&isPopup=true

I think you need to use the absolute URL "http://www.blogger.com/login.g". I changed it but there's still another problem. Redirection to comment.g doesn't work because of the character '&' in the redirection URL. Post ID is not getting passed to comment.g. Somehow this redirection works in Blogger's page. Please check.
Comment at 08 June, 2006 22:27 by Manas

body

Finally,the best comment form.
Comment at 08 June, 2006 22:51 by Manas

body

Some suggestions,
1.Can you bring the preview thing down,to be displayed below the comments form.
2.Add,gravatar support.
Comment at 09 June, 2006 02:05 by Singpolyma

body

@Manas - If you want the preview area below the comments form, just take this code:

<div id="comment_form_preview<$BlogItemNumber$>"></div>

from the top of step 5 and move it to the bottom of step 5.

'Gravatar support' as such is not really doable with blogger, because comments cannot harvest your email address (even if I put a field for it, where would the data go?) However, you can display images for users with Blogger accounts as I do here using this hack

@Venkataramani - have fixed the log in as a different user link :) please let me know if it works for you now.
Comment at 09 June, 2006 03:55 by Taoski

body

Cool.
Well done!
Comment at 09 June, 2006 05:02 by Dring

body

This thing is screwing up my template Minima.Can you edit an Minima template insert this and upload it sowewhere?Please.
Comment at 09 June, 2006 06:25 by Singpolyma

body

Could you give me a link to your blog so I can take a look at the code and debug? It's hard to do anything if I don't know exactly what your code looks like :)
Comment at 09 June, 2006 07:29 by Manas

body

This thing is also screwing up my template.Can I send you the code as an attachment by e-mail to your GMail id?
Comment at 09 June, 2006 08:24 by makes me eager to comment

body

awesome hack!
Comment at 10 June, 2006 00:31 by Aditya

body

Umm, to back Manas here, I think its an extra </div> which is messing up everyone's template. Including yours stephen!

You might wanna have a look!
Comment at 10 June, 2006 06:14 by Singpolyma

body

After reviewing the code, the validator output, and the template sample that Manas sent me I find now trailing </div>. I do, however, find something else that distrubs me. Some of the HTML that is escaped in my post, and remained escaped when I cutn-n-paste to my template, is unescaped in his.

For example, this code:

You can use some HTML tags, such as <b> <b>, <i>, <a> </b>

Is in his template as you see there -- with the tags unescaped. This will cause MASSIVE template screwups. It should be, as in the post above:

You can use some HTML tags, such as <b> <b>, <i>, <a> </b>

I have a suspicion this may have been some other's problem as well. I don't know why people would be getting the wrong code when the post is right, but please check your template for this problem!
Comment at 12 June, 2006 17:28 by Ariel

body

I'm hooked. I'll have to play with this!
Comment at 12 June, 2006 17:33 by Ariel

body

Here's a question, though. Will this be compatible with the peek-a-boo comments hack I currently have installed? (Hack courtesy of browservulsel, i think.)
Comment at 12 June, 2006 20:47 by Venkataramani

body

Thanks Paul for fixing the "sign in as different user" option.
Comment at 13 June, 2006 01:55 by Singpolyma

body

It should be compatible with that hack (you'll note I myself use a form of peek-a-boo comments) however I found with Manas' problems that it was overlapping blogger conditional tags. <ItemPage> tags cannot go inside other identical tags, and <MainPage> certainly cannot go inside them! This may cause some coughing from my hack. If you're having problems and don't understand Blogger templates enough to work with it, try removing all instances of <ItemPage>, </ItemPage>, <MainOrArchivePage>, and </MainOrArchivePage> from step 5.

Some may also be interested in this example Minima-based template modded to use this hack.
Comment at 15 June, 2006 09:48 by Alpeluen

body

Great hack, thank you so much! I've spent ages looking for something to avoid those horrendous comment pages, and this sure does the trick!

My only minor gripes (sort of) are:

1) Page reload after submitting a comment seems a bit unpredictable (both in Firefox and IE). About 10% of the time I get a blank screen, and once my stylesheet was splashed all over the place.

2) Lack of full functionality in Opera (comment submission works well but the items containing the Name/URL fields don't appear upon selecting 'other', meaning comments will be anonymous).
Comment at 15 June, 2006 16:47 by Alpeluen

body

Further to that last comment: it turns out that Opera doesn't support onchange events on a radio element. Alter to onclick for the "Other" button and it'll work nicely in Opera too.
Comment at 16 June, 2006 02:17 by Singpolyma

body

RE buggy page reload - I tested on your blog and it seemed to work just fine for me. Has anyone else been having this problem?

RE Opera - I don't test things in Opera, which is why I didn't notice... Using onclick means that you can hide the Name/URL fields by re-clicking on the other button (even though it's still selected) and that selecting off of it on to Blogger display name again doesn't hide the fields. If there's no other way around it I guess I could try to hack some opera-compatability into the main hack.
Comment at 18 June, 2006 08:23 by audienceone

body

If you're being redirected to the blogger comment page on clicking "Publish Your Comment" check "no" on Image Verification under Settings > Comments
Comment at 27 June, 2006 12:18 by Manas

body

If there is auto preview what is the need of a separate preview button?
Comment at 27 June, 2006 12:26 by Manas

body

How do I remove the post a comment that appears on the main page?
Comment at 03 July, 2006 11:45 by Merolero

body

Testing
Comment at 03 July, 2006 13:49 by Singpolyma

body

Uhh... there is absolutely no need of the preview button... I just was too lazy to remove it. I may do that for a future version :)

If you're referring to the 'post a comment' link on your main page, you must find the <$BlogItemCreate$> tag and delete it.
Comment at 03 July, 2006 13:49 by Singpolyma

body

Uhh... there is absolutely no need of the preview button... I just was too lazy to remove it. I may do that for a future version :)

If you're referring to the 'post a comment' link on your main page, you must find the <$BlogItemCreate$> tag and delete it.
Comment at 09 July, 2006 23:07 by Ariel

body

It's up and running! Thanks for another great hack.
Comment at 11 July, 2006 13:57 by Jen

body

Hey.
I have this on my blog, and it doesn't seem to be working. Aditya sent me, told me to comment and you'd get back to me. Thans in advance!
Comment at 11 July, 2006 13:58 by Jen

body

Whoops. A URL would help.
http://howmanywords.blogspot.com
Comment at 11 July, 2006 15:07 by Singpolyma

body

@Jen - Ning is currently down and thus this hack may experience problems. If the problem persists when Ning is back up I will be happy to take a look :)
Comment at 11 July, 2006 20:39 by danfef

body

i would just like to say thanks! your template is awesome, and the hacks work like charrms on my first try. one question though, how can i change the colours of the template to be two/toned?

thanks
Comment at 11 July, 2006 22:15 by Frank

body

Hey Singpolyma - thanks for backing me up a little on the blogger forum regarding the ABC solution.

Now I am trying your comment fix and it's great but I am missing something. On my itempages I cannot see all of the comments. (want it to look like yours)

here is the site -

dumblittleman.blogspot dot com

Thanks
Comment at 12 July, 2006 08:02 by Singpolyma

body

If you want to display comments on your pages the same way I do here, then the code instructions can be found at http://singpolyma-tech.blogspot.com/2006/04/standard-comment-markup.html
Comment at 12 July, 2006 21:57 by Ariel

body

Hey Singpolyma, the hack is working, but I'm getting some strange page-reloads and loss of coComment funtionality...any suggestions? (BitterSweetLife)
Comment at 13 July, 2006 10:35 by Jen

body

Hey,
I fixed the word verification. Now the comments are going through, but they take a loong time to do so. My status bar says "Transferrig data from singpolyma.ning.com" and just stays there, and does nothing. So when I reload my blog, the comment shows up a few moments later--but it didn't take me there directly. That's also why I posted my URL twice in these comments--I wasn't sure if it went through.

Thanks.
Comment at 13 July, 2006 10:38 by Jen

body

Something else--you left a comment on my post--did you delete it?
Comment at 13 July, 2006 13:08 by Ariel

body

Not to overload you with requests for free tech advice...but my "recent comments" hack seems to have stopped working since I installed this one. Could that be related?
Comment at 13 July, 2006 22:58 by Jen

body

Ok. Ignore that, about you commenting. I'm an idiot. Moderation for the ignorant. Sigh.
Comment at 14 July, 2006 09:10 by Singpolyma

body

@Ariel - There was a minor code bug in step #3 that will have broken recent comments. Sorry about that, I thought I had got rid of it. I will look into the other problems you mentioned more soon -- sorry I've been so slow on this, my ISP is blocking many Blogger functions for some reason :S

@Jen - will try it out ASAP and get back to you :) Again, sorry for the delay.
Comment at 14 July, 2006 09:38 by Max

body

testing this
Comment at 18 July, 2006 03:31 by Tomky

body

Try this one
Comment at 25 July, 2006 03:13 by yee

body

test for blogger
Comment at 28 July, 2006 23:37 by Anonymous

body

testing
Comment at 02 August, 2006 22:09 by aravind

body

testing
Comment at 03 August, 2006 05:43 by Anonymous

body

testing for blogger
Comment at 03 August, 2006 07:25 by Anonymous

body

testing
Comment at 04 August, 2006 00:30 by test

body

testing again.
Comment at 04 August, 2006 00:31 by the tester

body

testing again.
Comment at 11 August, 2006 10:46 by Lori

body

The toggle for the "other" radio button doesn't work on my blog. I'm not sure if it's because most of my CSS is hosted via a server and therefore not directly in my template, or because the code is incorrect.

At this point, I think I've screwed up my code...can you check it to see?

Site: http://whatwomenreallythink.blogspot.com
Comment at 16 August, 2006 05:19 by test

body

test
Comment at 20 August, 2006 14:11 by paulie

body

test.
Comment at 14 September, 2006 10:44 by 8O

body

is there any way to leave that "other" optional always open(don't fold it)?

or is there any way to toggle the radio from blogger to other directly, if someone imput there name and web page in the form
Comment at 14 September, 2006 10:48 by Singpolyma

body

I have seen it done by users of this hack. shouldn't be too hard actually... remove the radio buttons and make a hidden field for the 'Other' button... I may look in to publishing a version that's like that if many users show interest... but most people want users to be able to use their Blogger account, which is why I haven't done so yet.
Comment at 30 September, 2006 15:21 by farted

body

whatever
Comment at 30 September, 2006 15:23 by randy

body

aeqweqweqwe
Comment at 30 September, 2006 15:24 by hello

body

Woot
Comment at 30 September, 2006 15:26 by dude

body

one more imte
Comment at 06 December, 2006 13:21 by Aasitus

body

Hello!

Lots of cool hacks here. I had to bookmark this page instantly.

Homewer, I'm having some trouble with this one. First, the hack breaks the template I use (which happens to be Tictac Blue), but that's not a big problem because I think that's normal and I can fix it myself.

Secondly, the hack doesn't seem to work. After posting a comment I'm redirected to a "Blog not found" page. I upgraded my blog to BETA but reverted back to classic template to try this hack - but since I already did the upgrade, is that what causes the problem or have I made an error somewhere else?
Comment at 06 December, 2006 17:28 by Singpolyma

body

Unfortunately, this hack plain and simple will not work on Blogger BETA. This is something I hope to at least sort of fix soon, since so many people are still requesting it!
Comment at 07 December, 2006 12:45 by Aasitus

body

All right, I just thought it might work with a classic template, but guess I shouldn't have changed to BETA at all :)

Thank you for replying so quickly, and keep up the good work!

2006-06-08

Trackbacks:

0 Backlinks

Syndication

FreshTags

Recent Comments

Archives