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. Check out my casino website www.top10slotgames.com for how these codes work.
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&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 = '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 red max comments with 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.
I have updated my Peek-a-boo Comments for new Blogger hack to include some bug fixes, the use of an external script (for performance and readability), and comment author links.
Blogger now has an inline comment form that is native: http://buzz.blogger.com/2008/10/commenting-made-easier.html
Update 2007-02-08 : Contrary to a bit of a misunderstanding this hack DOES work with the new Blogger out of beta. If you can’t find the code try checking the ‘Expand Widget Templates’ checkbox. I have added a bugfix for the redirection bug some were experiencing.
The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.
Have no fear — there is good news!
Since we must use Blogger’s ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can’t style that page) and would be displaying comments twice on the page, etc.
Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn’t create that ugliness!). Visitors can close the ‘popup’ without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can’t guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)
To install the hack, follow these steps:
- Go to the ‘Template’ tab and select ‘Edit HTML’.
- Check the ‘Expand Widget Templates’ box.
- Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=1093361' type='text/javascript'/>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=2655847' type='text/javascript'/>
<link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>
- Find this code:
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
and replace it with this:
<a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>
- If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don’t know, you don’t) then find this code:
<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 this:
<b:if cond='data:post.allowComments'>
<a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
- Find this code:
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
And directly after it put this code:
<script type='text/javascript'>
var isLoad<data:post.id = 0;
function checkDeactivate<data:post.id {
if(isLoad<data:post.id > 1) {
//<![CDATA[
document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>';
//]]>
window.location.reload();
}//end if isLoad
isLoad<data:post.id;++;
}//end function checkDeactivate
</script>
<div expr:id='"comment-form-" + data:post.id' style='display:none;'>
&lt;iframe onload="checkDeactivate<data:post.id src="<data:post.addCommentUrl/>&amp;isPopup=true#commentForm" frameborder="0" style="border-width:0px;width:100%;height:380px;"&gt;&lt;/iframe&gt;
<div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div></div>
- Save your template
If there is one hack I get requests for more than any other it is this. My inline comments form on Blogger BETA. It was my first ever hack (before I had even fully moved to Blogger), and probably still my favourite as the most useful. I recently blogged somewhat optimistically about my progress, which only increased the demands. I regret to inform you that I have hit a wall. Perhaps not unsurmountable, but a huge one.
The security token scraping did not work.
I’m not entirely surprised. After all, Blogger added the security token code to prevent people from doing just what I am attempting. I cannot say that I fully understand how the whole technology works, or why my attempts to circumvent it have failed, I only know that they have. It may take help from Blogger themselves (bah!) to get this working.
For the community : to those who wish to put their heads with mine on this problem. The code for this hack on BETA, such as it is for as far as I’ve got, can be found at the following URLs:
http://jscripts.ning.com/get.php?xn_auth=no&id=1338954
http://singpolymaplay.ning.com/blogger/blogger_beta_comment_form.txt
http://www.ning.com/view-source.html?view=app&op=viewFile&appUrl=singpolymaplay&fileName=commentFormData.php¤tDir=%2fblogger
As a side note : installing this hack as is actually does sort of work. But it errors every time and requires that the user push the button on the inline form, and then on the other form. (Similar to what is happening here since I was forced by mega-spammers to turn on word verification…)
I have run up into a wall in translating my inline comment form hacks to Blogger BETA code. The translation is done, but the forms don’t really work. Why not? The submission always produces an error. A quick analysis shows that Blogger BETA comment pages generate auth keys now to prevent non-Blogger forms from spoofing info (just what this hack tries to do). While this is a security feature, it makes this hack (as it currently is) pretty useless.
So what am I going to do? I am going to attempt the creation of an offsite PHP script to scrape the auth key out of the form code (surprised?). Based on how these systems usually work, it should fix the problem if this is then included (via JavaScript) into the comment form code. What this does mean is that the comment form will require JavaScript to fuction, and so I will probably just translate the more popular asynchronous version which does already anyway (since the purpose of keeping the other version alive was to have one that didn’t require JavaScript).
If this approach is successful I will create a similar partner script to enable the inline comment forms to work with word verification, something many people have asked for in the past.
So I’m not giving up just yet, but the process may take longer than I had anticipated. To see the literally-translated hack with error messages see my BETA test blog.