Just a little Cooqy

Flash object embedding is a topic that is well documented on the web. This article does a nice run-down of the different techniques. Instead of re-hashing other people’s work in embedding Flash objects into web pages, I am concerning this article with the pragmatic considerations involved when distributing OpenLaszlo-generated Flash widgets. I say OpenLaszlo-generated, because I am focused on building “mini-applications” in widget form, not simple animated Flash ads. The distribution of widgets throughout the web means that you don’t have control over the target web page, unlike if you just wanted to embed a widget onto your own web page exclusively.

OpenLaszlo Flash widgets can be placed onto web pages with a number of different techniques. Selecting the appropriate technique depends on a number of factors:

1. Will the widget be used on web pages without Javascript support, like MySpace profiles?
2. Will it be likely that new parameters will be added in the future to extend widget functionality?
3. How important is it to avoid the extra click required in Internet Explorer to activate the widget?
4. What should happen when the user either doesn’t have Flash installed or has the wrong version?
5. Does compliance with web standards matter to you or your customers?

The easiest way to embed an OpenLaszlo widget is with the EMBED HTML tag. The tag is a nonstandard tag that is generally frowned upon by professional Flash developers. The upside is that no Javascript is involved and it is therefore most compatible with many social network web pages, including MySpace. The downside is that it requires an extra mouse click to activate the widget in Internet Explorer only.

Another approach is to use the EMBED HTML tag in combination with an OBJECT tag. This is just an incremental improvement to the naked EMBED tag that results in satisfying web standards compliance. The only functional improvement is that a message can be displayed to the user when the Flash player needs to be upgraded/activated.

OpenLaszlo itself provides an embed mechanism that relies on a Javascript library they provide. My recommendation, is that if you don’t want to use the EMBED tag method, skip OpenLaszlo’s Javascript library and use a third-party library SWFObject, which seems to be superior in terms of functionality and compatibility.

SWFObject is a 3rd-party Flash embed Javascript library that I currently use on Cooqy’s website. The primary functional benefit is that it resolves the issue of the extra click necessary in Internet Explorer to activate the widget. It also has the benefits of handling missing/outdated Flash players and of being standards-compliant across many browsers.

So far, neither the EMBED tag nor the SWFObject address the possibility of needing to add new parameters to the widget to support extending the widget’s functionality in the future. Once a user embeds the widget into a target web page, both of these techniques don’t allow the widget provider to alter the embed code. To accomplish this, it is possible to perform server-side scripted embeds via Javascript.

Widgetbox is a slick platform that allows widget developers to distribute their widgets very effectively and easily. For end users, Widgetbox is a nice widget directory that also makes it easy to grab new widgets for web pages. Widgetbox also provides end users with “widget panels” for grouping widgets on their target web page. You can try out Cooqy’s widgets via Widgetbox here.

As comprehensive as Widgetbox is, there are some downfalls. The biggest is that end users must sign up for a Widgetbox account to grab widgets. To the widget developer, this represents an undesirable barrier that may turn away some people. Another downside is that Widgetbox forces the creation of a “widget panel” on the target web page. This prevents end users from having total control over the placement of the widget on target web pages. This may be acceptable for some widgets, but e-commerce widgets like Cooqy’s require that the end user have total control over the placement and integration of the widget on the target web page.

For widget developers, however, Widgetbox provides insight into how to create dynamically-inserted widgets onto target web pages. Instead of providing end users with HTML code snippets containing an EMBED or SWFObject commands, provide end users with a single Javascript statement that is a script to dynamically construct the widget embedding. You can get a sense of this from looking at Widgetbox’s Javascript embed file here.

The only advantage gained by this approach is a layer of abstraction that allows freedom to alter the final embed statement after the widget is initially distributed. As a widget developer, if you are creating widgets of meaningful complexity it can be impossible to think of all the possible parameters and behaviors you will want the widget to be able to handle in the future. For example, Cooqy’s widgets are currently distributed via the simple EMBED tag. Had I known ahead of time, I would have liked to have provided an object id on the EMBED statement, to make it possible to identify the widget on the web page. This would allow the widget to invoke Javascript commands from Flash to communicate with itself…perhaps to dynamically resize the dimensions of the widget on the page.

Along with the flexibility of the technique comes the burden of keeping track of the widget’s parameters for all users of the widget. This necessitates some type of “widget wizard” for end users to configure the widget’s parameters. These parameters would then be stored on the server and associated with the specific user via a unique identifier that would accompany the Javascript statement.

The amount of infrastructure in the form of a widget configuration tool and database tables to store each user’s widget configuration is nontrivial, but as Widgetbox demonstrates this technique provides widget developers with the ultimate flexibility to modify and extend widget behaviors to all current customers using their widgets. A big downside, however, is that the technique won’t work for social networks like MySpace that disable Javascript on profile pages.

Widget embed techniques are very much a mixed bag. No single technique supports all needs. Cooqy’s widgets are currently distributed with the simple EMBED tag, that provides compatibility across most target web pages, including MySpace profiles. The extra click to activate the widget in Internet Explorer is my way of nudging people to use Firefox instead…