Do you want the Flickr badge on your web site to light up on IE8? Check out this article and sample created by Cindy Li, showing how she converted her Flickr badge to support IE8's "Web Slices" feature. Read on to learn more about how it was done.

The Web is one big collection of hacks, and the prevalence of Javascript-based "badges" to personalize blogs and profile pages is a prime example. JavaScript-based badges are essentially a hack (in the good way) that allows you to integrate content from other sites without having to write complicated back-end code, and are a nice fit with the way that web designers work. The first widespread example was probably moreover.com about 10 years ago, but now you can find "badges" for practically anything -- from Facebook and Twitter to Flickr.

We're especially pleased to see people adhering to Web standards when implementing JavaScript badges. For example, Veerle Pieters modified the Flickr-provided photos badge to conform to Web standards, and her modified Flickr badge has been used far and wide by people who care about good markup.

When we designed the "Web Slices" feature for IE8, we tried to incorporate this same utilitarian spirit of JavaScript badges, as well as a respect for Web standards. Web Slices allow users to "slice" off a portion of your web page and pin it to the toolbar area, so that they can see that slice of the page even when they are not visiting your site. Think of things like weather, traffic, stock quotes, photos, or social network status updates.

Web Slices have seen good adoption, with slices from companies like eBay, Digg, ESPN, and StumbleUpon available at launch. Mozilla contributor @glazou even ported the basic Web Slice functionality to Firefox as an add-on. But we designed the feature to be usable by any markup-centric web designer or developer; not just for big web sites or coders like Daniel Glazman.

So, how did we do? We asked Cindy Li, a well-known standards-based web designer, to take a look at Web slices and see if the Web slice creation experience lives up to the hype. Cindy decided to convert Veerle's Flickr badge to a Web Slice. You can read her full experiences here, and get the code to use on your own blog. The short summary:

• Creating a Web slice based on pure HTML and CSS was pretty easy.
• Using the JavaScript badge added some complexity and work. You will definitely want to consult Cindy's excellent writeup if you are doing something similar.
• The design required to support the JavaScript badge does not work with the Firefox extension, since it uses functionality that the Firefox extension doesn't yet support.

Overall, it was an interesting experience, and we thank Cindy for taking on the challenge. And it's great to have a version of the Flickr badge that supports Web Slices!

So, have you tried building any Web Slices yet? What has your experience been? Easy? Difficult? We would love to hear you feedback. (And don't forget to follow us on Twitter for more updates, news, and open-source projects).