Twitter Flash Badge: How to validate the code as XHTML

March 23, 2007

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.

Internet, Social Networking

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

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/

Comment by Benj Arriola on March 24, 2007 @ 1:32 am

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?

Comment by gio on March 24, 2007 @ 9:17 am

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

Comment by Kordo on March 24, 2007 @ 9:25 am

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.

Comment by Benj Arriola on March 25, 2007 @ 5:05 pm

[...] How I fixed up my Twitter badge so my page could still be valid XHTML. Twitter Flash Badge: How to validate the code as XHTML [...]

Pingback by Brent’s Blog » Blog Archive » Fixing the blog on August 17, 2007 @ 3:20 am

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?

Comment by Brent on August 17, 2007 @ 3:21 am

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

Comment by Euicho on January 13, 2008 @ 9:48 am

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.

Comment by jesse5 on May 16, 2008 @ 2:42 am
Leave a comment

(required)

(required)