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.
66 Responses
I'm guessing this works here? Woah, nice preview
Cool. Awesome work. I tried something similar before but didn't know that Blogger identity can work too.
Cool. Awesome work. I tried something similar before but didn't know that Blogger identity can work too.
Cool. I'm struck by this hack.
I will insert this hack.
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.
Finally,the best comment form.
Some suggestions,
1.Can you bring the preview thing down,to be displayed below the comments form.
2.Add,gravatar support.
@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.
Cool.
Well done!
This thing is screwing up my template Minima.Can you edit an Minima template insert this and upload it sowewhere?Please.
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
This thing is also screwing up my template.Can I send you the code as an attachment by e-mail to your GMail id?
awesome hack!
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!
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!
I'm hooked. I'll have to play with this!
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.)
Thanks Paul for fixing the "sign in as different user" option.
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.
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).
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.
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.
If you're being redirected to the blogger comment page on clicking "Publish Your Comment" check "no" on Image Verification under Settings > Comments
If there is auto preview what is the need of a separate preview button?
How do I remove the post a comment that appears on the main page?
Testing
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.
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.
It's up and running! Thanks for another great hack.
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!
Whoops. A URL would help.
http://howmanywords.blogspot.com
@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
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
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
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
Hey Singpolyma, the hack is working, but I'm getting some strange page-reloads and loss of coComment funtionality…any suggestions? (BitterSweetLife)
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.
Something else–you left a comment on my post–did you delete it?
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?
Ok. Ignore that, about you commenting. I'm an idiot. Moderation for the ignorant. Sigh.
@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.
testing this
Try this one
test for blogger
testing
testing
testing for blogger
testing
testing again.
testing again.
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
test
test.
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
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.
whatever
aeqweqweqwe
Woot
one more imte
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?
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!
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!
Hi! I cant get this hack to work in my blog (see the url above). everytime I open the site in IE, the Iexplore.exe uses 100% cpu and hangs, with firefox it works, but when you click submit comment nothing happens. Removing the CO .js file from the script made the IE stop crashing, but no lucky when you click the submit comment.
Btw, what is the service you use here in your site for comments? I really liked this "notify me" option
@TioSolid – This is WordPress. Regarding this hack — due to the fact that old blogger is not supported by Blogger themselves anymore and that they may have changed things to break this since then, I really can't support this anymore. It simply is too buggy with the say their new system works. For a hack for the new blogger see this page.
wow nice script!