The Web site of Alex S. Jones, community catalyst, Refresh Austin organizer, UX Geek, Web technologist, speaker, barbecue acolyte & information junkie

Favatars

Paul James presents an intriguing, and quite usable idea to provide ubiquitous, decentralized avatars (graphic representations of a person, usually seen in Web forums, chat rooms and instant messaging programs) throughout the Web. Favatars, as he has dubbed them, are the favicons that so many people already use on their site (look in the address bar of your browser, and you should see an orange block, with a white ‘A’, that’s my favicon). The idea has a lot of potential, and as it is so easy to implement, I expect to see it added to various blogging packages and content management systems in the future. He has already provided the PHP he uses to create Favatars in the comments on his site.

I have implemented Favatars in the comments here on this site. So, if you have a favicon on your Web site, and want to test, just leave a comment to this post.

To implement this, cut and paste the code he provided within the first set of php tags at the top of your index.php, I would recommend you place it right after the require (blog header) line. Then, to place the icon next to a comment, place the following code in your wp_comments.php page, wherever you want it to appear (remove the line breaks, they are there for readability only):


  $CommentIcon = getFavicon($comment->comment_author_url);
  echo '<img src="' . $CommentIcon . '"
             alt="' . $comment->comment_author_url . '"
             class="CommentIcon" height="16" width="16" />';
  1. Favatars in action. You should see the orange block with a white ‘A’, next to my name below this text.

    December 12, 2004
  2. Giving it a shot.

    I have something like this implemented on the baby blog (MT) but hadn’t looked into putting it on my WP blog.

    December 12, 2004
  3. It seems to be a bit flaky… not sure why, but it won’t always show the image.

    December 12, 2004
  4. I followed you instructions but nothing shows up. There’s no url in the img src. You can’t copy and paste the code of that guys site

    chris
    December 12, 2004
  5. I think the problem is with fopen. I tried adding the line ini_set(’user_agent’,'MSIE 4\.0b2;’); but still nothing happens. I removed the @s and I keep getting: failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden

    chris
    December 12, 2004
  6. I found that the code is a bit flaky, sometimes it shows the icon, and sometimes it doesn’t. I haven’t had a chance to test the code, but I hope to in a week or two.

    December 12, 2004
  7. I’ve turned Paul James PHP code into a Wordpress plugin, which can be found here:
    http://www.noscope.com/journal/2004/12/favatars

    It’s still flaky, but works better. I’ve increased the timeout to 1.0 rather than 0.1 - this makes the favatars show up almost every time. The delay can then be lessened using Matt’s Staticize Reloaded. It’s not perfect, but it works better for the time being.

    December 12, 2004
  8. That’s great Joen! I’ll download and install it as soon as I get a chance.

    December 12, 2004
  9. Sounds like an excellent idea. I’ve been using something similar on one of the layouts on my site for some time, where when I link to news items, the favicon appears as the bullet in <UL>. When I get around to rewriting my blog, I’ll have to consider adding this too.

    April 4, 2005
  1. [...] I am, of course, writing about this because I have now implemented “favatars” on this very website. Leave a comment — try it out. 1. Technical Background The initial implementation of Favatars here on Noscope was based on work by Alex Jones that in turn relied on code by Paul James. The basic idea was to analyze the URL of commenters using regular expressions, looking for the presence of a favicon.ico. [...]

    October 10, 2005

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

Post Information

This entry is categorized under Web Development and tagged .

If you would like to follow the discussion on this post, you can follow the comment feed.