Singpolyma

Technical Blog

Comment Forms and Blogger BETA

Posted on

Blogger now has an inline comment form that is native: http://buzz.blogger.com/2008/10/commenting-made-easier.html

Update 2007-02-08 : Contrary to a bit of a misunderstanding this hack DOES work with the new Blogger out of beta. If you can’t find the code try checking the ‘Expand Widget Templates’ checkbox. I have added a bugfix for the redirection bug some were experiencing.

The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.

Have no fear — there is good news!

Since we must use Blogger’s ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can’t style that page) and would be displaying comments twice on the page, etc.

Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn’t create that ugliness!). Visitors can close the ‘popup’ without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can’t guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)

To install the hack, follow these steps:

  1. Go to the ‘Template’ tab and select ‘Edit HTML’.
  2. Check the ‘Expand Widget Templates’ box.
  3. Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):

    <script src='http://jscripts.ning.com/get.php?xn_auth=no&id=1093361' type='text/javascript'/>
    <script src='http://jscripts.ning.com/get.php?xn_auth=no&id=2655847' type='text/javascript'/>
    <link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>
  4. Find this code:

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    and replace it with this:

    <a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>
  5. If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don’t know, you don’t) then find this code:

    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>

    and replace it with this:

    <b:if cond='data:post.allowComments'>
    <a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
  6. Find this code:

    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>

    And directly after it put this code:

    <script type='text/javascript'>
    var isLoad<data:post.id = 0;
    function checkDeactivate<data:post.id {
    if(isLoad<data:post.id > 1) {
    //<![CDATA[
    document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>';
    //]]>
    window.location.reload();
    }//end if isLoad
    isLoad<data:post.id;++;
    }//end function checkDeactivate
    </script>
    <div expr:id='"comment-form-" + data:post.id' style='display:none;'>
    &amp;lt;iframe onload=&quot;checkDeactivate<data:post.id src=&quot;<data:post.addCommentUrl/>&amp;amp;isPopup=true#commentForm&quot; frameborder=&quot;0&quot; style=&quot;border-width:0px;width:100%;height:380px;&quot;&amp;gt;&amp;lt;/iframe&amp;gt;
    <div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div></div>
  7. Save your template

60 Responses

Angel

It doesn’t work for me. I’ve tried on my test site a couple of times. I also tried making a completely new test site that uses a basic blogger template. But the result has been the same. Clicking on the post comment link online brings out a yellow box with “Loading” on the upper left. It doesn’t show anything else.

Screenshot: p://img252.imageshack.us/img252/5507/screencapture1xl2.png

Stephen Paul Weber

@Angel — any javascript errors? Do you have other hacks installed that may be interfering?

@rc.girl — Not sure. Usually on a widely-implemented hack like this that means a cut-n-paste error. Blogger error messages are useless.

Bert

Just FYI… I also get a pop-up box with only “Loading” in it. The status bar says “Done,” but nothing. We have implemented several hacks and work-arounds, and maybe that’s the issue.

Separate question — I discovered your site while browsing for a hack that would create an open comment field with a blinking cursor, where “Post a Comment” is now. More inviting. Similar to your “plugoo” IM widget in the sidebar of this page. Know anywhere we can pick-up something like that?

Thanks!

Bert

Tight tight… I see it in action on your test page. Pretty neat.

Since no one responded to your 2007-11-20 11:01 post: “@Angel — any javascript errors? Do you have other hacks installed that may be interfering?“… I suppose no one’s discovered a work-around or a cause for the “loading” issue.

We’ll keep hunting. Happy new year!

infinity

hi..congrates for your really nice hack..

But, unfortunately, i got the same problem as ‘lulu’ which said:

“the code,which you mentioned in step 4~6, can’t be found in my HTML template.
How can we make a comment form with lightbox?”

I really want this type of ‘post a comment’ like yours..

Can you help me?

Here i give you my code..i am very thankful for your help!

Protegon

hola estoy probando este sistema de comentarios hi i’m testing the wonderfull comments form

Leave a Response