Singpolyma - Technical Blog: Comment Forms and Blogger BETA

2006-12-20

body

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:

Go to the 'Template' tab and select 'Edit HTML'.
Check the 'Expand Widget Templates' box.
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&amp;id=1093361' type='text/javascript'/> <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2655847' type='text/javascript'/> <link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>
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>
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>
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;'> <iframe expr:onload='"checkDeactivate" + data:post.id + "();"' expr:src='data:post.addCommentUrl + "&amp;isPopup=true#commentForm"' frameborder='0' style='border-width:0px;width:100%;height:380px;'/> <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>
Save your template

Tags:

Singpolyma at Wednesday, December 20, 2006 | 26 | 0 Backlinks | permalink

There is an RSS Feed for comments on this post.

Comment at 20 December, 2006 20:41 by Anonymous

body

Hi there Paul!

Excelent!!!
Comment at 21 December, 2006 05:22 by yee

body

Nice job!Thanks for your hack.I've translate this wonderful hack to Chinese ^_^
http://iyee.cn/post/blogger-beta-lightbox-comment.html
Comment at 21 December, 2006 13:11 by Anonymous

body

And dragable box?
Comment at 22 December, 2006 06:45 by Anonymous

body

the word verification dosnt show up in IE, works fine on FF but the majority uses IE, can you fix that?
Comment at 22 December, 2006 10:05 by Anonymous

body

This is caused by a bug in IE that causes security errors in frames not to be reported. If you have IE set to allow mixed secure and non-secure content on a page it will work fine. IE should be displaying a warning box and clicking yes will cause the item to display (just like happens on the normal comment pages, since we are, after all, just displaying the normal comment page in a frame...)

If there were a way around this it would be a security hole in IE. As it stands the fact that it doesn't ask is a bug in IE. Did you try it in IE7? Maybe *crosses fingers* they've fixed it. Otherwise I can write you a custom hack that redirects IE users to the comment page out of frames.
Comment at 28 December, 2006 15:35 by Anonymous

body

Please Help. I would be so very grateful to you if you would translate this hack in the classic blogger html tags. It would be really helpful for guys like me who have shifted to new blogger but have maintained their classic template for preserving their their old customizations!
Comment at 01 January, 2007 11:40 by Anonymous

body

I have a problem in blogger-"beta" using mozilla that you can see in this jpg:

http://www.fotos.yanquimike.com.ar/3columntemplate004.jpg

There is a small line (approx. 2px) at the top, on the body, above the outer wrapper, between the outer wrapper and the navbar that I cannot eliminate. (Actually, I think that it wasn't there before...it suddenly appeared.)

The small "line" does not appear in IE.

I have SCOURED the code for every mention of borders, padding, margins...even pixels! No go. I can't get rid of this line.

Any ideas?

Mike
Comment at 01 January, 2007 11:43 by Anonymous

body

...that you can see in this jpg:

http://www.yanquimike.com.ar/
3columntemplate004.jpg

Thanks,
Mike
Comment at 02 January, 2007 17:17 by Singpolyma

body

@Stalker -- try my original hacks.

@mike -- you could try adding this code right before </head> :

<style type="text/css">
body {margin:0px ! important;}
body {padding:0px ! important;}
</style>

If that doesn't work I don't really know. This code usually works for me.
Comment at 02 January, 2007 20:32 by Anonymous

body

this hack is simply awesome!!

tnk you for the nice work..

by the way, is it possible by any means to customize the way the box is shown? meaning: the background color, the opacity of the rest of the blog, that sort of stuff...

is it possible?
Comment at 03 January, 2007 10:35 by Singpolyma

body

@Rui -- Anything is possible, but that would be very hard.
Comment at 03 January, 2007 20:12 by Anonymous

body

ok that's fine, won't touch it then lol

but a problem has come up, a strange one. first time i load my blog i get a comment's page of any post i've made. if i load it up once more, it loads the blog normally...

how odd is that? is that fixable?

my blog: http://sotaoiluminado.blogspot.com

tnk u
Comment at 05 January, 2007 05:00 by Anonymous

body

Thanks for the tutorial!

One question though, is there anyway to remove the default "close this window" link at the top of the comments box as it doesn't work and the working one at the bottom is pretty small compared. Got a funny feeling my readers will copmpletely ignore the small one and have a good moan at me ;)
Comment at 05 January, 2007 09:32 by Singpolyma

body

@Gurn -- Unfortunately no, not really. That would required modifying the Blogger page itself, which I don't really have any way of doing.
Comment at 09 January, 2007 17:12 by Singpolyma

body

@Rui -- I've double-tested this hack again... no problems. Perhaps there's a conflict with another script you have installed, other than that I have no idea...
Comment at 19 January, 2007 02:34 by LOUI$$

body

stephen, at last i show the verify word! I just wanna ask why someone who didn't log in blogger yet wanna post comment, they cannot show the commments when they log in via the comments form you provide. Can you take a look on my comment form please? Is this a bug?Thanks!
Comment at 20 January, 2007 16:32 by Anonymous

body

Cool
Comment at 28 January, 2007 21:15 by 波波

body

good
Comment at 31 January, 2007 10:57 by Anonymous

body

test
Comment at 06 February, 2007 08:08 by Anonymous

body

test again
Comment at 09 February, 2007 15:15 by Bell Curve

body

Weird. When I tried to install this script on my blog, the page automatically reloads into a comment page. What am I doing wrong?
Comment at 09 February, 2007 23:29 by Bell Curve

body

Okay ... now it's doing it on your blog too. What gives? Maybe it's my browser (Firefox on Mac)???
Comment at 13 February, 2007 16:16 by Singpolyma

body

@bell - this is a known issue. It only happens rarely and I have not yet been able to track down why it happens. It makes little sense but seems to happen in every browser. Since I have no code in there to do any redirecting I'm not sure what's going on...
Comment at 05 March, 2007 03:20 by needtalk

body

test :-)
Comment at 05 March, 2007 14:43 by ilker

body

You rock dude!!! This works perfectly fine on my blog even though there are loads of scrips already working! =)

2006-12-20

Trackbacks:

0 Backlinks

Syndication

FreshTags

Recent Comments

Archives