Web widgets are widely used across the Internet but still lacks good documentation. From online advertisement to videos to blogs, widgets are highly used. Some of the popular widgets being Google Adsense, Youtube, MyBlogLog widgets and Twitter badges.
Note: This page will be slow to load because of many widget examples.
To formally define : 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. A widget adds some content to that page that is (mostly) not static. Generally widgets are third party originated, though they can be home made. Widgets are also known as modules, snippets, and plug-ins.
This article is my journey of understanding and making a widget myself. I have tried to make things look simple and insightful by taking a lot of examples.
Before you start
Clearly identify the information which will be distributed by your widget or the information you would like your client to embed in their webpage. Then find the most suitable mechanism to send this information. Mechanism can be one of the following :
Flash (need not be static i.e. it can take parameters) as a widget.
Simple HTML page
This is a highly used method for making widgets. Most of the flashy irritating advertisements seen on many websites are flash widgets. A good usage being youtube videos and twitter badge type-1. Flash widget code includes an "embed" or "object" HTML tag with the source to flash file. Extra parameters may be passed to flash file to customize flash content. And remember, ActionScript is always there for more magic :-)
Instead of flash embed an HTML page or HTML code at client's webpage using iframe. This can be as simple as:
// script-raw-dump.js contains the following codedocument.write("<ul>");document.write("<li>Hello world</li>");document.write("<li>Hello world2</li>");document.write("</ul>");document.write("Powered by <img src='quarkruby' alt='quarkruby'/>");
Output seen on webpage will be:
Active widgets can be very powerful if, each client is given a unique identifier by the widget source for user identification. This allows widget providing site to send/collect user-related data. Active widget's can be made in two ways :
What the code does:
For using JSON API's or JSON data. Twitter badge type 2 is a good example of widget using JSON calls. Sample Widget code:
- Fetch this file, which generates HTML code + CSS data for the final output
Slowing down loading of client's site.:
What are you talking? Yes, widgets can bring down client's site who is embedding widget code in their page because:
script tag stops page rendering until code inside it is executed and rendered.
Script tag blocks parallel downloads :(
If the widget source goes down or is slow, the client's webpage won't load unless the widget code is executed and rendered. To avoid this problem consider following workarounds :
Use "defer" attribute with script (firefox doesn't support this though :-( ). This tells the browser to continue rendering and do not block the other downloads. Moreover, this can only be used if there is no "document.write" statement in your script. See more details here
Put timeout on script attachment (source: WEDJE)
Here, external scripts in widget code are not downloaded during page load, but attached after sometime. So, this does not affects loading/rendering of site. Hence, after sometime, the external scripts are downloaded, attached/executed thereafter. In example mentioned below, Twitter type-2 badge is modified to download the external scripts after 1 sec. So, if you embed this code in some html page, you will see the output after delay of 1sec Example: modifying the twitter widget code :
Let client apply its own CSS to widget: This helps in customizing the style of widget as per the design/looks of client's webpage. Google allows this even via iframes by using global variables, Amazon allows this while making widget, Mybloglog and twitter doesn't use iframes so your CSS directly applies to the widget's HTML.
Minimize number of request: This is to load your widget faster which applies to any HTML page
Using API If you are using an API, then callback method must be provided by that API. This is just to keep in mind if you want to use some external API and display the content dynamically.