Flickr Badge and XHTML, Part 1 Saturday 2006-03-04
I thought I finally got the solution to a problem that has bothered med for the last couple of weeks. You cannot include the Flash based Flickr badge in an XHTML valid page. It contains such a lot of interspersed markup and styling, that it is impossible to untangle. I had a go at moving styles to the stylesheet and leaving the markup where markup is due. For different reasons this wasn’t possible, and I had to find a solution. The W3C validator service gave me a list of errors, long as a week.
I had succeded earlier to encapsulate the Google AdSense, by embedding an external html document, using the object tag.
I started hunting the web for solutions, and found Geoff Stearns’ FlashObject, a JavaScript Flash detection and embed script.
It is used by including the script normally in the XHTML header and calling it from another JavaScript in the body. The call takes the URL of the flash movie and some other parameters, such as height and width.
The FlashObject writes the flikr badge into a predefined div with the appropriate id=”flashcontent”. Swiffy!
This doesn’t help much though, if we don’t have access to the pure SFW file, the Flash movie. As it is inserted “on the fly”, it doesn’t show up in the View Source mode of the browser - you just see the ugly heap of code, you pasted in from flickr.
By looking at the page info you can extract the URL of the SWF, which means that you can pass it to the FlashObject.
The URL of the flickr badge has a lengthy query string, that tells the Flash move what to look for at flickr.com, including number of columns and rows, the secret word and other useful things.
The whole thing worked, and I got rid of all complaints from the validation service. This had made me nearly bold headed, so you can imagine, I took a good leap and a scream.
There’s something fishy about the solution, I’m sorry to say. It did work for a while, but died on me.
I’m back to square one or possibly one and a half - we’ll see.
I’ll get back to you if something hits me.
[Edit] I’m back. Sorry to say I haven’t yet the solution to the validation question, but I’m working on it.
In the meantime, I have discovered that flickr doesnt want the approach of extracting the SWF from the page info. It’s much better to extract and use the original request that you get from the badge maker. Contrary to the statement I made above, it is possible to deconstruct/reconstruct the badge maker mix of code, style and markup. That’s how it’s working just now.
All styles are in the CSS stylesheet, the markup is clean and the JavaScript logic is encapsulated in CDATA sections.
It still doesn’t validate as XHTML though, because of the iframe is still not dealt with.
[ Edit 2006-03-25] I’ve decided to make a “Flickr Badge” of my own, to get full control over the behavior and the embedding. A first version is ready, and I have even written a tutorial, presented in “Flickr Badge and XHTML, Part 2“.
All Posts
del.icio.us
PetitOn Tellus
Comments»
Saturday 2006-07-08
I’ve got the Flickr flash badge on my site validating XHTML here:
http://gabrito.com
I took out the CSS (or you could move it into a stylesheet) and I put the javascript inside comments and replaced ampersands with entity references.
Thursday 2006-07-13
Thanks Todd!
As you can see in my post I nearly made it and then decide to take compleate control by drilling my own Flash badge.
My problem was with the IFrame not being allowed in XHTML. How did you solve that?
Monday 2006-07-24
[…] Logre validar el Flickr Badge… gracias a un comentario hecho por Todd Huss en Flickr Badge and XHTML, Part 1 y la solucion es sencilla pero, algo truculenta… primero lo que esta entre <style type=”text/css”> y </style> no puede ir donde esta sino que debe ser movido al archivo style.css para que quede de la siguiente forma… .zg_div { margin: 0px 0px 0px 0px; width:117px; } […]
Monday 2006-07-24
I solved that thanks to Todd… you have to comment the script… so the validator thinks that the iframe tag is commented so it does not interpret it…
Monday 2006-07-24
Nice to see some discussion going on here. It’s possible to “trick” the validation service into thinking that a document is valid XHTML. Thanks indeed for your participation.
The question is what is meant by “valid”. The basic idea is that an XML document is valid if it conforms to the document type description, the DTD.
As IFrame is not part of the XHTML doctype, just commenting it out to fool a validation tool, doesn’t make it any more valid.
However, if you make an instrumental interpretation, you might say that any document you can tweek to pass a certain validator test, is in fact valid.
Being a bit hard core on the standards matter, I don’t agree with the latter interpretation. That being said, I’ll willingly admit that my blog does not validate so far.
You do as you see fit of course - there’s now law against presenting non validating web documents
Sunday 2006-07-30
[…] It’s all about including the Flickr Badge in an XHTML compliant way. As I have described in an earlier post, I thought I had succeeded. This proved very soon not to be true, and after a considerable amount of head scratching, I decided to craft my own badge. […]