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&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:
- 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.
137 Responses
@Anthony — if you want to paste the scripts into your template, be my guest — this has IS very slow however, which is why I highly recommend using the newer, much faster, asynchronous version 🙂
Thanks. Copied the script to another (less busy) host server. Pageloads are lightning fast now.
Oh yeah. Also had to delete a line in the script calling a second script hosted on singpolyma. Your servers are slow as molasses from my location.
@Anthony – glad you got it working 🙂 As I said, however, while the Ning servers may be slow (I know that’s true) the larger problem is just the way this hack works — I knew it would be slow the moment I wrote it, hence why I no longer reccomend it. The line you removed is known to be the slowest part of the hack, and probably contributed more to the speed increase than anything else 🙂
Nice code! Somehow I ended up with a divider line before the comments. How do I get rid of that?
I spoke too soon, looks like I can no longer add comments, I just get a loading window that never goes away. Thoughts?
@knoxfilms — This hack is not really supposed to affect comment adding in any way… I mostly recommend, however, that people use the asynchronous version.
Hello. I must commend you on your stellar hacks and javascripts for blogger. love the peek-a-boo comments! However, just recently I ran into a snag on my blogI am “The Man”: Musings of a White American Male (WAM!).
As you can see, the peek-a-boo comments work perfectly fine on the first page. However, when you click the “older posts” link at the bottom of my blog and move on to the next page, the peek-a-boo functionality no longer … functions. Any thoughts? I would REALLY REALLY REALLY appreciate your help! 🙂
Kudos on your fantastic javascripts and hacks for blogging. I particularly love the peek-a-boo option for comments, but recently I ran into somewhat of a snag on my blog, I am “The Man”: Musings of a White American Male (WAM!).
As you can see, the peek-a-boo comments work great on the first page. However, click the “older posts” link at the bottom of my blog, and the peek-a-boo functionality no longer … functions, on the archive pages.
Any thoughts? I would REALLY REALLY REALLY appreciate your help! 🙂
The date format that this picks up is: YYYY-MM-DD HH:MM how can I get this to pick up my ‘comments’ setting from the settings page? Do I have to manually manipulate it with javascript?
How do I change the dateformat of [[DATE]] in this context?
Thanks!
@Keith – please try the asynchronous version
@Alan – there’s currently no way to change the day format… I may add that feature soon 🙂
This is just impressive! I’ve been looking evereywhere on the Blooger site and there is nothing like this! All the templates you can see as an example show the comments on the main page, but when you try on you own new blog, it was impossible… until now!! Congratulations, and thank you very much!
Really great work!!>
Thanks a lot, was just what I#m looking for!
Hi Sing. I landed from google to your blog ~ looking for the hack to make inline comment box on blogger classic. The choice is either to convert my current blog theme to beta [I prefer this but it seems that would be a hard work since I’m dummies at editing hack] or just find the code for what I want.
There’s no search box in this blog.. and I wonder if you have any post related to my question. I’ll be very happy if you let me know the solution. 🙂
Umm.. One more thing. Do you have a hack to make expandable / peek a boo post? I’ve been trying hans’ hack ~ super peek a boo post ~ but I failed :S
Huge big thanks for your help. Enjoy your day..
@sundae — sorry, but there is no blogger ‘beta’ — it has been just blogger for over a year. No one codes for the backwards-compatibility hack called blogger classic.
I am trying to show all comments on the main page of my blog under each post and have tried the steps you give. I am not tech savvy at all, so any help would be great.
Try the asynchronous version http://singpolyma-tech.blogspot.com/2007/01/asynchronous-peek-boo-comments.html
I am a total noob. Can anybody explain to me what part of the hack to post in the head section exactly. Step by step instructions of how to do it would be really helpful. Thanks
@Anon – steps #3 & #4 go in the head, the rest go according to where the step by step instructions say to put them 🙂
This is cool man
tq =)
i tried, but for number 8, i can’t seemed to find this code.
when i save it, all my posts are gone. *sweat*
i wanna make it work so badly !!
🙁
NICE TEMPLATE 😳
@levian Your template may be different than the one I was modifying – try to find the code that has the same intention as what I tell you to replace 🙂
When I try this code or your asynchronous version, I get the same results, all of my posts disappear. Any chance of help? Thanks!
so i tried this on my blogger and it worked, but each comment appears twice. any idea what that could be about? anyone? anyone? beuller?
hi Stephen.. thanks for this great hack 🙂 I’m encountering 1 problem though.. I can’t seem to get the Author’s link to work.. When I had a look at the source codes, it just says .. I guess the undefined part makes it not able to link to whatever URL the comment author typed.. Do you think you can help me debug this? Here’s the site that I used your codes on.. http://jennysunphotography.blogspot.com/
@Anonymous, it’s been awhile, but IIRC the author links never worked on the main page. That was a blogger limitation at the time. I once got around it with a scraper, but that was slow.
thanks for the heads up Stephen.. Looks like blogger has gotta improve their standards if they wanna beat wordpress 🙂 I sure hope they come up with the comment feature with author links and etc for future template editing 😀
Hi,
I used your help above to show comments on main page rather than clicking on the comments button and open in a new page.
I was succeddful in getting the post comment box on the main page – however, the old comments do not show up on th same page. I need to click on that to show it again.
Please help- what do I have wrong. Thanks.
Hi Stephen..
Just thought you should know.. the site: jscripts.ning.com is currently down or not available according to their site.. so since you have a javascript file which is reference from that domain for this hack.. the comments aren’t appearing i believe its due to the domain being down right now.. 🙂
Thankyou for you post. I collect many useful info from it!
Great tips! I will try to apply on my blog!
Thanks thousands time^_^
I tried to set this up on my site, but kept showing up blank for all post. http://www.familyhistorytracing.blogspot.com.
Do you have comment feeds turned on, etc?
hey there, can i send you my template code by email, so you can please apply this code for me?? i tried once, but i got the message “TEMPLATE ERROR: No dictionary named: ‘post’ in: [‘blog’]” (without the “) can you help me? Thanks in advance! ;D
hi stephen, thanks for your reply,
i follow all your hack steps at my blog
http://enjoydshow.blogspot.com/
why my comments didn’t show, am i missing something… hope you can help me…
thanks a lot