Mar/077
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 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.<embed>
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&type=user&id=1988601" />
</object>
Its a lot simpler than the orginal code. Clean, valid XHTML.
Recent Posts
Categories
- Addiction
- Adsense
- adults
- Adwords
- Animals
- Anything
- Apartments
- Apple
- Art
- Auto
- Baby
- Blogging
- Books
- Business
- Car Donation
- Car Rental
- Celebrities
- Chat
- Coffee
- Communications
- Computers
- Copywriting
- CSS
- dating
- Digg
- Digital Camera
- Directory
- Domains
- Donation
- E-commerce
- eBay
- Education
- Entertainment
- Environment
- Eyeware
- Family
- Fashion
- Finance
- Flickr
- Flowers
- Food
- Forums
- Freebies
- Furniture
- Gadgets
- Games
- Gifts
- Hair Loss
- Halloween
- Hardware
- Health
- Hobbies
- Holidays
- Home
- Hot Trends
- Insurance
- Internet
- Internet Marketing
- Jewelry
- Jobs
- Kids
- Law
- Legal
- Mac
- Making Money Online
- Microsoft
- Mobile Phone
- mobile phones
- Movies
- Music
- Myspace
- News
- Office
- Parenting
- Party
- PayPal
- People
- Pets
- Photography
- PlayStation
- Podcasting
- Politics
- PPC
- Pregnancy
- Programming
- Real Estate
- Recreation
- School
- Science
- Search
- Search Engines
- Security
- Self-improvement
- SEO/SEM
- Service
- Shipping
- Shopping
- Social Networking
- Software
- Sports
- Stumbled Upon
- Technology
- Technorati
- Toolbox
- Training
- Travel
- Tutorials
- TV
- Videos
- Vlogging
- Weather
- Web Design
- Web Development
- Web Directory
- Web Hosting
- Webmaster
- Wedding
- Weight Loss
- Wordpress
- Writing
- Yahoo
- YouTube
- Zeitgeist
Tags
Archives
- February 2010
- January 2010
- December 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- November 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
March 24th, 2007
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/
March 24th, 2007
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?
March 24th, 2007
Strict DOCTYPEs are easier to maintain because the structure and presentation of a site is separate.
March 25th, 2007
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.
August 17th, 2007
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?
January 13th, 2008
Works like a charm, I’ve been banging my head against the wall about this. Thanks for the code!
May 16th, 2008
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.