How to build a widget – Creating the widget

December 26th, 2008 by Tom Sprows Leave a reply »

[Part 3 in a 5 part series titled “How to build a widget]

You thought of an idea.  You chose the tech.  Now it is time to get busy.

Part 3) – Creating the widget. 

Widgets are self contained mini-websites and have to be treated the same way you would go about creating a website. 

[Quick definitions:  The “widget user” refers to the person grabbing the widget, while the “page visitor” refers to the person viewing the widget on the widget user’s page/blog] 

First, determine if the widget will be static or dynamic.

Static widgets are widgets that are exactly the same for every widget user that grabs the widget code.  An election countdown widget would be an example of a static widget.  The widget developer (you) only has to create the desired effect and code it without relying on any dynamic data. 

Dynamic widgets are widgets that change for each widget user embedding the code. is an example of a dynamic widget.  The widget user is each assigned a unique ID that is rendered to the object tag at the time of the web page is served.  The widget then uses the ID to pull data from a web service to determine the widget user’s Virtual Gift list.

Static widgets are normally less complicated and can be deployed without much complication.  Dynamic widgets require external sources supporting and possibly storing data for the widget.

Whichever widget type you choose is entirely up to you.  There have been extremely succesfull widgets that are static:  Maukie the virtual cat and dynamic:  RateItAll

Maukie the virtual cat

Maukie the virtual cat

Second,  allow customization.

Someones blog or Myspace page is an expression of themselves.  Why would they want to install your ugly neon pink widget on their green background Myspace page?  Give widget users the ability to customize the size/shape/skin/wording of your widget.  Page visitors do not want to have your widget stand out (in a bad way) on the widget users page.  Give the widget users the option to allow the widget to blend into the look and feel of their site.

Finally,  make your widget friendly to the widget’s users page/blog.  This means make it small and available. 

Nobody wants to install a widget on their blog that is 2.3 megs.  This will kill the experience for the page visitor.  Generally try to make your widget size under 100K.  Also make sure you host your widget on a respectable server.  Your widget is going to be served up every time the widget user’s page is served.  This is orders of magnitude more times then if you were just hosting a web site on your server.  If a widget user installs your widget and gets 3k hits a day on their site, then the widget has to be able to be served up 3k times without any slowdown (plus support all of the other widget users).     

Next – Part 4 - Deploying the widget.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5


  1. Zak says:

    edit – Oh, I’m sorry… I thought that SAID “How To Build A Widget”

  2. Avatar says:

    @Zak: What do you mean??..

  3. Djuna Ivereigh says:

    This is a nice and well-written big picture of the whole widget process — thanks!! However I’m still in the dark on the core of the matter: “How to Build a Widget”. OK, I want it in Flash, and make dynamic and customizable, but how? If beyond the scope of this coverage, a few resource links would be great.

Website maintained by Happy Shoe Media LLC