-
Comment Forms and Blogger BETA
- body
-
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:
- 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&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'/>
- 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;'>
&lt;iframe onload="checkDeactivate<data:post.id/>();" src="<data:post.addCommentUrl/>&amp;isPopup=true#commentForm" frameborder="0" style="border-width:0px;width:100%;height:380px;"&gt;&lt;/iframe&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>
- Save your template
© 2006-2008 Stephen Paul Weber. Some Rights Reserved.
You can trackback from you own site.
57 Comments
Hi there Paul!
Excelent!!!
Nice job!Thanks for your hack.I've translate this wonderful hack to Chinese ^_^
http://iyee.cn/post/blogger-beta-lightbox-comment.html
And dragable box?
the word verification dosnt show up in IE, works fine on FF but the majority uses IE, can you fix that?
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.
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!
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
…that you can see in this jpg:
http://www.yanquimike.com.ar/
3columntemplate004.jpg
Thanks,
Mike
@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.
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?
@Rui — Anything is possible, but that would be very hard.
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
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
@Gurn — Unfortunately no, not really. That would required modifying the Blogger page itself, which I don't really have any way of doing.
@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…
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!
Cool
good
test
test again
Weird. When I tried to install this script on my blog, the page automatically reloads into a comment page. What am I doing wrong?
Okay … now it's doing it on your blog too. What gives? Maybe it's my browser (Firefox on Mac)???
@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…
test
Nice job~~
But when Blogger no longer 'beta',the code,which you mentioned in step 4~6, can't be found any more.
How can we make a comment form with lightbox at the NEW Blogger?
Teach me,please~
Or give me some tips~
3Q~~
@lulu — This code is still running on my and many other's New Blogger blogs. It should not have changed. Perhaps you are running a template that is a bit different. Again, the only way I can help with that is if you send me your template
thank you for your help~
when I download the whole .XML file,
I found the code~
3Q for your wonderful work,it makes my blog beautiful~
hi , i was trying this code but i keep on getting the error below when I try to save it , please help
"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 reference to entity "id" must end with the ';' delimiter. '
@somitra - there was a minor problem in the code in this post… I've fixed it now
I used your coding but there is a missing end tag tag
in step #6.I am not a techie professional.
It should be in my earlier comment.
@Ramya - if there is a problem being generated by Blogger even with this newest version of the code, send me your template and I'll look at it.
Script Source is Offline or does not exist. Visit http://jscripts.ning.com/
PLease upload or rectify scr with some new location.
Please see http://singpolyma.net/2007/03/ning-problems/ and the comments there
thanks.
i get some massage about div tag that unclosed…
did someone know something about that?
Yup, there was definitely an error in step six because I added a atr the end and it works just fine on my blog :).Thanks a ton :). Cant you give us a hack for a form just like what you have here?
@amitt — again, seems to be working for others, so if you can send me your template I can look. singpolyma $at& singpolyma DOT net
@Basketer - glad you got it working. The form here is about like what I had in my old hack, but for technical reasons this is no longer possible. This is WordPress
I dont know if it works on my template. (classic blogger). can you please help me? I cant seem to find an easier solution elsewhere. I just want, like everyone else, put the comment form after the comments *if there are any* on the permalink.
my email is flairinthecity@gmail.com if its more convenient. thank you stephen!
Just because I think someone asked about this — this hack (like most of my hacks) do not work on the new Blogger classic. Get with it and upgrade!
Hi thank you for the hack
But when i applied it i got the div with something like this:
Thanks, very helpful!
Hi!
I use your peek-a-boo comments, which works great. However, when I try to apply this script, all I get is a lightbox popup with the text "loading…" in it. Nothing more. What's wrong? Did I miss something?
Me too. loading….
Do you have it installed somewhere I can look?
Me too. I have it installed at http://amendedestages.blogspot.com.
http://blogcrowden.blogspot.com/
I have also same too long downloading problem with this hack in my blog!
Could you check it out?
fixed — note that this version has issues with the linkify family of greasemankey scripts
ty very much… kewl…
I also have the forever "loading…" message. It is installed just for you on an otherwise near vigrin Minima template
http://test-for-spw.blogspot.com/
Thanks for all your wonderful scripts.
O.k Blogger is being really salty…
I added your hack — installed it fine (on new blogger).
I think I might have deleted a tag somewhere within the template.
I am getting this error:
"XML error message: The element type "head" must be terminated by the matching end-tag "".
I have used XML Schema, so I know that my parsing is fine, but blogger is pretty temperamental.
Any ideas? There is an end head tag — so the problem is a missing div? or soemthing.
thank u. i will try it.
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
@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.
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!
This hack is the closest thing to that
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!
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!
Post a Comment