-
Asynchronous Peek-a-boo Comments
- body
-
I have made some minor, optional changes that just make the code cleaner. I have removed support for my old comment photo hack from this code. I have added support for my new comment photo hack. Please re-install if you are going to use the new hack.
I have added the ability to limit the number of comments displayed (requested by kca) and fixed the Jose problem.
Many people have benefited from my peek-a-boo comments hack for the new Blogger. It has one serious downfall however. Loading all that extra data inline can be slow. This version of the hack is designed so that the comments are not loaded until after you click the link to display them. This fixes some minor issues and improves speed like no one's business.
- Go to the layout on your BETA blog and select 'Edit HTML'.
- Check the 'Expand Widget Templates' box.
- Paste the following code into the <head> section of the template:
<script type='text/javascript'>
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<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></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'/>
- Find the code that looks something like:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
And replace that second line with:
<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>
- Right below this, find the code that looks like
<dl id='comments-block'>and just before it, insert<div expr:id='"commentsul" + data:post.id'> </div> - Next, find the post-generating code. It will look start something like this:
<b:includable id='main' var='top'>
<!-- posts -->
In this section there will be a block of code that looks something like:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Replace it with this:
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
- Find the post template section, which starts something like this:
<b:includable id='post' var='post'>
And then find the link to the comments area, which looks something like:
<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:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#comments","max comments");toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
Replace the redmax commentswith the maximum number of comments to display asynchronously (or replace with false to display all comments). - Click 'Save Template' and, if it appears, 'Confirm & Save', then view your blog.
To make my comment author photos and highlighting work with this you will need to make sure you have the latest version of that hack installed.
© 2006-2008 Stephen Paul Weber. Some Rights Reserved.
Some private data invisible.
You can trackback from you own site.
150 Comments
Hello again.
I used your 'old' peekaboo comment hack, and it has changed on me. Meaning, all of a sudden one day it stopped doing the 'peekaboo' drop down and now you must click on 'Post a Comment' in order to see my comments.
Honestly, I didn't change a thing.
Can I modify what I have done already to fix this?
I tried switching to the 'new' code you just put up, but Blogger is giving me errors so I must not be doing it right.
My Blog: Celebrity Smack!
You da man…again.
Hi, stephen thanks for the advice to check peekaboo widgets on bloggerhelp. I am interested in this hack because i am trying but to apply it to the old blogger. So far i am having some errors while posting comments and blogger redirect to the comments page each time, which is not exactly the idea…
I am decided to apply this hack on my blog, so I will appreciate any help or advices… Thanks!!!
@Spicy — Some serious surgery may be needed… it DID take us awhile to get the original installed, getting it uninstalled may be even more fun…
If, besides my hack, you have never changed any of the code in the widgets on your template you can click the 'Revert to defaults' or similar link at the bottom of the 'Edit HTML' page and then install this new version. Otherwise email me your template and I'll see what I can do…
@Naxos — Well, your blog doesn't work right at all in my browser, but if you have word verification on (like I unfortunately do here), that will be the result…
Hi Stephen!
Works great! Together with Aditya smilies now we can have smilies on main pages! very nice indeed!
Like Avatar would say: " The Bleet comes to the rescue!"
Hi Again! ive installed your hack thinking the comments would shou up in the main page but it redirects the user to the "permalink" one, what hack do i have to install to have comments on main page like yours without leaving the page and still showing the other posts as well?
Thanks
also the area where someone clicks to post is missing the word "comments" it just displays the number of comments made in the post
Hi!
I do not get this hack working! It seems like that my other added hacks have effects on my template that I can not get this or purpple moggy´s comment author photo-hack working: Like in 5th section my second b:if have changed to b:loop etc..
What to do?
@Ricardo — You've got the right hack. There was a minor bug. Try again
@Tux — As stated in the post you must be sure you have the newest code for the comment photos installed — PurpleMoggy does not have this new version of the code in his post yet. Re-install the code for the <head> section from the link given in the post.
its working now! i was following the situation via comment feed so i didnt notice the change in the code.
it seems the dates in the comments are wrong, i get 1970 but not a big problem.
Thanks, the 'reverting' worked.
Thanks, the 'reverting' worked.
Stephen, thanks for the hack… i fixed the problemas and i think that is working fine right now on my blog, you are welcome if you want to check it out !!! Next step for me is to try to apply this hack in order to have maximum speed…i will look for your help if needed, hope this do not disturbe you….
cheers
it seems that the template provided in http://xoxotools.ning.com/templates/new-blogger/basic-template-asynch.txt are not the same with the one you explained here, and that will lead to more confusions to others that are not so 'geeky' and only knows a bit to html etc.
so i'm suggesting to put another one, that looks exactly the same with the one you discussed here
@Efendi — Not sure what you mean… this hack was applied to that template, yes. It was optomised to work/look best with the rest of the template (which anyone who has the know-how can and should do for their own template), but it is not a different hack. Anyone who doesn't know code won't read the template enough to notice that I doubt. Anyone who does know code should be able to see what the tweaks do. The point of that template is that users can use it without having to install the hack manually
Hi stephen, i have just finished to put peekaboo coment hack and asincr comments form in my blog inmanencia and they are working very fine for the old blogger… thanks for the hacks…. but now i would like you to help me to apply on my blog this hack too, so the comments could load after clicking the link to display them… Could you spare a piece of code to do that??? Thanks!!!!
Thanks! you are great man! i have post about you!cheer!
@naxos — There is no version of this for the old Blogger for a simple reason — actually including the code in the main page is better than loading later (at least imho). This is because of server-side, indexing, and search engine stuff that can be done with main-page comments. I have only created this hack for the new version because it does not support having the actual code on the main page. Make sense?
Great improvement! I really like this hack, and now the speed is excellent. Thanks for making it available.
While switching from your previous peek-a-boo comments hack to this one, I noticed you eliminated some steps. And that makes the current directions in step 4 confusing: "Find the code a little bit before that which you just inserted…" (but the only thing inserted so far was in the head section). I was able to figure it out by looking back at your earlier directions, but this might throw other people off…
Also, it seems the minor issue is not completely fixed. When I click "older posts" (at the bottom of the main page) the older posts appear with the peek-a-boo already activated (on all posts), but showing no comments. I have to un-peek-a-boo then peek-a-boo again to get the comments to load. You can see what I mean here: pilgrimage journal (there's only a few posts with comments).
This is not a big deal. But if there's an easy fix, I'd be glad to hear it.
Thanks again,
Paul
@Paul — I have updated the post accordingly
Thanks. About the minor-minor bug… oops. It's not easy to fix though. It would be easy for me, but would require that users find an otherwise unmarked </div> tag and change it. Not something most users know how to do…
Good job!
but I have a problem.
can you add the function for this hack like this:
http:／／www.divshare.com/download/79632-36f
thx!
@leo — not sure what you're looking for… could you be more specific?
well..
create a button that can collapse post comments and back to the "post title" position.
thx~
@leo – so collapse the comments down to just author names and dates, and then expand them one by one?
Hmmm…doesn't seem to be working for me. I get a "Loading Comments" popping up and then no comments. Am I doing anything wrong?
Here's a link to my site.
Thank you so much for this hack! It looks great.
@Bell Curve – Your site does not seem to have my hack installed… at least, not that I can see…
Jeez, you're fast. After I wrote that comment I undid the code and then redid it. Works like a charm now!
Thanks again for doing this.
sorry~
I found a example:
http：//help.blogger.com/bin/answer.py?answer=42214
just show full and hide full.
Also: For some reason, the words "# comments" appear below the comments. With # obviously representing the number of comments.
Additionally, if this helps, the font is much larger than any other font on the page, and I am not sure how to change that. I have fiddled with every font value I can think of.
Thanks again!
-J
Ok. weird. 2 long comments didn't post. Summary:
1) You're awesome
2) How can I put the comments within the post footer (after "posted by") and before "tags).
3) Thanks!
@jose – you'll note code in the instructions that looks something like this:
<div id="commentsul"></div>
That tag is where comments get inserted. Put it wherever you want the comments to render
If you want to move the header, etc along with it you have to move the code for that too 
FYI: long comments won't display on your site. Executive summary again:
1) Thanks
2) Can't make comments disappear again
3) No worries.
Any idea how to make the hack work with a password-protected blog?
I've worked on this for a few hours and have determined it most likely isn't working on my blgog because the feed is not publicly accessible. If I try to access http://password-protected-blog.blogspot.com/feeds/2569571226410329118/comments/default directly with a web browser I get a page that returns "Unauthorized Error 401" (even though I'm also already logged into Blogger with the same browser).
Thanks in advance for any tips!
@brittany – if the data is not accesible to a script, we cannot hack with it, thus there's nothing we can really do in your case… sorry
Hi, i left a comment on your other peek-a-boo section about comments not showing up at all on my front page. You suggested trying the asynchronous version which i did and, after hacking around a bit because my template was missing some of the things it said to replace, i managed to get the comments to show up. problem is they don;t seem to link anywhere and the error console says there is an error with this in the javascript:
data.items[i].content = data.items[i].content['$t'];
something about there being no content. I have uploaded my initial template which i am trying to incorporate peek-a-boo comments on the front page to here:
http://www.nypocreative.co.uk/open/template.xml
if you could cast an expert eye on it and see if anything galringly obvious stands out i would really appreciate it as i am totally out of my depth now with this blogger template.
cheers
This is not working for me. I seem to be having the same problem as BO18, I am getting the message:
XML error message: The element type "b:skin" must be terminated by the matching end-tag "".
Any ideas?
Is this the version I'm using on my blog?
Btw, How come my Blogger profile picture is not shown in the comment?
@Ilker – I haven't got a Blogger faces plugin for wordpress yet
There are so many faces plugins, I want to create a mega-plugin for all of them together, but I haven't got past Gravatars and Favatars yet 
Cool! So this is WP now?
Btw, that flag/OS/browser icons look really nice as well.. can we get them for Blogger?
I seem to be having the same problem Jose is having. I am in no way familiar with code so could you explain how to move these objects around, thanks!
Great job with these awesome hacks
Right now i'm using this asynchronous version on my teamblog. A few remarks though:
Loading the author URL's slowed down my blog significantly. So I modified one of your scripts and deleted the link. I'm far from a html-genius, so i'm not quite sure i did it the right way, although now my blog loads faster
Perhaps you have a (previous) version of this script without the author url?
Also, as Jose commented earlier, the words "# comments:" appear below the peek-a-boo comments. (this is not the case in your synchronous version…)
Is there a way to remove this single line, so that only the link "post a comment" appears?
Last question
I added smileys to my blog, but they don't show up in the peek-a-boo comments:( (although they work fine with your synchronous version).
I think the smileys-script should be re-run after actually clicking the comments. Is there a work-around for this problem? Maybe put some kind of 'refresh' inside your script? I don't have a clue how to do this.
Thanks!
This looks great! However, I'm getting an error message when I try to install:
XML error message: The element type "b:loop" must be terminated by the matching end-tag "".
I can't find any dangling tags in the template…any suggestions?
@Ilker – I'm thinking about a Blogger hack for these nice country+OS+Browser icons, but it's tricky, because we can't really store metadata with comments.
@Michael C – You change the code from step #3 and just move the [[FIELD]] and surrounding code to where you want it. If you have an exact layout/format you want, I can do it for you
Actually, see what I say to Bruno below.
@Bruno – Loading author URLs is painfully slow. I know. If you take it out, that's fine, but so many people requested it that I left it in the main hack
Ah, now I understand the Jose-problem! That's something that's been reported before… When I get some free time I'll try to fix that in a way that works on all templates 
There is a way to make smiley work, in fact! This text appears throughout the hack to make it work with my comment photos hack:
thisblog_showCommentPhotos
simply replace that with the name of the smiley rendering function
@Ariel – seeing how as others do not have this problem I'd bet it's your template… if you email it to me I can take a look
The script i'm using for the smileys can be found here. So I guess the name of the smiley rendering function is in this case "addSmiley".
It also gives an error in IE.
As you suggested, I replaced "thisblog_showCommentPhotos" with "addSmiley" (3 replaces: 2 times in step 3 and once in step 6)… But then the peek-a-boo comments don't work no more… I just get to the post page instead
Then, I undid the replaces and I tried to add this at the end of step 3:
addLoadEvent(function(){
addSmiley();
});
But don't work neither =). Any suggestions? I'd really like them to show up
By the way, the smileys work fine in the post pages 
@Bruno – you seem to have put my code inline in your blog header instead of including it from JScripts. This really is not reccomended. If you must do it that way, however, add this code to the end of the peekaboo_comments_display_callback function:
peekaboo_comments_callback();
and then do what I told you above. Should work. Try only replacing it in the link itself too (ie, step #6)
Smileys work like a charm now, you're the best!
By the way, I did put the code in my blog header because I was trying to find a workaround for Jose's problem. But couldn't find a solution so far
Right now I tried to remove your code in my blog header and replace it with the last line in step#3, but then I have same problem as mentioned above. Obvious, right? I guess because the code "peekaboo_comments_callback();" is not included
Is it recommended to host your (modified) script somewhere else rather than keep the whole code in the blog header?
Another thing I should mention, maybe others have noticed this too (?):
Sometimes only "Loading comments…" appears without actually loading the comments. You have to hide/show again (sometimes twice) before the comments show up. This seems to happen a bit more in IE than in Firefox…
Thanks a lot for your quick responses
I found how to remove "# comments:" underneath the peek-a-boo comments:
I simply removed
1 :
:
which can be found after ""
Ok well I'm not sure what happened between my last comment and now but for some reason the "peek-a-boo comment" style is not working at all anymore. (check my site to see) It simply takes you to a different page with the comments at the bottom. I thought I might fix this by re-entering your code again as is but this too didn't work. What's up with that?
As for a specific layout, if you could help, I will try emailing you about it.
Sorry, must have spoken too soon. The peek-a-boo comments are working. Now it's simply a matter of the layout.
If the comments are not loading it's likely just that the connection locked up / was slow.
To those worried about the Jose problem : I have not had time to write a fix into the post yet, but here is a workaround for you. This code from step #4:
Is where the actual comments are loaded. Move that to below the code generating # Comments and you're good to go
Hi Stephen…
Looks like a great add-on…but i'm unable to use it with my blogger template. keeps giving errors regarding dangling tags and not a genius at html, but there don't seem to b any loose ends..
could u please help? the base template is minima white which i've modified.
the blog on which i'm testing is
withlovesherry.blogspot.com
thanks in advance.
This is a good script, but the problem is, when you disable comments in Blogger Settings, then the "links to this post" is disabled as well, meaning if you click "links to this post", you will not see the backlinks, how to solve this problem, separate comments and "links to this posts" in your code above, "links to this post" will not be affected even if comments function are disabled in Settings.
next, I see you have trackback function in your blog, how to change "links to this post" to trackback in Blogger.
Many thanks for your time.
Hello Stephen,
first off: Thanks for that wonderful script!
Good to see it back online again… (allthough I'm still with the temporary fix)
We are running a team blog over at AHKKI and are using your nifty little hack for quite a while now…
Question / feature request:
Is it possible to have a separate link somewhere on the page, which unfolds all hidden comments at once?
That way one could get a quick glimpse on what is going on lately without trading the overall benefit of hiding the comments (ie. faster page loading, better overview, etc.) in the first place.
bye,
after doing step 5 i get the following error message:
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 element type "b:if" must be terminated by the matching end-tag "".
Singpolyoma,
Thanks for fixing the ning problem. What a nightmare. Just wanted to point out a couple things I had to fix for this script to work on my blogger blog. First, this worked like a charm on the main page but broke my comments on the item pages. I think you should rephrase step 5 to insert that div before the mentioned dl code instead of saying to REPLACE it. This is needed for the item pages! Also, in your javascript where you do the join with #c for the link to on the timestamp: if you change this to say "#comment-" instead it will actually link to the specific comment. Thanks again for your help. This script rocks and you're the only one who does it on the internet (kinda like avatar with the navbar trick).
Those getting XML errors — unless everyone is getting them (which they aren't) the only thing I can do is look at your template myself: singpolyma %at^ singpolyma #DoT* net
Sorry about how slow I've been with support lately, I'm kinda busy.
Will look into the feature requests given.
@JB – thanks for the heads up — I'll fix the wording ASAP. RE the link to #cID… that's one of 3 standards, depending on your blogger template. Some are #ID, some #cID, some #comment-ID… I picked the more common one.
Thank you so much for this! I've added it to my blog – I had peekaboo comments on old Blogger and was missing them.
The only problem I have now is that I want to add a break between comments, between the timestamp and the next commenter's name. How can I do that? I've been trying br tags and p tags, but perhaps I'm putting them in the wrong place, because nothing changes.
@BadAunt — If you note the HTML code inside the JavaScript in step #3 — change that
Thank you!
But … I should have added that I'm pretty well clueless about HTML, and only manage anything when I'm following specific instructions. :-/
I'm assuming that I need to add something to the div style, something about the bottom margin? I tried just now, but failed … and now I don't have time to research further (yes, I've been scouring my favourite 'HTML for very stupid people' sites). But I will try again, probably over the weekend.
In other words, if you feel like offering a few more clues they'd be very welcome. If not, I'll have another go anyway when I have enough time to educate myself a little more.
You might try changing <div class="commentelem" style="clear:both"> to <div class="commentelem" style="clear:both;margin-bottom:1em;border-bottom:thin dotted black;">
Thank you thank you thank you!
I haven't tried it yet, but will when I get back from work. (I have to leave in two minutes.)
Now I'm having a problem with my page loading very, very, slowly, and when it finally does, peekaboo comments don't work. (Without changing anything.) The message in the bar at the bottom of my browser says: "Waiting for jscripts.ning.com." That has something to do with the hack, doesn't it? Have I accidentally done something weird to cause this? Is it Blogger?
Ning just did some maintenance and so the script repository is being slow again. Nothing else
I've gone back to my old template for a while, because comments are taking so long to load I'm getting emails from people saything it's not loading at all. (It is, but only if you're willing to wait a few minutes.) I'm busy with work for the next couple of days, but will try again over the weekend. I really want this to work!
hi, thank you for this hack! i had peek-a-boo comments before on old Blogger and i've been missing it crazy.
i got everything installed as told, but seems ning.com is down. nothing much i can do now except wait for it to get back up to see if i've done every step right?
sorry, it's me again.
is it not possible to have the script inserted to the template direct instead of linking to another site to grab the script?
Correct, when Ning is down (I've contacted them about it… again) there's nothing we can do. Once it is back up, if you want to paste the script into your template I will not stop you — just link back to me somewhere (according to the terms of my Creative Commons License)
It's working again – perfectly, and your suggestion looks great. Thank you again!
I've tried doing this a number of times and keep getting the message: The element type "b:if" must be terminated by the matching end-tag "". When I think I've fixed that then it changes to "b:loop" I can't figure this out…anyone have suggestions?
@Kansas — no way to really debug that without seeing your template
Try opening a ticket here <http://singpolyma.devjavu.com/projects/singpolyma/report/1> or contacting me here <http://singpolyma.net/contact/>
Hi Stephen
How do I contact you or open a ticket?
See my previous comment, I fixed it so that you can see the URLs
This is a good script, but the problem is, when you disable comments in Blogger Settings, then the "links to this post" is disabled as well, meaning if you click "links to this post", you will not see the backlinks, how to solve this problem, separate comments and "links to this posts" in your code above, "links to this post" will not be affected even if comments function are disabled in Settings.
Many thanks for your time.
Hi there Steven (firstly thanks for making the code available),
I've tried to follow your instructions to get the peek-a-boo comments working on my site.. everything seems fine except the comments are not loading onto the page. All that happens is "Loading comments" briefly flashes up but no comments are pulled down. I checked the url points to the comments by pasting it into the browser – this seems ok? I Just can't figure out why the call to document.getElementById(…) is not working.
I've exhausted all the things I can think of but would greatly appreciate it if you would be able to look at it for me. The relevant site is (here )
Thank you!!
theres a prob with my site
i use expandable post hack
when i click on the comments, what it does is takes me to the psot specific page (permalink)
pls help me out
my site is http://ahsanuc.blogspot.com
@Ahsan — you did not properly execute step#5
Thanks for this. It's exactly what I was looking for. However, is there a way to change the text that you click on in order to see the comments. Right now it just says "1 comment" and you click on that and the comments appear below. Is there a way to change that text to say something like: "Click here to open or close comments" or something like that?
Thanks!
@Lori – you could change the settings on your blog posts widget (the correct way to do it) or you could change this code in step 7:
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if>
Thanks! Unfortunately I'm a novice at this, and while good at following instructions, I'm unsure how to change the blog posts widget on my own. If you have time to detail that, I'd appreciate it. Or, if you can let me know a bit more about the change to step 7 (like I assume somewhere in there I need to write the text I want it to actually say?). Sorry, definitely a novice at this. Thanks again.
@Lori — replace all that code (from my comment) with what you want to say. Or go to the layout page and click 'edit' on the blog posts widget
At first, thanks for the script. I've installed and it shows/hides the comment area but it won't show the comments itself. what did I do wrong? I can't find the solution in the messages above though they mention the same problem.
manny thanks in advance, Willem
Thanks so much. Works perfectly. The only thing I'd like now is some more space between comment posts. The date of the first person's comment and then the next one is really tight. Any way to adjust this?
Thanks!
Thanks very very much!
Finally I have found what I have been searching for 2 days!
It works on my blog! I have the same question as Lori is how to change the space between comment posts?
Once again, thanks very much!
Dasha
For some reason I couldn't get it to work until I tried it the third time. It didn't display the text from posts o_o. It now works great, thanks.
@Willem… I can't even get to your site at all…
@Lori and Dasha – it's all in the CSS. Try this:
<style type="text/css">
.commentelem {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
Your code is a thing of beauty. I've been looking for something to replace the peek-a-boo comments since going to Beta a couple of months ago. I just can't thank you enough for your sharing the script.
I seem to be having a problem one other commenter had – when the comment link is clicked, the "loading comments" appears for a second, then disappears and no comments are actually shown.
I've gone over the code a few times.
What am I missing here?
I still playing "offline" with my blog and all the beautiful hacks.
This one was a bit tricky because of the many changes in the source code.
But, hey… it works after the first try! Awesome coding, Stephen!
Keep up the great work!
/mike
Stephen,
I've tried implementing this code in my Blogger blog, but somehow the comments don't appear. It's like it's loading but nothing comes out no matter how long you wait or how many times you refresh. I think I might have messed up somewhere. Is it alright if I email you my blog's HTML or something to show me how it's supposed to be done?
Regards,
Jared
@All – do you have full feeds enabled for your blog? Is your blog public? Either of these could cause the problems you mention.
Is there any way to put a "return" or line between the comments. They all seem to run together. Awesome hack btw!
Thanks in advance.
THANK YOU! I have been looking everywhere to find a way to do this, and it works perfectly!
@Scrap — use CSS, see the comments for examples of CSS that acts with this hack.
Hi there. I was just curious if you had an old hack lying around that would provide peek-a-boo comments on a Blogger platform using the old style templates.
Any assistance would be greatly appreciated.
@Space Cowboy — if you search my blog or the wiki you'll find it, it may not work on the new-old blogger though
Hi Bro, I have installed the scripts but when the time I save them, it says "The element type "b:if" must be terminated by the matching end-tag ". Help me dear.
Hi!
Just wanted to say thanks for this great script! Works great!
Hi,
Thanks for the great hack, I love it! The only problem I'm having is that the layout I'm using has I line between each post and when you click to see the comment they go under the line and into the next post. Can this be fixed so the peek-a-boo comments go above the line and if so what do I do?
I followed your instructions exactly, but when I click on comments this displays:
" 8 comments:
Post a Comment"
This is a start, but this is all that is displayed. None of the comments can be seen. Any advice?
Nasty bug in bloggers 'older_posts' link usage.
Goto your own beta and click the older_posts link at the bottom right.
http://singpolyma-beta.blogspot.com/
You will see that the comments are half displayed on the second page. No comments body but you do have the main line flow of text from the comment block where there should be none. The cause is that Blogger have messed up the environment for THIS KIND of older_post links other kinds. e.g. to a Monthly archive work well.
You can see that this is the problem because the standard browser BACK BUTTON is not active AND view the sources shows the older page/data
Clearly the old page environment is active but you have a new page of data and code wonderful code fails.
This is so sad sob sob sob
Here is a work around
find the two strings
+ "_blog-pager-newer-link"
+ "_blog-pager-older-link"
and remove them and the now spare single space
i.e. close the single quote on to the text before it.
This gives you back your BACK BUTTON (thumbs up) for standard "older posts" links as well as fixing the problem for peek-a-boo comments.
Clearly we are choosing not to use some optimisation of Bloggers.
I keep getting this error message..what have i done?? :s
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 element type "b:skin" must be terminated by the matching end-tag "".
I can't find:
I only find:
1 :
:
On
Any ideas?
I can't find: (I inserted a space before the div so that it could display here.
I only find:
1 :
:
On
Any ideas?
Hey, thanks for your great work. I'm just looking around for anything I'd like to add to my blog
The script is good, I had used it at my Archive blog
http://artidhonrao.blogspot.com
but when I try to use it on my current one
http://www.artihonrao.com
It does not work properly, I mean everything is fine on the first page but there is a problem on the inside pages. The comments show by default … [number of comments and not the comments as such, after clicking on comments it disappears and on clicking for the second time the comments load]
Please see for yourself and help, I will be thankful to you.
GBU
Arti
@Perea –this is usually a result of misunderstanding my instructions or of having a really messy template or both
@Hayes — can't debug what I can't read, try escaping out the < > with < >
Thank you for the code. It works, after some searching, like Rachel and others, for the close b:f> tag. But my comments now appear on top of post and not after. Have I put some code in the wrong place?
I will repeat — the blogger error messages for malformed code are very useless. I cannot debug based on them. I can tell you that 98% of the time these errors are a result of the user not following my instructions carefully enough. The other 2% is bugs in the hack — but this hack has been around awhile and a lot of people have it working, so I don't think there's a major code error.
Hey there,
I keep getting the permalink page when I click comments.
I would gladly attribute this to my own fault, but I've reset my template and redone the coding three times now, with careful attention to step 5. I can't seem to find anything I've done wrong. Advice?
@Act – I need your URL or template in order to be able to comment on the problem. Do you get JavaScript errors?
This is an absolute fantastic hack, but I'm encountering a couple of problems;
1 – When I click '# comments' the comments try to appear above the post – maybe this is how it's meant to me, but I'd have liked them below the post.
2 – I say TRY to appear because although the '# comments' heading shows, the posts themselves do not.
Any ideas? Thanks.
@Billy, sounds like you inserted the code above instead of below your post.
Thank you! My food blog is much smoother now.
Hi,
I used the hack on my blog. Though it works well enough i have a couple of issues. 1. The comment icon between the timestamp and comment link is gone in the post comment link section. I'm not adept at html/css anymore so couldn't track why it is not working (should be using comment-link class somehow). 2. The CSS class for comment-poster is to be defined and similar for comment-body such that the comments align similar to the post body. If this works then i can think of applying highlighting for the author comments
Thanks in advance for any help here
Oops forgot the only post i added comments for is Double-Checked Locking
I was able to resolve the first issue by removing rel='comments' in the tag. The second one remains
@Raj – not sure I understand your issue – you can change the class to anything you want or style the class as it is in any way that you want… just straight-up CSS
Hello,
Can you tell me exactly how to use css and style the comment features so that my comments are more spaced out?
Thank you
@Chelsea – see the above comment.
Hi, strangely the old version work for me… But not this one.
I want to use this because of the load time.
Do anyone know what i could do? I strangely get redirected to the permalink.
The comments doesn't get display on the front page
Any hints?
@sonej – if you email me your full template I can take a look
I checked my feeds to make sure they were at full and reinstalled this hack a few times, but my comments do not show up. It will say "loading comments" only to fade and leave just "# comments:" and "post a comment." Do you know what I'm doing wrong?
Please disregard my last comment. It must just take awhile for my template to realize there's a change. Thank you for these directions!
Hey guys, thanks heaps … works perfectly.
My question though is, by default the comments are hidden and you click to show. How can I make it so the comments are visible by default?
Cheers
Gater
To have comments always show you need to use the more fragile original synchronous hack and remove the style="display:none;"
Hiya Stephen,
Fantastic hack…you seem to literally be the only one who has this! Two quick (I think) questions:
1. Do you know if it's possible to modify the format of the date field from yyyy-mm-dd hh:mm (24 hr) to something else? It seems your script overrides the Blogger "Comments Timestamp Format".
2. It seems that when you view the comments, your script has the comments jump over the margin set in the .post such that they're further down the page than you'd expect — I have a 30px margin set, but when I click the comments to view them, puts the "# comments:" past that margin, and then only leaves about 5px between the "Post a Comment" and the next post. I can theoretically set my .post margin to 30px at the top (which the comments do seem to understand), but then the first post on the page is shoved down too far. Can you help me figure out how to put space after the "Post a Comment" and the next post, but when the comments are hidden, to still have that space there?
Thanks for a great product!!
Just wondering if you got my previous question? Thanks…
@Matt date format is hard coded into the JavaScript – you can change it if you host the JavaScript yourself and edit the appropriate section. Styles are just CSS. Take a look at other comments here about CSS and see if that helps.
I've implemented this hack on a couple of blogs and love it! I'm trying to put it on a friends blog and I get the following error:
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 entity name must immediately follow the '&' in the entity reference.
I have traced it down to the 'a class' tag added in step 7. Any thoughts on what this may be?
Thanks!
sorry about the last comment. I just read your comment about how blogger error messages are useless. I will try to get better debug info.
@jambo – thanks for being a bit more specific! I went over step 7 with a fine tooth comb and found a single character behaving oddly! Try again and let me know!
In the first step, Javascript hosted @ Ning. Replace '&'. I think before you updated this post you used '&' instead of '&'
Now step 1 is causing problem because of '&'. Rest of the steps are fine without XML errors. But for me it's not working. The 'Main-Wrapper' section is totally blank with white background after I applied the hack. I've a doubt in Step 6. I don't know whether I did step 6 correctly or not. I'll copy/paste the original code in that portion. Just help me by replacing it.
I forgot to put the codes inside code tags in the last comment. I'm posting it again
the hack doesn't work. if i put it in, the whole main section (all posts) disappear. maybe it has something to do with another hack i did, the peek-a-boo function for expandable post summaries? can you help me?
@supertrooper a number of people have somehow managed to nuke there templates applying this hack. I have no idea how they do it, unless Blogger has changed a lot in the last two years or so since I released it.
@supertrooper I'm also having the same problem.
Stephen, I love this hack. Having comments pop up on my blog without my readers inadvertently going to another page (and therefore away from my other posts) is fantastic.
I was using this hack for quite some time on Blogger, but just recently it has stopped working. I have tried time and time again to sort it out, but I keep getting Blogger's very un-informative XML error messages. Can you help? If you tell me where to send it, I will gladly send you the original code that I am trying to modify, or the modified version (with your script added to the best of my ability) that keeps getting the error messages from Blogger.
Hope to see a comment back from you soon!
Stephen,
I LOVE this hack, and was using it for some time on Blogger until recently it stopped working. I tried to re-implement it to no avail, as I keep receiving Blogger's very un-informative XML error messages.
Can you help? I'll gladly send you my original code which I'm attempting to modify, or I can send you the modified code (with your scripts added, to the best of my ability) that keeps getting the error messages from Blogger. You just tell me where to drop an email. I hope to hear back from you in a comment here soon!
@supertrooper I'm also having the same problem.
I have done all of these steps, yet when I look at the blog, there is a large space between the "Posted by…" line and then it says "# Comments," but it does not actually show the comments. I am stuck and I don't know what to do. Please help
I put all of the code into place, at first it added a large space between the "Posted by" line and the "# Comments" line, but didn't display anything. I tried it again and now the posts are completely hidden. Any help is greatly needed and appreciated.
hello, I tried to enter the hack three times like the instructions say, but each time I get an error message saying there are problems with the tag 'div' not being properly terminated. Any ideas what the error is?
I've tracked down the code causing the post body to disappear. It is the code displayed immediately above. If anyone is able to debug, please post here. Cheers.
hmmm.. comment lost… maybe in moderation.
Code causing post body to be blank is:
If anyone can debug, please post here.
Cheers.
Trying again to post code
expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#comments",false);
If it doesn't work, can someone post a comment on how to post code please.
2 Trackbacks
[...] have updated my Asynchronous Peek-a-boo Comments. I have added the ability to limit the number of comments displayed (requested by kca) and fixed [...]
[...] le corps de l'article et ne pas avoir cette foutue fenêtre pop-up. J'ai bien trouvé un moyen de le faire, mais je n'arrive pour l'instant pas à le faire fonctionner sur mon template. Et sur [...]
Reply / Comment