WhatIWantMost Create some flair to share

One things that bloggers love more than anything else is flair. They love to show off their Flickr pictures, which MyBlogLog visitors have visited the site recently, links to events they plan to attend, links to services or applications they use/approve and more. FeedBurner offers FeedFlare so you can add “Digg This” and “Email the Author” links to your posts and feeds. The list goes on an on. Sometimes people add too much flair.

So what should a developer of an aspiring Web 2.0 social networking site do? Create more flair!

If you’re reading this from my site you’ll notice the “What’s in your Wishlist?” banner at the top of this page. You may have also seen the “My Wishlist on WhatIWantMost” gadget in the left hand sidebar. If you’re reading this via RSS they look like this:

So what, I’ve added some ads to the WIWM arsenal. Not so fast - don’t be so judgemental. Those are not just ads, dear patron. Those are flair! Both the “What’s in your Wishlist?” banner and the “My Wishlist” gadget are implemented via some drop-in javascript that the WIWM site creates for you. The banner links to your wishlist (there is also a “What’s in my Wishlist?” banner if you’d rather use that) so everyone can have quick access to your wants and desires. The sidebar gadget is fully functional as well. It pulls random items from your wishlist and displays them along with the links you’ve provided so your friends, family, and co-workers can go directly to the source and buy them for you. The 120x240 gadget that I’m displaying also comes in a couple of different sizes in case 2 items displayed is not enough for you - there is 120x600 that displays up to 5 items from your wishlist and 160x600 that will display up to 6.

This must be magic, right? Not really, I’ll let you in on the “secret”. Create an http handler (I just used the defult .ashx extension) that will accept some different parameters like size, background and text colors if you’d like, a user id, type of ad, etc. Then just render the results you want displayed. I chose to allow my handler to be called via the javascript src element and via the iframe src element (as I’ve read that XHTML strict doctype does not like external javascript files to use document.write). Once that is done your patrons can display your flair using something like the following:

<script type="text/javascript" language="javascript" src="http://whatiwantmost.com/flair/ShowFlair.ashx?mode=javascript&amp;username=dan&amp;adsize=Content_120x600&amp;adcontext=MyWishlist&amp;adtype=content"></script> 

or

<iframe src="http://whatiwantmost.com/flair/ShowFlair.ashx?mode=iframe&amp;username=dan&amp;adsize=Content_120x600&amp;adcontext=MyWishlist&amp;adtype=content" width="120" height="600" frameborder="0" scrolling="no" ></iframe> 

As for the code for the HTTP handler - it was easy enough. The code for the images was really easy, only a couple of lines - basically write the code to create the HTML for an image and a link. The code to display the wishlist was a little tougher, but mocking up what you want the end result to look like will help a lot. Another hint - use caching generously. Cache your data source, cache your output, cache anything else you think will help. Even if your flair is only used by a few people, your flair handler will get a lot of requests. You don’t want to be doing a database lookup everytime an image or wishlist gadget is requested and rendered. You don’t want your flair to be the one thing slowing their page loads down - because it will get removed if it does.

If you click on the banner or otherwise go to the WhatIWantMost.com site you’ll see that I still have a “coming soon” page up. The site is actually there and running, as evidenced by serving up my wishlist and the banner, but the public facing pages are not in place. I had a couple of issues I needed to clean up over the weekend - some things that even an “Alpha” site should have properly working. Sometime this week I will invite you to visit the site and provide any feedback you’d like. There are some features that haven’t been implemented yet and most of the features that are in place are still lacking in one way or another. However, it’s close enough for you to get a general idea of what I dreamed of a couple of months ago when I started this blogging series and it will serve as a good ending point. I’d hope that approximately 25 episodes was enough to whet your appetite. I know I didn’t show as much code as I could have, but I thought of this as more of a behind-the-scenes thought process type of series than a how-to. More wrap-up to come later.