Blogging Roller

This is the fifth in my series of Web Integration Patterns. Check out the intro at this URL http://rollerweblogger.org/roller/entry/web_integration_patterns

Synopsis

Allow other web sites and applications to integrate your site into their web pages by providing an embeddable user interface, commonly known as a Gadget or Widget, which allows users to view and interact with your site in the context of other sites.

Motivations

• By embedding Widgets in your site, you can make your site more useful and informative to your users. Users can access relevant information from other sites in the context of your web site.
• By allow other sites to embed your Widgets, you can give your site and the services that it offers wider reach. Your users can access and interact with your services in the context of other sites.

Related Patterns

• Dashboards and Portals
• Social Network Plugins
• Delegated Pickers

A Widget or Gadget is a piece of an application, a visual component or a chunk of user-interface that can be added to some other application. On the web, Widgets are implemented using HTML and JavaScript, or sometimes Flash. Here we'll discuss simple Widgets and leave discussion or more advanced usage of Widgets in Dashboards, Portals and Pickers for the more advanced patterns we'll discuss later.

Easy to "consume"

Widgets are easy, especially for widget "consumers" i.e. those who wish to add an existing Widget to their site. Adding a widget to your site or web application can be as easy as adding a couple of lines of HTML and JavaScript to the pages of your site. You can see some examples of Widgets in the two screen shots I've included here, below is the Wayin polling Widget, which shows my latest Wayins:

And below is the Flickr Widget, which shows a random selection of my photos from Flickr. You can see these two Widgets in action on the front page of my blog. And, by the way, the Like, Tweet and +1 buttons on the right of this entry (when viewed on my blog site) are also Widgets.

Relatively easy to create

Developing an entirely new Widget more complicated than using one that already exists. Creating a new Widget typically requires writing HTML and JavaScript code and employing some interesting tricks. The simplest way to implement a Widget is to use an iframe, allowing a portion of one site to be embedded in another site.

I'm not going to go into detail as there are already so many good resources on the web for learning about Widget crafting. For example, Alex Marandon wrote a pretty comprehensive blog post on creating Widgets covering basic issues like how to ensure that your widget code does not interfere with the page hosting the Widget, how to dynamically load resources and how to bypass browsers’ single-origin policy using JSON-P.

Widget and Gadget standards

For simple Widgets you don't really need any standards other than HTML and JavaScript. If you want to target specific web site Dashboards or Portals, like NetVibes, or enterprise web applications like Jive or Atlassian's software development tools, then you'll need to create your Widgets with specific APIs in mind. For example, NetVibes provides it's own Widget API, while Jive and Atlassian support the Open Social Gadget APIs. I'll talk more about these issues when I cover the related patterns Dashboards, Portals and Social Network Plugins.

Wrapping up...

That's it for Widgets and Gadgets. Next up: Feed-based Integration.