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&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!