1. Asynchronous Peek-a-boo Comments

    body

    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.

    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.

    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" 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&amp;amp;id=2941927' type='text/javascript'/>
    4. 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/>').style.display = 'none';
      </script>
      </b:if>
    5. 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>
    6. 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>
    7. 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 + "#"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#","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 + "#;' 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).
    8. 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.

    Tags:
    Creative Commons Licence © 2006-2008 Stephen Paul Weber. Some Rights Reserved.
    Stephen Weber at 2007-01-09 13:26 | 147 Comments / Trackbacks