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.

I have a version of this script for the new Blogger as well.

Many people have installed Johan Sundström’s del.icio.us Categoriser Script and reaped the benefits. Some have also used my trackback script to enable outbound trackback inside Blogger. Now the power of these two scripts comes together to benefit everyone!

With Johan’s full approval I have married the two scripts into one categoriser and trackback script. This script is set up in such a way that installing it should overwrite any previous installation of Johan’s script and keep your existing script settings. To find out more about the categorising and pinging functions of the script, please read Johan’s post.

The trackback features work slightly differently than they did in my previous script. On the post-create page there is now a ‘Trackback’ textarea, instead of a form on the ‘post complete’ page. Enter one or more trackback URLs (each on it’s own line in the textarea) to use the trackack feature. After publishing the post your trackbacks will be sent out automatically and the status will be displayed on the ‘post complete’ page. For more information on trackback, go to Wikipedia.

There are also a couple minor new features for the categorising in this release. One is the option to use the first 200 characters of the post body in the extended field on del.icio.us, instead of the datestamp. The ‘Tags:’ label that one clicks to change settings is now blue, and your cursor should change into a hand when hovering it. Also, when republishing your whole blog the link to del.icio.us from your last post will not be displayed.

Install the Greasemonkey Script

I have updated my version of FreshTags to include support for asynchronous loading of posts. Now if you add the following code to your template:

Instead of the drop-down box taking you over to the tags post page it will load the posts for the tag combination for you asynchronously in the sidebar.

A nice side-benefit of this is that you may now use all the other FreshTags tag-list types (except custom), including flat, flat-multi, list, list-multi, scroll, drop, and sub. Just put them in the above code where I have ‘drop-add-async’.

You will have to be using the jscripts.ning.com version of my FreshTags implementation for this to work, instead of the old one hosted on AWriterz. The code for the new include (which you can replace the old one with to upgrade) is: