T e c h n o b a b b l e

I had an interesting little problem the other day whilst messing around with Amazon's little widgets! They are fun little boxes you can stick in your blog or on any web page really.

I had a page that validated as XHTML 1.0 Transitional and wanted to maintain my code compliance as per the W3 validator whilst including a widget.

Amazon gave me the following nasty bit of code:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_094fec33-3c6e-40fb-989a-051d05a8d062" WIDTH="430px" HEIGHT="324px"> <PARAM NAME="movie" VALUE="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=GetDisplayTemplate"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><PARAM NAME="allowscriptaccess" VALUE="always"><embed src="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=GetDisplayTemplate" id="Player_094fec33-3c6e-40fb-989a-051d05a8d062" quality="high" bgcolor="#ffffff" name="Player_094fec33-3c6e-40fb-989a-051d05a8d062" allowscriptaccess="always" type="application/x-shockwave-flash" align="middle" height="324px" width="430px"/> </OBJECT> <NOSCRIPT><A HREF="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=NoScript">Amazon.co.uk Widgets</A></NOSCRIPT>

Which in it's own right threw up 60 errors!

Breaking this down to it's core components we have:

1: The widget flash file - "http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=GetDisplayTemplate"

2: The flash movie name - Player_094fec33-3c6e-40fb-989a-051d05a8d062

3: The width - 430

4: The height - 324

5: The background colour - #FFFFFF ( white )

6: The noscript link - "http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=NoScript"

I've bolded them in the code above and below to help.

Now, we put that together as follows using Geoff Stearns SWFObject script:

<div id="flashcontent"><p>If you don't see the slideshow, <a href="http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=NoScript">click here.</a>.</p></div> <script type="text/javascript"> var so = new SWFObject("http://ws.amazon.co.uk/widgets/q?ServiceVersion=20070822&
MarketPlace=GB&ID=V20070822%2FGB%2Ftwighlightzon-21%2F8003%2F094fec33
-3c6e-40fb-989a-051d05a8d062&Operation=GetDisplayTemplate", "Player_094fec33-3c6e-40fb-989a-051d05a8d062", "430", "324", "6", "#ffffff"); so.write("flashcontent"); </script>

Plus making sure we have the all important flashdetect.js file uploaded and the following tag inserted into the head of our file:

<script type="text/javascript" src="flashdetect.js"></script>

Voila! . . . . . now we have a validating Amazon widget

A working version can be seen here Amazon Widget Validation, just click the button.

I'm sure someone else has posted the solution for Amazon widget validation, but I just couldn't find it myself and thought it might help posting the solution that I used.

It passes XHTML 1.0 Strict as well by the looks of it.

[ 1 comment ] ( 26 views )   |  [ 0 trackbacks ]   |  permalink  |   ( 2.9 / 491 )