McClellandfamily.com header image 2

Not quite sure how we're still in business.

How to Build a Widget Like This…

May 5th, 2008 by Steve · Leave a Comment ·

In response to DB who asked about the widget of my Twitter reader: (Which I’ve placed a screen-grab of here so people will know what the heck I’m talking about in the distant future when it may not be on the top-left of my website.) Basically, it’s a custom designed widget using Sprout consisting of a photo of me holding a piece of cardboard and my Twitter feed placed over the top of it. The Sprout widget scrapes my Twitter feed which I update nearly daily.

To create the widget, I took a bunch of pic’s of myself in the backyard holding a piece of yellow (yes, yellow) posterboard. At the bottom of this post is one of the shots that I didn’t use. In Photoshop, I used the extract filter to pull the posterboard and myself out of the shot and pasted then into a new image. I used the color replacement tool to change the sign to green to compliment my site, and then added the text at the top of the sign. I did a little cleaning up (don’t I look great?) and then imported it to Sprout.

The whole thing is really just two layers in the Sprout builder: me holding the sign, and the Twitter feed. Once you publish it in Sprout, it generates the code which you can copy and paste into your web page, Facebook, My Space, iGoogle, Vox, etc. Sprout’s really powerful and very simple to use. The entire project from conception to finished product took me about an hour.

Filed Under: Steve · Tech and Gadgets

0 Comments so far ↓

  • Get the comments started by filling out the form below.

Leave a Comment