Create an amazing widget for your blog

Last December I was working on a cool project, the web design for a brazilian online job board. It was a very pleasant project to work on mainly because we had total freedom to create and suggest features. Of course some of our suggestions didn't make to the final version, however one did, the widget.

The web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets including: gadget, badge, module, capsule, snippet, mini and flake. Web widgets often but not always use DHTML, JavaScript, or Adobe Flash. Wikipedia

Basically what I did was get the data from the RSS feed and show it in a nicer way using Flash. In other words, it’s a sort of RSS reader.

So in this post I will show you how you can create your own widget using the FLA file I created for the Openjobs widget.

There’s one more thing, as I’m a designer and not a real programmer, my AS2 (actionscript 2) code won’t be the best code ever, but if you are an AS ninja and want to contribute with a better code, feel free. Actually it would be awesome to have the widget using AS3 rather the AS2.

Design

Widgets are like banners but they deliver more information. For this widget I follow the idea we used on the Openjobs website design, where there's a person holding an ad sign, in this case he's showing the jobs available.

Flash Customization

To create your widget you won't even need to touch the code. Just change the visual elements and that’s it. Below you can see the elements of each layer.

Dynamic elements

If you want to change the font or text size just edit the "title" and "description box" symbols in the library.

The widget

You will have to publish the widget’s swf file in your site's server in order to distribute it only with the embed code. The feed’s url goes direct in the embed code as well, just change the url in the Feed parameter. Below you can see the widget and the code.