isulong blog Tips and reviews I blog about.


23
Mar/07
7

Twitter Flash Badge: How to validate the code as XHTML

If you ever tried using the Twitter widget and inserted the flash badge code to your blog or site, you might have noticed that it isnt XHTML valid. It actually produces a lot of invalid code errors. Well I just found a way to make it XHMTL valid.

The original flash code looks like this:

<div style="width:176px;text-align:center"><embed src="http://twitter.com/flash/twitter_badge.swf" flashvars="color1=16711935&type=user&id=1988601" quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF00FF; text-decoration: none" href="http://twitter.com/giotwitter">follow giotwitter at http://twitter.com</a></div>

One of the main reasons why this code wont validate as a XHTML is because of the <embed> tag. I've seen many websites use the <embed> to include flash animations or applications. Problem is, the <embed> tag was actually never part of any standardized version of HTML or XHTML, and using it produces invalid markup errors.

What I did was I tweaked the code and came up with this.

<object type="application/x-shockwave-flash" data="http://twitter.com/flash/twitter_badge.swf" width="176" height="176">
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="flashvars" value="color1=6736896&amp;type=user&amp;id=1988601" />
</object>

Its a lot simpler than the orginal code. Clean, valid XHTML.

Comments (7) Trackbacks (1)
  1. Hi Gio,

    The Object and Embed tags were intended for various browsers. Some browsers read the embed, some read the object. Some if both are present it will read only one of them.

    Although most people use MSIE and FF only, object alone will work. I believe Embed started with Netscape during the days when it was MSIE and Netscape being the popular browsers.

    For me, it is still important to have the embed tag, but to make it validate, you can externalize it in Javascript, where Javascript writes the flash code for you. And the rest of the flash is not on the page. So your Flash will only be one line of code in the HTML source and it will validate.

    Check this site: thesmiledesigncenter.com and their site validates http://validator.w3.org/

  2. Hi Benj,

    Yes, the embed tag was created by Netscape. It was used to embed plugins and players in web pages. Although some browsers support it other than Netscape, it isn’t standards-compliant.

    The site thesmiledesigncenter.com is a Valid HTML 4.01 Transitional but not XHMTL. Transitional DOCTYPEs are meant for those making the transition from older HTML mark-up to modern standard which is the Strict DOCTYPEs. Mejo mas strikto ang Strict but we should be aiming for it kasi it’s the future web standard. Sabi nga nila its “future-proof”.

    So OK din pala ang javascript as an alternative to insert Flash files. But how do you pass some parameters like the above code?

  3. Strict DOCTYPEs are easier to maintain because the structure and presentation of a site is separate.

  4. XHTML 1.0, HTML 4.1 or 4,0, strict or transitional, all can still be done with the Javascript method of writing flash.

    Parameters can be passed pa din. Either as…

    1. They are already written in the Javascript script file. Or.
    2. Your javascript has to accept the parameters and pass them as a Javascript function and it will plug it in the right places in the flash code written by the Javascript file.

  5. Thanks for the tip – I’ve been trying to figure this out for a while. Why can’t these sites come up with some valid compliant code in the first place?

  6. Works like a charm, I’ve been banging my head against the wall about this. Thanks for the code!

  7. Thanks for the code, I’ve been working with the HTML version, though, not the flash version.

    I can’t figure it out, however, I’ll give this version a go.

Leave a comment