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.