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.
| Attachment | Size |
|---|---|
| widget.fla | 266.5 KB |
| widget_v8.fla | 157.5 KB |
About author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through abduzeedo.
Thanx for the tuts
If I test it in flash it works perfectly, but when I try to use it on my site it doesn't display any items. Why???
I can't get the widget to display any RSS feed other than the Openjobs one. No matter what feed I plug in there it doesn't seem to load. Any suggestions?
I have tried to edit several times, but the news won't appear. anyone know why ? and i used this widget with my feed but still no positive result. Does this widget read the