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

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.


Posted

in

by

Comments

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

  1. kid's allright Avatar

    Yahoo! Hack Day Q306: Making the “pitch”

    I finished participating (remotely) in my second Yahoo! Hack Day. As with last time (and the other Hack Days that preceded my participation), the premise is that anyone in the company can drop what they are doing for 24 hours

  2. Paul Stamatiou Avatar

    Interesting pseudo-hack Ian. Favoritethingz looks pretty unique.. if only their flash badge was design a little better. Hovering just about anywhere triggers something to pop out at you.

  3. mirod Avatar

    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.

  4. Askar Avatar

    That’s pretty neat of a service. A huge space saver!!! Thanks for the hack.

  5. commenter Avatar

    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).

  6. nospam Avatar
    nospam

    This method creates a static thumbshot for each website. Is there anyway that you could use the dynamic image address provided by webshotspro to have this image updated. For example, the dynamic thumbnail for this blog is below

    http://thumbs.webshotspro.com/url/http://cavitate.net/flashpoint

  7. nospam Avatar
    nospam

    This method creates a static thumbshot for each website. Is there anyway that you could use the dynamic image address provided by webshotspro to have this image updated. For example, the dynamic thumbnail for this blog is below

    http://thumbs.webshotspro.com/url/http://cavitate.net/flashpoint

  8. BillyG Avatar

    The lame digg crowd didn’t like it so I figured I’d better keep reading, glad I did! Thanks.

  9. Toni Avatar

    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