Basic web widget formats

Web widgets vary by platform and provider but generally come in four basic flavors: JavaScript, embedded object, blog plugin, and frames. Anyone publishing widget content online should know a few basic concepts shaping their decision and choose the right mix of software and content based on their target. In this post I’ll walk through some of the basic advantages, disadvantages, and considerations for each type of widget content and bring you up-to-speed on a few current widget deployment options.

JavaScript

JavaScript is a client-side scripting language built-in to web browsers for over a decade. JavaScript interpreters vary by web browser and version, but the language remains a popular choice for dynamically altering the content of a page and its interactions.

JavaScript executes as part of the web page with access to the current page structure and markup (commonly referenced as the DOM). Your JavaScript widget may add other elements to the page such as additional scripts, styles, or embedable objects.

Widgets powered by JavaScript can customize their content based on other page content. Your widget might scan a blog post looking for tags and categories to deliver relevant advertising or Flickr photos. Your JavaScript widget might alter the style of the page with special skins and themes.

Each web widget platform offers its own JavaScript abstraction libraries to help widget developers serve cached content and offer a consistent user experience across multiple browsers and widgets. A Google Gadget developer might utilize Google’s tabbed user interface or access a user’s stored preferences. A Windows Live developer might take advantage of Microsoft’s ASP.net Ajax libraries for anything from string concatenation to element creation. Each platform offers its own unique integration and scalability helpers.

Embedded plugin objects

Web browser functionality is typically extended through browser plugins. Plugins are small desktop applications integrated with a web browser environment to provide additional on-page functionality. Adobe Flash, Microsoft Silverlight, and Apple QuickTime are three of the most popular browser plugin environments for widget creation. Each of these plugins create special forms of playback and interaction within a packaged application environment.

Browser plugin content executes these miniature external applications within a browser window, creating a small portlet into rendered content. Plugins extend a browser’s functionality by design, avoiding feature creep and licensing issues of a stand-alone browser. The ubiquity of popular plugins distributed through new PC sales, packaged with other applications, or installed on-demand help create a base ecosystem for development and code distribution. The capabilities of each plugin vary by version but, like modern browsers, most plugins ship with an automatic update mechanism.

Widgets powered by plugins function within a certain portion of the page defined by the embed or object elements. New content does not inherit the CSS styling on the page and therefore may stand-out in a blog sidebar or social network profile. Standing out could be a good, bad, or neutral thing depending on your content and the page owner’s design tastes.

Each target widget platform has a preferred method of handling plugin objects and occasionally restricted plugin access. I’ll outline a few popular platforms below.

MySpace widgets use Flash version 9 and above, requiring ActionScript 3, version 2 of the Adobe virtual machine interpreter, and converts HTML into its preferred object format before saving content to a user’s profile.

Google Gadgets utilizing Flash embeds function best when paired with the Google Gadgets JavaScript flash library. This JavaScript call checks the client’s Flash Player version against your version requirements before attempting to load any content. The library also constructs the appropriate HTML object for the client browser.

Facebook prefers Silverlight content embedded on the page using FBML.

Blog plugins

Popular blogging software such as Movable Type and WordPress let authors install and configure specialized widgets designed for the platform and extended through plugins. Blog plugins are rendered as an integrated part of each blog page and exist as first-class citizens within a larger content structure.

A blog plugin might gather data on a regular basis on behalf of the blog author, storing a reference to his latest photographs stored on Slide or his latest bookmarks stored on del.icio.us in a local SQL database for quick and structured access. A blog author would configure the on-page display of gathered data through the blogging software’s built-in widget administration interface.

Blog plugins are executed on the server and delivered to a blog viewer’s browser as a single HTML file. Poorly written blog plugins could slow down or otherwise incapacitate an author’s blog so it’s especially important to follow best practices of integration and execution within this environment. Blog plugins are written for a specific version of a specific piece of blogging software. Database API and other software tie-ins change over time so you will need to choose a minimum version to support for best feature and addressable market trade-off.

Framed content

Web widget content typically executes as a webpage within a webpage for security and containment purposes. The main web page loads all available widget content and creates appropriate inline sub-pages for each. These sub-pages are expressed within the page markup as inline frames (iframe) or a HTML object. Framed content isolates each web widget with limited privileges to protect page visitors from poorly written or malicious code.

Widgets within framed content do not have direct access to the full contents of the parent page or its user data. Web widget platforms serve as a bridge between the content and preferences of a main page and the framed widget content. A widget displaying photographs from your family vacation or the latest sports scores do not necessitate elevated privilege levels and perform well within a framed page environment. Widgets that request more permissions than needed could raise more author-facing warning messages within each widget platform. Widget developers should consider their on-page data requirements when creating and deploying a web widget.

Most web widget platforms allow developers to turn framed content on or off within a widget’s manifest file. Google Gadgets escape the frame if defined as typehtml-inline.” Netvibes references a meta element named inline for a similar function. You should be able to adjust your widget’s permissions requirements before publishing to the outside world.

Some widget platforms offer widget certification and partner programs. Certified widgets might load from the same domain as the target platform — reducing warning messages and providing better run-time access — and usually carry a badge of honor and special promotion within a platform’s widget gallery.

Mix and mash

The four widget methods listed above do not exist in isolation. Your Flash widget might be wrapped in a JavaScript widget. Your WordPress plugin might generate framed content. It really depends on what works best for your content and your targeted users.

4 comments

Commentary on "Basic web widget formats":

  1. Krish on wrote:

    Niall,

    Pretty neat article. A good reference for anyone who wants to get initiated into the Web 2.0+ worlds.

  2. David Armstrong on wrote:

    Like others…I find the power of the widget is the service it provides to the user. I think when the service value is high, it works, when the value is low, it takes up-bandwidth, screen space and wastes time. Be careful. Niall, might be pretty cool to analyze what makes a good widget. We get a lot of good feedback about ours, but don’t know how it compares to others.

  3. Ari Paparo on wrote:

    Nice overview article. I believe you are incorrect in your assertion that FaceBook prefers Silverlight plugins. According to the page you linked to the FaceBook API supports FLV (Flash Video) and SWF (Flash movie) formats. Silverlight has a blank API description, implying support will be in the future.

    Also, I don’t believe that MySpace requires ActionScript 3.0. Very few developers have yet upgraded to AS3.

    • Niall Kennedy on wrote:

      Ari,
      MySpace has required Flash 9 for over a year, adding the allowNetworking parameter to all widget embeds. Developers have already changed to AS3 and AVM2 to appear on MySpace.

      I think Silverlight is underutilized on Facebook, especially with the Popfly bundles and AdCenter capabilities. That is a subject for a completely separate post.