Jump to page content
The Pequod
Dr Alistair Brown | Associate lecturer in English Literature; researching video games and literature

Recent Posts

Twitter @alibrown18

New Essay

Through exploring the psychopathology of Capgras syndrome, in which a patient mistakes a loved one for an imposter, The Echo Maker offers a sustained meditation on the ways in which we project our own problems onto other people. As a reflection on the mysteries of consciousness, the novel offers some interesting if not especially new insights into the fuzzy boundaries between scientific and literary interpretations of the mind. Read more

Creating Valid HTML With Flash Widgets

Monday, June 02, 2008

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">
<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>
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" />

<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>
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: , , , ,

Posted by Alistair at 8:48 am


Post a Comment

Links to this post:

Create a Link

<< Home

The content of this website is Copyright © 2009 using a Creative Commons Licence. One term of this copyright policy is that Plagiarism is theft. If using information from this website in your own work, please ensure that you use the correct citation.

Valid XHTML 1.0. Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0. | Labelled with ICRA.