A Better Blogroll

Friday, April 21, 2006 at 7:38 pm | Comments off

I decided the other day that it was time to update my "blogroll", or my Friends and Colleagues links. I had two ideas that I wanted to implement, and since I just finished a big project, I decided to take a bit of time to work on some of the things I've been wanting to do for a long time.


I wanted to include the people's favicons next to their links to make them stand out from each other a bit more than just a list of links seems to do. Plus, it just looks so darned sexy...

I thought about using PHP to dynamically pull the icons say, once a week, but ended up deciding on just manually creating .gif images of each icon. I didn't envision a big problem with this, as the icons won't be changing often enough to cause too much trouble.

New Friends and Colleagues links include the sites favicons

Latest Entries

I also wanted to pull in the last 3 blog entries for the people I was linking to. To do this, I simply set up a database with all the info for each friend, including a link to their RSS feed. I then parse the RSS feeds with PHP (thanks to the XML_Feed_Parser API from pear.php.net). I'm using blo.gs to track when the sites have been updated, to keep down on the number of times I need to ping the RSS feeds. This way, I only need to ping them if blo.gs tells me there is new content. Since many of the sites ping blo.gs for their sideblogs/blogmarks/links, if blo.gs indicates that the sites have been updated, I compare their last post title to the version I have stored. If they are the same, I ignore them, as I obviously don't want to update the time. If not, I update the entry titles, links and time of update that I am storing.

New Friends and Colleagues links can expand to show the last three posts

Wrapping up

Overall, I'm extremely happy with the results. I think it is much better than the standard list of links that most people are using. I think the visual recognition that goes along with the favicons will go a long way in making the list more meaningful. Anyway, you may need to reload the CSS and JS for it to work right, so please do that and then let me know what you think. I'm rather proud of it, myself...


Faruk AteĊŸ
April 21st, 2006
7:47 PM | #

Cool stuff, very nice!

Nathan Logan
April 21st, 2006
8:20 PM | #

Very neat. But you forgot to .zip up your code and post it here under a Creative Commons license. ;)

Great implementation of this - I remember talking to you about it a bit at SXSW06. Glad to see you came through on it.

Nathan Logan
April 21st, 2006
8:23 PM | #

Sorry to spam your comments, but after messing with it, I think your users might be better served by making the link to the site clickable, while adding a "(+)", or something to that effect, next to the name. Upon clicking the plus (or mousing over it), they would then see the most recent article information. But I've been wrong before. =)

April 21st, 2006
9:10 PM | #

Very slick, minus one small thing: on a mac in firefox, Malarkey find's himself occupying two lines (strangely enough it's fine in FF/WIN). Not a huge issue, but the wrap looks a bit odd.

One of these days I'll find some time to step away and work on my site for a change, instead of constantly working on sites for software and motocycles...

Jeff Croft
April 21st, 2006
9:38 PM | #
April 21st, 2006
9:42 PM | #

gb: Firefox on Mac tends to computer larger line-heights than Firefox on other platforms; that might be what's going on here.

Also, what Jeff said.

Ryan Brill
April 21st, 2006
9:57 PM | #

Nathan - I may experiment with that a bit more later... I was trying to come up with some icon to represent it, but nothing seemed to fit. I also tried the [ + ] idea, but didn't like that either. We'll see.

gb - If the title is too long, it drops to 2 lines, it's as simple as that. It did the same thing before I added this.

Jeff - Nicely done. I would love it if more people would go this route, as it's so much easier to look at. I've really only seen a couple examples of this before (and I don't think I've ever seen the two mixed). It's definitely an improvement over a plain 'ol blogroll. ;)

Jeff L
April 21st, 2006
10:01 PM | #

Most of them wrap on my display, some even to 3 line. It's likely because my monitor is set to 120dpi, not 96. But it doesn't look nearly as good as your screenshot. Cool idea though.

April 22nd, 2006
12:04 AM | #

Yeah, I just wanted to make sure you knew. I'm constantly having to make minor adjustments to compensate between the text rendering of FF on both platforms.

Dan Rubin
April 22nd, 2006
2:11 AM | #

Nice job Ryan, especially the rss/blo.gs stuff... I may have to steal your source code for my reboot ;)

Mike Papageorge
April 22nd, 2006
1:26 PM | #

Nice, that is so much better for discovery of new and interesting content...

It would be cool if you could add some 'favorite posts' from those folks too, though this is a bit overkill, it adds to the "I like these websites" by giving it a bit of "Here's a few reasons why".

I've never had a blogroll as I thought it didn't provide too much value other then exits for the user, but with your implementation (and maybe my suggestion :) I may just do it!! Well done!

Dennis Bullock
April 23rd, 2006
3:02 AM | #

That is really slick!

Joshua Lane
April 24th, 2006
6:01 PM | #

Looks great Ryan! I'm also quite flattered to be included on the list :)

P.J. Onori
April 24th, 2006
10:53 PM | #

Very nice man. You're always coming up with cool stuff. :)

Portuzenkov Rinat
April 25th, 2006
2:20 AM | #

Icons looks beautifull! Really good stuff.

Comments are automatically closed after 45 days