-
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.
You can trackback from you own site.
138 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.)