Embedding Flash was a pain

As you may have noticed, I embed a lot of Flash files into my blog posts. Embedding Flash content into WordPress posts is a tedious process at best. There are several options and parameters, all needing to be entered correctly or the object won’t display properly. Add to that the complexity of multiple browser support and you’ve got quite a mess, especially if you are concerned with valid XHTML markup.

Up until this point, I’ve been copy/pasting the object code into my posts. First I ftp the Flash file onto my server. Then I pull up a past post that had Flash in it. Then I copy that code to my new post, and edit the items that have changed such as the src and the object dimensions. Finally I save the post and preview it to see if I entered everything correctly. This takes way longer than it should.

Some recent developments

Last year I came across the SwfObject project. It is a great tool to simplify embedding Flash content. The markup is XHTML compliant, but still works most browsers, including IE6.

Flash forward to last month, when WordPress 2.5 was released. The new release includes the handy shortcode feature as well as improved media support with a nice API.

Flash magic voodoo

Combine the two and for me, you’ve got something magical. Assuming I’m not the only person who embeds heaps of Flash content into their posts, I decided to put together this new plugin: SwfObj.

While there are still a lot of features in the works, this initial version has significantly simplified the process of embedding Flash into my posts. A simple shortcode, such as the following, is all the markup I need to embed them. Here is the new shortcode, and the resulting embedded object.

[swfobj src="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" width="500" height="196" allowfullscreen="true" required_player_version="9.0.0"]

Admittedly this shortcode example isn’t that short. But it sure is a lot shorter and easier to read than the resulting embedded object code.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="500" height="196">
  <param name="movie" value="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" />
  <param name="allowFullScreen" value="true" />
  <!--[if !IE]-->
  <object type="application/x-shockwave-flash" data="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" width="500" height="196" allowFullScreen="true">
  <!--[endif]-->

    <p>The Flash plugin is required to view this object.</p>
  <!--[if !IE]-->
  </object>
  <!--[endif]-->
</object>

For more details on the plugin, visit the shiny new SwfObj WordPress plugin homepage. Feel free to download it and use it on your own site. Any feedback is welcome.