-
Comments on Main/Archive Page (Peek-a-Boo) in Blogger BETA
- body
-
There was a typo in this post! I finally found it. Your templates should be able to save after applying this hack now
I have released an asynchronous version of this hack.
So now that people have stopped asking me for this feature (because I said I couldn't do it) I've done it! Screen-scraping to the rescue! If you re-install this hack you'll get more manageable code in your template, bug fixes for timezone logic, and comment author links. Finally! Yay! This also improves compatibility between this hack and my comment photos hack.
You can not link to author's blogs or profiles from the main page because that data is not available in the feed Blogger provides. Some day I may dream up a way to do this — or Blogger may start providing the information. For now, it's not happening.
Updated 2006-11-27 to work with new Native JSONP, should be faster now.
As I said back when I first released my BETA template, displaying comment data anywhere but on item pages in Blogger BETA is 'impossible'. That is what this hack overcomes. Both just plain displaying comments on main and also peek-a-boo comments are now possible (revised template coming soon
).- 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"><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=2706908' type='text/javascript'></script>
Advanced users will note that the first <script> section is taken from the asynchronous comment form code, and that if that is installed (presuming I get a version working for Blogger BETA) that the code only needs to be in here once. It can be changed to fit the code of the blog itself to improve appearance, etc. Kudos to Johan Sundström for his help with the date code. - If you want peek-a-boo functionality, you will need this code in your <head> section somewhere as well:
<script type="text/javascript">
function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = 'block';}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != "none") {
whichpost.style.display = "none";
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
lnk.innerHTML = newtxt;
}
}//end function toggleitem
</script> - Find the place in your template where the comments are generated on item pages, it will probably look something like this:
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>And directly before that, insert this code:
<b:loop values='data:post.feedLinks' var='f'>
<b:if cond='data:blog.pageType != "item"'>
<script expr:src='data:f.url + "?alt=json-in-script&amp;callback=peekaboo_comments_display"' type='text/javascript'/>
</b:if>
</b:loop> - If you want to use peek-a-boo functionality put, find the code a little bit before that which you just inserted 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> - 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> - If you want to use peek-a-boo functionality you need to 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:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments”;' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);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> - Click 'Save Template' and, if it appears, 'Confirm & Save', then view your blog.
© 2006-2008 Stephen Paul Weber. Some Rights Reserved.
You can trackback from you own site.
126 Comments
i do it as your method twice,but my all posts are hidden?
what's wrong may be i made?
If the blog you tried it on was http://sunr.blogspot.com/ it looks like you've done a lot of hacking at the template yourself
Perhaps you've introduced some case in the code I'd not run across before. Could you please email me your full template code (go to edit HTML, check the box, then cut-n-paste the textarea contents) so that I can look at it and determine how this should be implemented in that template?
I have updated this post to fix some bugs that were found in it… try it again, it should work now
One of good reference that I ever found. Thanks for your resources leaving on my blog
wishes
nhk
Awesome hack. Thanks very much. Made the transition from classic to beta templates very easy.
There is a little bug I think: instead of out=out.replace(/\[\[BODY\]\]/,data.items[i].content);
you want out=out.replace(/\[\[BODY\]\]/,data.items[i].summary); in function peekaboo_comments_display()
.content worked fine for me, either should usually work… what blog required .summary?
when I tried, the comment body would always be "undefined". So I suspected the output of xoxo script. I ran the script manually and received the following o/p: peekaboo_comments_display({"xmlns":"http://www.w3.org/2005/Atom","xmlns:opensearch":"http://a9.com/-/spec/opensearchrss/1.0/","id":"http://kousik.blogspot.com/feeds/3670026104565873298/comments/default","updated":"2006-10-16T01:33:11.294+05:30","title":"Hacking | Photography | Bird-Watching : Purple Swamphen (Porphyrio porphyrio)","link":[{"rel":"alternate","type":"text/html","href":"http://kousik.blogspot.com/2006/10/purple-swamphen-porphyrio-porphyrio.html"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://kousik.blogspot.com/feeds/3670026104565873298/comments/default"},{"rel":"http://schemas.google.com/g/2005#post","type":"application/atom+xml","href":"http://kousik.blogspot.com/feeds/3670026104565873298/comments/default"},{"rel":"self","type":"application/atom+xml","href":"http://kousik.blogspot.com/feeds/3670026104565873298/comments/default?max-results=25"}],"author":{"name":"/<0USIK"},"generator":{"text":"Blogger","version":"7.00","uri":"http://beta.blogger.com"},"opensearch:totalresults":"1","opensearch:startindex":"1","opensearch:itemsperpage":"25","items":[{"id":"http://kousik.blogspot.com/feeds/3670026104565873298/comments/default/1202086234087470172","published":"2006-10-16T01:33:00.000+05:30","updated":"2006-10-16T01:33:11.294+05:30","title":"welcome back","summary":"welcome back","link":"http://kousik.blogspot.com/2006/10/purple-swamphen-porphyrio-porphyrio.html#1202086234087470172","author":{"name":"TMaYaD","uri":"http://mvfb.blogsot.com"}}]});
You can see there is no content field, but I thought I could use summary instead.
But great hack, BTW!
Yes! Thank you!!
I already used your peekaboo-comments hack before I swichted to Blogger Beta. And now I land to your blog again! Great work
I have changed the code to allow for .summary if .content is undefined or empty
I use Cool Iris Preview extension and I can see a post page which includes the comments when I hover over the comments link but if I click on comments it just opens and closes but it doesn't show the comments. I have been pretty careful with my hacks and I followed your directions exactly. Do you think the peekaboo hacks can be the problem? It's like the comments link has no target. Please help.
Oops, all of a sudden it started working. I think blogger was having a hiccup because I couldn't leave a comment here either. It looks good so far.
I can't seem to duplicate your problem. If I go to your page (http://debsquirkyweb.blogspot.com/) and click the comments links they just pop open like they're supposed to. The post page does not come up, nor do you leave the main page, they just pop out.
The comments link does still point its HREF to post-page#comments, but it never goes there when you click because the JavaScript that pops out the comments also disables that.
Hi there,
I just would like to display the peek a boo comments and keep the origal Blogger comment form (not the asynchronous comment form ^^)… So tell me, which step in your post i should pass?
i'm success ,you're so great,thanks a lot!!
Do you mind me translating your hacks into chinese?
@kca - none, this hack has absolutely nothing to do with the comment form. They're not even remotely related hacks.
@咖啡鱼 - not at all! Translate away
Just please be sure to credit me as the original source and give a link 
Some curious users have asked how one can make the peek-a-boo comments identical to the item pages. You change the first part of the code in step #3 so that the variable is being assigned a code template that matches your comments. When I get my template out, it will have this done for itself.
Thanks now it s working liek a charm!
But i go a problem:
When you are using the peekaboo the comments are not displayed like the item page, do you have any idea how we can get ride on it?
Kca, please see this comment, right above yours.
Thanks so much, I've been waiting for this hack to switch to the beta template. On my classic blog I had a hack using cookies that told my readers how many comments are new since they last visited. Can you do that?
Definately can try. Why don't you add it to http://editthis.info/bloggerhacks/Request_Hacks and see if anyone bites. If they don't, I'll more than likely get to it myself
so that the variable is being assigned a code template that matches your comments.
Alright,:)
Could you please repeat what you say, but this time just think you talk to baby of 5 years old?;)
Thanks!
Never mind about my previous queestion, i just fix it.
But now i got an other one:
I just see some slowness in the peek a boo, do you know how can i host the external script inside the templates?;)
thanks for the hack!
if you wish to change comments styles, you need to create/change some style definitions in 'edit html':
change
#comments to .comments
#comments h4 to .comments h4
define
.comment-poster
.comment-footer a, .comment-footer
.innerCmntBody
.comment-timestamp
@kca - glad you go it figured out
If for some reason you wanted to host the external script inside your templates you can just go the the script's URL (from the SRC attribute of the <script> tag, & becomes &) and cut-n-paste. Imho this could make it slower for page loading (hence why I didn't do it that way) because caching on the script no longer would work across pages. I am considering making an alternate version of this that does not load comments until you need them that would result in faster page load times 
Hi,
I've installed this hack, it works fine, but I'm gettin a javascript error message on Internet Explorer: "items is null or not an object."
Internet Explorer is known to give errors it shouldn't and generally be evil. As long as it is actually working it should all be cool
Now eveything works great!:)
But an other question: I would like the opposite: by using the peek a boo to show the comments, and if the visitors want to hide them, they just click on the 'comment' in the post footer.
To get this behaviour, remove the following code from step #6:
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
Damn! it s look great now, thanks a lot again, how can i thank you…? if i had a sister, i would send her to your house, but she's ugly, so :O) just say thanks huh?
^O^
I wish you can fix this error on IE, some of my JS installed in my blog is not working good becasue of this error occur.
hi,
i tried using your hack but after following all the steps i couldn't get it working. When i click on 'comments', an empty space appears where the actual comment should be.
By the way, how did u do to have this easy 'leave your comment' dialog without going to a new page?
Tnks!
Hi Singpolyma,
I've installed your hack, it works fine. Is it possible to add a blank line between each comment? Thanks
@Rui Barreiros - I cannot find any of my code in your blog — did you take it back out?
The comment form is from this hack, but unfortunately will not work with Blogger BETA.
@protesto - Adding the following code to your <head> section should do the trick:
<style type="text/css">
.comment-timestamp {
margin-bottom: 2em;
}
</style>
Thank Sin, it's fixed now.
Thanks for replying sing. I have one more question. The size of the comment font is smaller than default size now. I think it's because of your hack. How can I fix it? Example
Try:
<style type="text/css">
.comment-body {
font-size:14pt;
}
</style>
Change the 14 to the font point size you want
OK so what have I done? I'm getting a problem that a previous person had. When I click on comments it pops open but no comments. I then remembered I'd set comments to open in a new window so I switched that off and still no luck. I'm not getting a proper link when I hover over comments like I do with my other blogs. Could you take a look at Harwich to Hong Kong? Please tell me I've just simply cocked up somewhere….
@Laura - There seems to have been a slight glitch in the way the code handled your particular blog. I have updated the code - please reinstall and see if that fixes it
Oh! thanks for your quick response but no luck. Just the same. Things may have got even worse now with my code tweaking…
Ah, ok, I've updated the code yet again. If you reinstall and it still doesn't work, email me with your template and I'll try to do some hard-core debugging
Thanks Singy. I've got some crazy date stamp of the 1st January 1970 on my comments but at least I can see them now. Thanks for sticking with me! Doing a bit of an overhaul of this blog to make it a bit nicer and this helps lots.
…Oh crikey! Doesn't work for firefox on older posts and all comments are shown on older posts on Safari, anyway. I use Safari most, although blogger doesn't seem to see making it work a priority. The 'older posts link' doesn't work at all on this browser. I'll send my template.
Hi,
I installed the hack and did some template hacking myself, and it worked fine. Homewer, I noticed (by creating several blogs and testing) that as soon as I either change the blog's address or edit some page elements using the editor, the hack stops working - ie. clicking the link pops up the comment area but shows no comments.
Seems to be a bit random - adding a new element to the side bar didn't break it, but rearranging them did. So I undid all my changes. I also replaced all of the code with a copy I had taken before toying with the elements - but the peek-a-boo still doesn't work.
Any ideas of why this happens and how to get it working again?
Oh, and just to clarify - I didn't change the address with the blog in question, only the elements, so that shouldn't cause the problem.
I just installed it in my Test Blog and it works great. But there are two things that I'd like to see, if possible.
Is it possible to liknt the poster name to their profil on the main page?
And a second thing, can you give me a hint which css i have to change in what way to that the main and the item page have the same margin? the main page is like i want it now, but the indents on the item page are not
Hey awesome hack. Worked so smoothly. I'm just a little fussy here. Is there anyway you can make the authors of the comments link to their profiles like it does in the post a comment page?
Thanks A million!
Thanks for your time and effort! Still getting the funny date on my comments though. They're ok when listed on the pop-up window to add a new comment but otherwise are stuck in the 1970s! The easiest thing would be to remove the time-stamp from my peek-a-boo comments altogether. Now where about is that in the template…..?
@Arto Kekkonen - This may be caused by Blogger's default editor rewriting the template and removing the hack (or corrupting it). Shouldn't happen often, but if it does, just reinstall the hack from here
@Jan - comment-body is the class for the main comment text. You can not link to author's blogs or profiles from the main page because that data is not available in the feed Blogger provides.
@Laura - I still can't understand why it's messing up the dates for you and no-one else. To remove dates from the output of the hack though, just remove [[DATE]] from the code in step 3.
Thanks so much! The removing the date bit I even managed to work out for myself. I guess the 1st January is an important date??!!
Singpolyma, Hello,
I my blog is a master piece ^^ with your hack, and with the json update rocks, i can see clearly the difference., thanks for your work.
Now i got a special request, do u think is possible to play with some cookies in order to give to the visitor the possibility to show or hide permanently the post, for example:
-Show/hide the post comments
-Hide all comments (main blog, archive, -and labels)permanetly
-Show all comments permanetly
It's possible to do — I'll take a look when I get time, but I can't promise anything
Hello,
I've got my comments working correctly, sna I did a little tweaking in font size and such. My question is, why is it that the comments are opening below the (blue line) border between posts and into the post below?
Can I fix this? And does this make any sense at all? Heh.
Thanks in advance, I suck at this stuff.
http://celebritysmack.blogspot.com
http://celebritysmackblog.com
@Spicy Pants - Your normal comments section on the item page is also after that line. If you want to move the main page section to before the line move this code:
<script src="http://celebritysmack.blogspot.com/feeds/3406064048280111796/comments/default?alt=json-in-script&callback=peekaboo_comments_display" type="text/javascript"></script>
To before this line of code:
<p class="post-footer-line post-footer-line-3"></p>
That should do it
Great hack. Thanks!
I noticed, though, that if the blog feed setting is set to "none" (which also affects the comments feed), then the comments don't appear when you peek-a-boo. It drops down, but it's blank. Maybe this was the problem a few people had.
You might want to mention this. Under Site Feed (in the Settings tab), Blog Feed should be set to "full."
Thanks again,
Paul
hi, I didnt read through all the comments, but I`m kinda sure no one else might be a noob to ask such a stupid question, how do I change the color of comment to white? my font color is set to white in the template, still the comment text is black and hence unreadable. check it at notreallymybloganyways.blogspot.com I`m testing the emplate hacks on this first before I port it to my main blog.
I have one more Q. After adding Peek-a-Boo comments and a third column, my blog seems to freeze up at points when it is loading. It is driving me crazy! Is it fixible? Or is it caused by the amendments I have made?
THANKS AGAIN!
I love the hack. It's great stuff. One of my commenters mentioned that now it is a bit harder to actually LEAVE a comment after a long list of comments since you have to first expand them and then scroll to the bottom where the link is to leave a comment. Is there a way to easily just add a "leave a comment" link next to the link to expand the comments?
@Paul - Thanks for the observation!
@yash - You might try some code like this in your <head> section:
<style type="text/css">
.comment-body {
color:white;
}
</style>
@Spicy - I am unable to reproduce your problem. I go to your website and it works just fine.
@-L- - You might try finding the code in your template for the link that opens/closes the peek-a-boo comments and adding this code just after:
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a>
</b:if>
hi, thanks! this was of great help.
but i ran into a similar problem like spicy pants.
http://ilkeryoldas.blogspot.com/index.html
i would like to show the comments within the post box and moving the script before "p class="post-footer-line post-footer-line-3"/p" does not work!
what to do?
(if it is necessary, i can email you my full template as well)
Guess who? I'm back!
First of thanks for taking to time to check my blog. It must be my computer. I have been having all sorts of issues.
Secondly, I am having a major problem and I don't know where else to turn. Thought I could pick your brain reagrding it.
As of yesterday Blogger will no longer allow me to post pics. I get an error that says, "You must enter at least one image." Whether I try to upload one image or five, I get this error repeatedly.
Any ideas? I have tried asking people in Bloggers help group but haven't gotten any responses to what it could be, or anyone in a similar situation.
Thirdly, 'ilker'- It didn't work for me either.
THANK YOU SING. You have been a huge help to me this past week!
XOXO
@ilker and spicy - send both of you your template to me and I'll try to get the comments moved up to before the lines for you.
@spicy - Sorry, can't really help you with the images. I can't think why that wouldn't work. As a workaround, you can use allyoucanupload.com until you get it fixed
Hi
This text this translated by google. My English is bad. he wanted to know like I can be able the visual styles of the commentaries and the icon to erase commentary that does not leave.
@srxo - To change styles you'll want to use the CSS classes:
.comment-poster {style}
.comment-body {style}
.comment-timestamp {style}
I might look into getting the delete icon back, but I'm not sure if that's possible or not
Hi :o),
I just check my google webmaster tools, and i saw that i got 326 'Unreachable URLs" for example:
http://00844.blogspot.com/feeds/112736018426950460/comments/default?alt=json-in-script&callback=peekaboo_comments_display
do u have any idea about it?
Hrrrr… did u think about my last request;) ?
Hello. Thank you for the hack! I was waiting to update my blog to the new blogger since I didn't know how to do this. I followed your instruction, and it is working wonderfully. I do have one question. Since implementing this hack, my blog seems to open up rather slowly… Considerably slower than yours, and I was wondering if you might have any insight as to why that is. Thank you for your help.
It seems that whenever i have the "older posts" link at the the bottom - if I click that, then if no new page is loaded (IE the older posts just "appear" there) then the PeekaBoo comments thing does not work =(
Since adding this hack, I've noticed that the page has some problems in IE. Specifically, the banner doesn't show all the way, and when you scroll down the page and then back up, most of the banner disappears. I found a thread on blogger groups that said mixing old and new html code can cause problems in IE. Could this be what is happening? It looks and works perfectly in Firefox.
@kca — no idea where those messages are coming from, but as long as they don't affect user experience, it shouldn't matter
As per your request — I have a lot of cookie-related requests out there right now. Hopefully I'll get to them in due time 
@change_and_grow — My blog does not use this yet (I'm on the old Blogger). Yes it's a bit slow. I'm looking into that.
@Ed — debugged this before. It's something I'm looking at fixing more completely, but for now just remove the id=whatever attribute from the code for the previous post link and it should work
@-L- — It could be that you have a lot of HTML4 or just broken code in your page (typical for even many of the hacks out there). My hacks strive to be XHTML1.1 compliant (although I don't always quite get there). If your page is invalid (and all Blogger pages are to some extent) this can cause some issues, yes
I tried to paste in the javascript for this and it didn't work. Do you copy all the text? I really appreciate the hack, but would love to have the script hosted in my template. Thanks!
@Ghost Dog — You would have to encase the text from the JS include like so:
<script type="text/javascript">
SCRIPT HERE
</script>
This post is really interesting and I want it to work for me:P
But it doesnt haha
OK, I followed all your steps and pasted everything exactly how you mentioned it.
But it doesnt work:S
Everytime I save the template I get the following message:
XML error message: The element type "b:skin" must be terminated by the matching end-tag "".
What did I do wrong:S
Could you please help?
Thanks!
@bo18 — That error sounds like it has little to do with this, which I don't understand. That says that your skin in malformed, but this hack doesn't modify your skin! Perhaps email me your template and I'll take a look?
Thanks for your page. I also want comments to show underneath the post. I have followed your scripting instructions 3 times with no results.
My blog is http://www.evominute.blogspot.com
Can you offer some specific troubleshooting?