My peek-a-boo comments for BETA hack has been updated to use the new native JSONP. It should run faster now and the IE bug some were reporting should be gone.

As promised, here is the revised version of my Feed Links Widget. Just click the button and follow the wizard!

Some Notes
Due to circumstances beyond my control, if Blogger changes the URL format for feeds this hack will break (and I will, of course, speed to fix it 😉 ).

If you want to make it easier for others to add this hack, clicking the button below will add the button above to your sidebar.

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.

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 😉 ).

1. Go to the layout on your BETA blog and select ‘Edit HTML’.
2. Check the ‘Expand Widget Templates’ box.
3. 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.

4. 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>
5. 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;amp;callback=peekaboo_comments_display”‘ type=’text/javascript’/>
   </b:if>
   </b:loop>
6. 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 = ‘none’;
   </script>
   </b:if>
7. Next, find the post-generating code. It will look start something like this:
   <b:includable id=’main’ var=’top’>
   <!– posts –>
8. 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>
9. 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(&amp;quot;comments” + data:post.id + “&amp;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>
10. Click ‘Save Template’ and, if it appears, ‘Confirm & Save’, then view your blog.