Singpolyma

Technical Blog

New Inline Comments Form

Posted on

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

This hack does not work with Blogger BETA.

After considerable use and some feedback from both users and implementors I have redone my inline comments form hack. The new hack should be simpler, cleaner, and XHTML-valid. Previous implementors will have to remove the old hack before continuing.

You might also wish to check out the asynchronous version of this hack :)

This hack is now coComment-compatible.

  1. 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')
  2. 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')
  3. Insert the following code into the <head> section of your blog template :
    <script type="text/javascript">
    //<![CDATA[

    function toggleitem(postid,linkid,newtxt,displaytype) {
       if(!displaytype) {displaytype = 'block';}
       var whichpost = document.getElementById(postid);
       if (whichpost.style.display != "none") {
          whichpost.style.display = "none";
       } else {
          whichpost.style.display = displaytype;
       }
       if(linkid) {
             var lnk = document.getElementById(linkid);
             lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
             lnk.innerHTML = newtxt;
       }
    }

    //]]>
    </script>

  4. Replace the <$BlogItemCreate$> tag with the following code:
    <!– COMMENT FORM –>
    <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 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 action="http://www.blogger.com/login-comment.do" onsubmit="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>  &lt;b&gt;, &lt;i&gt;, &lt;a&gt;  </b> </h2>
             <textarea name="postBody" class="comment" rows="8" cols="40"></textarea>
             <h2 class="sidebar-title identity"> Choose an identity </h2>
             <div>
                <div>
                   <input type="radio" name="iden" value="Blogger" checked="checked" onchange="toggleitem('cfo<$BlogItemNumber$>');" />
                   <label> Your Blogger display name </label>
                </div>
                <div>
                   <input type="radio" name="iden" value="Other" onchange="toggleitem('cfo<$BlogItemNumber$>');" />
                   <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" onclick="isSubmit=true;" type="submit" tabindex="2" />
             <input value="Preview" type="submit" name="preview" onclick="isSubmit=true;" tabindex="3" />
          </p>
       </div></form>
    </div>
    <!– END COMMENT FORM –>

  5. Save your template and republish your blog
Tags:

90 Responses

Richard •

Do you have any trouble with comment spam? (I recently got a lot while using Browservulsel's form, and I guess this would be similar.)

Any chance of including word-verification in a future release?

Richard •

(One trick from Browservulsel that you might want to look into is how to skip the standard blogger-comments page, so that it goes directly back to the post page after you post a comment.)

A •

this is quite a fine hack, peek-a-boo commets track and peek-a-boo post a comment form, as richard says, the onlything left is automatic return to main. but it is great man, thumbs up.

Singpolyma •

No, I haven't had any real problems with comment SPAM, although there's no real protection against it except that the form assumes you are using a blogger account — the script would have to know otherwise to get around it. My blog doesn't get a lot of traffic though, so that may be the explanation too… I'll look into including word verification :)

RE skipping blogger page. I don't want to do this for a number of reasons: (1) if you're not signed in and try to use your blogger display name or some other error occurs, the form won't display it, it'll simply redirect blindly and you'll lose your comment (2) things like Johan's commentblogging script depend on a standard comment-finish URL

Chaim •

I love your site, I can't find your email anywhere, Id love the code for the show/hide sidebar hack. It's briliant. Can you please email me at whoknowsone2005@yahoo.com, thanks so much!

Richard •

"it'll simply redirect blindly and you'll lose your comment"

Oh, good point, that would be a problem!

If you ever get around to looking into word verification, this Browservulsel post includes the code for an initial attempt, which at least works for Firefox, and there is further discussion in the comments about how to get it working for IE too.

Good luck! :)

Dr Haisook •

Thank you for this. So simple, so efficient. Much better than BloggerHacks's which never seemed to work on my blog.

andycjw •

this works great! thanks for the hack!

yash gupta •

does this display on the post page only or the main page also? because if you have to go to the post page to use this then its not saving any time.

Singpolyma •

It displays on my main page, you may have noticed, and that works fine, but that is not directly included in the hack — you must install a peek-a-boo comments hack for that to work :)

yash gupta •

ohhh you have to press that button… and some solution to "this" page loading asking us to put in the blogger id and pass? cant it be made available too on the main page?

Frik •

Thanks a lot for the hack. It's exactly what I've been looking for.

Disharmonic Notion •

Iwm getting crazy i tried to install your code and it worked great but why do hebrew comments are saved great and properly on your site but on my it doesnt

Azhar •

Fixed, sorry to bother, except i still dont know how to get those buttons below the photo lol

nanohakka •

hmmm . . . looks promising, but i can see already some funkiness in your cform div tag, in that it either is not closed in the right place, or is not closed at all . . . plus i'm getting a ton of js errors on all of your pages . . . ok, best viewed in firefox, but at least have the decency to not throw errors in ie!!!

maybe i'll fix it myself for ie, thanks . . .

Singpolyma •

The errors in IE are really unavoidable. IE doesn't support XPath, which a number of my scripts use. The page still works fine in IE, it just isn't as pretty because IE is stupid. As for closing tags — all my code is XML-well-formed and 90% XHTML valid (the other 10% being unavoidable Blogger errors).

Wylie •

lets say i need to delete a comment. how can i do that?

Singpolyma •

Uhh… you click the trashcan icon next the the comment? Unless you've somehow altered your template not to have it…

Singpolyma •

I have no idea, there's no comments on there and I can't seem to put one, so I can't see… but basically if for some reason you've taken out the code for the trashcan icon on comments, you need to put it back in… so next each comment the code is:

<$BlogCommentDeleteIcon$>

pH •

Hello I've use the hack and it works like a charm, thx a lot!
However I've switch to blogger beta few days ago, and it doesn't work anymore
It just shows up "We're sorry, but we were unable to complete your request." when anyone try to comment
Is there anyway to modify the hack and make it works with the new beta again?
thx a lot

Singpolyma •

I haven't had a chance to work with Blogger BETA yet, but expect to upgrade all my hack to work there in time :)

doris •

Hello, any chance you've been able to look at using the inline comment form hack in Blogger BETA yet? Something seems to have changed in this version that prevents comments from publishing. Would be eternally grateful. Thanks!

Singpolyma •

Check out my comment on FreshBlog… I'm working on porting my templates and all of these hacks… but it's slow going because I have to learn a whole new code system and it isn't even properly documented yet!

valium •

Kiss you! I think this is the best site in the net I have ever visited!

Really, very nice site. I check it regularly!

Hydrocodone – Levitra – Ativan – valium
All Major Medications are available right here at: http://www.crdrx.com

Anonymous •

Hi there,
I'm pretty new to all this code stuff so please could you help me out…
I keep getting the following message when I try to save my template with your code included…
How can I stop this?

Thanks…
Paul
—————————————-
"We were unable to save your template

Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."

online trading •

For a list of online trading brokers and a profile of an online trading broker recommended by

others visit online trading

Stock trading links. Features tools, indicators and charts
online stock trading

வடுவூர் குமார் •

Hi Stephen
I went thro this hack baut my template doesn't have < $BlogItemCreate$>.Can guide me a bit?
Actually my concern is
I have a script in blog to write in my native language.When they type their comments and click send,the comment should go to the default comment box.But its not showing up in default box,propably hidden.How I give link between the default comment box and the posting box?.
I hope I made it clear.
Pl help me.
The way it works in your blog.
Thanks
venkat

Singpolyma •

If you do not have a <$BlogItemCreate$> tag, just put the code right after the code that displays the comments.

Anonymous •

HI! I just wanted to tell you that i really liked your site and you did a great job with it. Just for your note /cool-mp3.org has great music there.

Anonymous •

If you do not have a < $BlogItemCreate$> tag, just put the code right after the code that displays the comments.

what do we look for?

Stephen Paul Weber •

@Pednaud – this hack is known to basically not work at all anymore. Layout problems are likely the least of your worries :) You might try one of the new hacks listed in the updates to the post :)

harsh •

when i try to paste the first code , I'm getting error massages and also I cannot find tag in my template . can enyone help me please.

thanks

Stephen Paul Weber •

@harsh — check out <http://singpolyma-tech.blogspot.com/2006/12/comment-forms-and-blogger-beta.html>, this hack does not work on the new Blogger

jack •

@singpolyma

Im using classic blogger.

the hack doesn't work bro, every time i clik on publish it redirects me to "HTTP method POST is not supported by this URL
Error 405" and if change the method="get" it redirects me to 404 php error….what should i do, any clue?

jack •

@singpolyma

Im using classic blogger.

the hack doesn't work bro, every time i clik on publish it redirects me to "HTTP method POST is not supported by this URL
Error 405" and if change the method="get" it redirects me to "Not Found Error 404"….what should i do, any clue?

jack •

@singpolyma

so can you recommend me with one who works with my new classic blogger? (and sorry for the double post)

win now •

Could you please send to me the contacts of developer of your site? It looks so damn good!

alex •

Can someone kindly help me out with with locationg ""
so I can accomplish the following step-:
"Replace the tag with the following code:" which is step no. 4 of this hack. For the life of me I cannot locate "" anywhere in edit html section.
Thanks a bunch.

Laurel •

Cool…i followed your instructions but messed it up somewhere, but what i was really looking for was the $BlogItemCreate$ tag because i found a pretty layout somewhere but it didn't have the option for comments. but i like the idea of this even though i couldn't get it to work.

Leave a Response