How to Create a Thumbnail Blogroll, a 20-minute hack

hdsep06.jpg

Yahoo! had one of its internal hack days [1] today and while work kept me from devoting enough time to work on an effort on the scale of last time, an email at 9am this morning did give me the chance to show at least something at today’s show-n-tell.

I’ve been thinking of picture-in-picture badges for a while now and like the concept of a blog’s sidebar acting as a portal to your editorial view of the world. Match this navigational concept to the fact that badges are becoming more and more like the online equivalent of wearing a branded t-shirt and colleague Cody Simms thought was there’s an opportunity for a badge which showed a collection of websites you liked.

So when I got an email from FavoriteThingz (no longer in service) that they have opened up their service to allow you to create multiple badges of just about anything you could think of, neurons fired off on a way to update the tired-looking plain text blogroll.

Faces of people you read like those you see on MyBlogLog (which is totally rad for its own reasons) don’t really work in the context of a blogroll when it’s faces of people you don’t really know. Japanese salarymen have a saying that your business card is your “face” and in much the same way, your blog is “your face” on the internet.

It’s not really a hack (more like a “hand-cranked mashup”) but it’s a cool concept just dying for a little scripting. So here it is, in five easy steps:

1. Go to the webpage thumbnail creation service, webshotspro.com, and enter the URL of a blog on your blogroll into the form on the page.

2. Right click on the 400×300 pixel image and save the image file locally.

3. Go to favoritethingz.com (no longer in service) and create a new badge. Click “add thingz” and “add items manually” on the next page.

4. Select “custom” from the dropdown and enter the blog’s title, URL, and “browse” to select the image file you just saved. Click “save & add another”

5. Repeat.

There you have it! Generate the code for the badge and copy it into your sidebar or anywhere else on your page for a cool looking interactive widget which is way more interesting than a long list of text links. For an example, check out how it looks on my blogroll page. (Favoritethingz, the service that hosted this hack is no longer in service.)

[1] Thank you Leonard & Chris Plasser for organizing a bang up Hack Day. I think I’m safe in saying that my hack was by far the least technically spectacular of the bunch. I had to leave early but did get the watch a few of the demos via the live feed and have to say that the hacks (over 100 by my count) this time around were even more impressive than before. The theme seemed to be, “simple yet revolutionary” – it’s amazing what you can do with a few lines of code these days.

10 Replies to “How to Create a Thumbnail Blogroll, a 20-minute hack”

  1. Pingback: kid's allright
  2. I don’t know exactly how it is supposed to look like, but it looks weird in Firefox (linux), I suspect there’s a problem with the badge code from favoritethingz.com, as I wasn’t even able to create one on their website.

    To continue with annoyances, I always browse using the noscript extension, which blocks javascript. This seems to me a reasonable behaviour: it improves security, and I can re-enable javascript for any interesting site, like yours… except that your blog calls scripts from 12 different domains! I really wanted to see if I could get the badge to work properly, so I went through the entire list, but more often than not, in such a situation, I just give up and go away.

    Still, I like the idea.

  3. Nice, I would suggest using the blog logo instead of a screenshot if available. Maybe this would be an incentive for everyone to have a blog logo (where’s yours?, I see the avatar picture of you on my firefox tab, but no blog logo).

  4. Pingback: WEB
  5. Very cool effect, but it took forever to load. Snapshots gives you preview of the website when you hover over the link and loads very quickly compared to this.

Leave a comment