Tuesday, August 07, 2007

How to Hack Together a Facebook Flash Widget

I don't read directions. Unfortunately, it appears to be a dominant gene trait that I have inherited from my father. So, with my limited ability to write any code (besides some basic markup) and my desire to hack together a Facebook widget - I wasn't too confident in my chances of success.

As it turns out, it's pretty damn easy now with the CodeBox Facebook application.

For my first foray into this, I started with the MyStrands Now Playing flash widget (imagine that). Here's all I did - if you're like me you'd much rather have a working example/walkthrough rather than reading the documentation:

  • Copied the code (which for me looked like):

  • Pasted that code into the CodeBox FBML box in Facebook - this application only accepts valid "FBML (FaceBook Markup Language)" which is a slightly different than standard HTML. To make the standard HTML code into FBML, it just required a couple of tweaks.
  • In this case, all I had to do was change the opening "embed src=" to "fb:swf swfsrc="
  • Since FaceBook doesn't like you have a Flash movie that starts without a user action, they generally require most flash apps to have some sort of placeholder graphic - to make mine I simply took a screenshot of the MyStrands widget, dumped it into a graphic editor, smudged out the data (so it didn't look like a stale widget) and then added a "click to view" button on top. So it looks like this:

  • I then posted this image to Flickr, copied the URL and made this the default image for the widget by simply adding the "imgsrc=(url of the posted photo)" to the code.
  • So, when all was said and done, my CodeBox FBML looked like this:

  • Save the final code (as above) in the CodeBox app and you are all done. You can check out the final product on my FaceBook profile. For those of you who have the mere thought of FaceBook cause you to "throw up a little in your mouth". Here is a harmless screenshot:

Enjoy and let me know if you guys make anything cool.


Anonymous said...

Great trick partner!


Ben Leonard said...

Hi great tutorial just what i needed, but my widget still has a problem, mine is customisable so i need a way of putting the query string values such as id=2&username=ben in to the facebook code from my site, if you have an idea please drop me a mail, admin [at] wipeout44.com

adampasz said...

Cool. This seems to be working for me. Note that you need a closing FB tag, not EMBED.

Anonymous said...

Is there a way to make applications created in this way shareable?