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:
- Configured the flash widget to my liking on the standard MyStrands tools page (http://www.mystrands.com/tools)
- 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.