Creating Valid HTML With Flash Widgets

For those of you who are anal about creating Valid HTML, embedding widgets that use Flash can be a pain, as the third-party creations do not necessarily pay attention to W3C guidelines. Although widgets can add functionality and a fresh feel to your pages, sadly they are sometimes not well-coded. This is the case for the Goodreads widget which appears in the left sidebar. Given the literary nature of this site, its quite nice for readers to know where my literary tastes of the moment are heading. However, the widget does not validate, because it uses the <embed> attribute, which has been deprecated since HTML 1.0.

Happily, without too much effort, and reference to one website, I have been able to rework the Goodreads widget to ensure that the pages on which it appears validate correctly, replacing <embed> with <object>.

The old version appears on the Goodreads website like this:

<div style="margin:0px;">
<embed width="190" height="300" src="http://www.goodreads.com/images/widget/widget2.swf" quality="high" wmode="transparent" flashvars="id=222222&shelf=read&title=Ishmael's bookshelf: read&sort=date_added&order=d&params=amazon,associateid,dest_site,amazon">
</embed>
</div>
<div style="margin:0px;">
<a href="http://www.goodreads.com/user/show/987180" target="_blank"> <img alt="Widget_logo" border="0" height="32" src="http://www.goodreads.com/images/widget/widget_logo.gif" title="my goodreads profile" width="190" /></a>
</div>

Where "id=222222" will be replaced by your own unique reference number, and "associateid" by your Amazon Associate's identification, allowing you to cash in on any click throughs to Amazon via the widget. The following alternative seems to work fine, although for a reason I don't understand it eliminates the pleasant bevelled margins (something I can live without).

<object type="application/x-shockwave-flash" data="http://www.goodreads.com/images/widget/widget2.swf" width="190" height="300">
<param name="movie" value="http://www.goodreads.com/images/widget/widget2.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="id=222222&shelf=read&title=Recently Read&sort=date_read&order=d&params=amazon,associateid,dest_site,amazon" />
</object>

<div style="margin: 0px;">
<a href="http://www.goodreads.com/user/show/987180" target="_blank"><img alt="Widget_logo" src="http://www.goodreads.com/images/widget/widget_logo.gif" title="my goodreads profile" width="190" border="0" height="32" /></a>
</div>

Substitute your own id number and Associates ID (if applicable), and hey presto, clean and valid HTML and a snazzy widget. To compensate for the margin problem, you can replace <div style="margin: 0px;"> with <div style="margin: 2px;">, or whatever margin you prefer.

Labels: Computers and the Internet, embed, flash, object, valid HTML