Singpolyma

Archive of "Comments"

Archive for the "Comments" Category

Comments on Main/Archive Page (Peek-a-Boo) in Blogger BETA

Posted on

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.

Comment Feeds Without Well-formedness

Posted on

In response to the popular confusion about XML well-formedness and a recent nudgeing by Greg, I have upgraded Blogger Recent Comments. People who have been there before will note that there is now one less instruction — XML well-formedness is no longer necessary! I have tested this with a Blogger template on which I purposely broke well-formedness and the comments still came through fine! Originally introduced on this blog, Blogger Recent Comments is a Ning app that can automatially generate RSS, JavaScript, and JSON feeds of all comments on your blog. Setup is now just three easy steps!

Comment Photos and Highlighting

Posted on

PurpleMoggy has created a set of instructions for using this on Blogger BETA. I have updated my hack to support his new features and fix the bugs he found. There is also now a new ‘no image’ image.

Awhile back I wrote a post detailing my hack for adding profile photos to comments. Unfortunately that post was rather technical in its explanation. This post attempts to deal with adding the hack to your blog in a more user-friendly fashion and also with using the hack to highlight blog-contributor comments.

Step 1 – The first thing you need to do is find the comment section in your blog template. Edit your template and scroll down until you find the <BlogItemComments> tag. The code inside should look something like this:

<div class=”comment-poster” id=”c<$BlogCommentNumber$>”>
<a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</div>

<div class=”comment-body”>
<div class=”innerCmntBody”><$BlogCommentBody$></div>
</div>

<div class=”comment-timestamp”>
<a href=”#c<$BlogCommentNumber$>” title=”comment permalink”>4/26/2006 07:49:51 PM</a>
</div>

Step 2 – If you plan to use comment highlighting (so that the comments made by blog authors look different from those of users) this must be wrapped in another tag so that all of the code for each comment is in one tag. Like so:

<div class=”commentelem”>

<div class=”comment-poster” id=”c<$BlogCommentNumber$>”>
<a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</div>

<div class=”comment-body”>
<div class=”innerCmntBody”><$BlogCommentBody$></div>
</div>

<div class=”comment-timestamp”>
<a href=”#c<$BlogCommentNumber$>” title=”comment permalink”>4/26/2006 07:49:51 PM</a>
</div>

</div>

Some blog templates will already have a tag around their comments, as will those using the ‘standard’ comment markup. If you have one of those templates just write down the class of the wrapping tag or add one (the underlined section above).

Step 3 – Next we need the class of the element where we can look for the link to the author. In the example code above this would be comment-poster. When in doubt use the class of the overall wrapping tag. Once you have it, write it down. Count the number of <a> tags there are before the <$BlogCommentAuthor$> tag and write this number down (in the above example it is 1).

Step 4 – The only thing left to do in this part of the code is to insert the element where the profile photo will go. Add this code right before the <$BlogCommentBody$> tag: <div class=”commentphoto”></div>

Step 5 – Now go to the <head> section of your blog and add the following code:

<script type=”text/javascript” src=”http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605;
<script type=”text/javascript”>
//<![CDATA[
function thisblog_showCommentPhotos() {showCommentPhotos(‘commentphoto’,’class of author wrapper‘,# of a tags,’main wrapper class‘,'<$BlogURL$>’,’highlighted text colour‘,’highlighted text background‘;}
addLoadEvent(thisblog_showCommentPhotos);});
//]]>
</script>

Where class of author wrapper is the class you wrote down in step 3, the # of a tags is the number you wrote down in step 3, and the main wrapper class is the class you wrote down in step 2. If you are not going to use comment highlighting the last for parameters can be left off (from main wrapper class to highlighted tex background) otherwise you have to fill in the color you with the text and background of highlighted comments to be in their appropriate spots above.

Step 6 – Save and Republish!

OpenID for WordPress

Posted on

Someone else has written a (imho) better plugin. I have a backlog of tweaks to do to this plugin to make it work on more systems which I haven’t got around to blogging/integrating. Note that this new plugin does not support using your blog as an OpenID server. It does, however, support sreg (but not hCard) and integrates into the WordPress account system.

I have modified Alexander Nikulin’s plugin for WordPress that enables users to leave authenticated comments using OpenID and enables blog owners/contributors to use the blog as their OpenId. I have made the plugin compatible with WordPress 2.0, cleaned up the validity of the XHTML produced, and fixed a bug that kept some sites from finding the server.

It is reccomended that when using the server the blog admin use the blogs main URL as their OpenID but that other users/contributors use BLOGURL/?author_name=USERNAME.

When returning to the post page after posting a comment, if the comment was held for moderation ?moderated=true is appended to the URL. Adding code like the following will alert your users to this fact:

<?php if($_GET[‘moderated’] == ‘true’) echo ‘<div style=”display:block;padding:20px;background-color:#ccc; font-weight:bold;font-family:sans-serif;font-size:12pt;”> Your comment is awaiting moderation.</div>’; ?>

Possible future features:

  • Support for sreg / hCards to get an actual name for the commentor instead of just using their URL
  • Support for sreg / hCards in the server implementation
  • Support for YADIS

Download the plugin

To install the plugin:

  1. Download the gzip from the link above and unzip it
  2. Upload the resulting folder into your /wp-content/plugins/ directory
  3. Edit your template and replace your comments form code (likely in comments.php) with
    <?php include dirname(__FILE__).’/../../plugins/openid/openidform.php’; ?>

Profile Photos With Comments

Posted on

Blogger does not provide a template tag for displaying the profile pictures of commentors in your blog template. Johan Sundström had created a way around this using an IFrame, but I found that solution to be somewhat buggy, even on his own blog. I have modified some of his code and added some of my own to create what I feel is a cleaner hack. I have bundled the majority of the JavaScript into a JScripts entry and it also uses a script I wrote to scrape Blogger profiles to JSON(P) [example]. The code to include the hack into your template is surprisingly simple:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605 </script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){showCommentPhotos(‘class of elements to put photos in‘,’class of elements where links to authors can be found‘,number of <a> tags before the link to the author (0 if none));});
//]]>
</script>

You will need to add a <div> or other tag (with the class you pass in first) to the comment section, and style it so that the images show up the way you want. The second class you pass is the element containing the link to the comment author, you must add a class to this element if one does not exist. The third parameter is the number of <a> elements in this element before the link to the author. The script runs after page load and should thus have no adverse affects on initial load times.