Tutorial: Embedding Flash in Facebook Business Pages

In a current project with Oneupweb, I was faced with the challenge of embedding our podcast player inside a business page on facebook. While this sounded like a simple task, finding the right solution has proven to be quite an obstacle.

There are many apps out there designed to embed flash to your profile, but you’ll likely find that the majority of them were not developed for use in business accounts. To add to that, facebook recently changed their business pages to make them function more like personal profiles. This is mostly a good thing; except that it resulted in “endless loop redirects” for the rest of the developer apps that are supposed to be working. Now when you try to install one, you end up with an error page and a broken app added to your profile.

So while we wait for the developing world to catch up, we’re stuck with apps developed by facebook. Luckily, with a bit of digging (and a lot of testing), the right app is out there. It’s called Static FBML (FaceBook Markup Language).

How to install it

1. Log into your business account and click this link
2. Click the [Add To Page] button
3. Click the [Add Static FBML] button

If everything installed correctly, you should be redirected back to your wall.

How to use it

1. 1. Click the Edit Pages link, located below your profile picture
   2. Click the [pencil] icon next to Static FBML and select Application Settings
   3. Choose if you want it displayed as a Box, Tab or Both
   4. Click the [Okay] button

1. 1. Click the [pencil] icon next to Static FBML and select Edit

1. 1. Enter a title to be displayed above your box/tab

1. 1. Enter the embed code (located below)

1. 1. Click the [publish] button

The Embed Code

Although the app description says that you can use HTML, it is greatly restricted. Needless to say, the regular flash embed code will not fly here. The only other option is (you guessed it) FBML. It’s okay if you’re not a developer, this part is fairly easy.

Let’s first look at the basic code, and then I’ll walk you through it:

This tag tells facebook that we’re using FBML; In this case, we want to use a swf object.

Here we set the source url of our flash movie.

Here we set the pre-click image for our flash movie. Yes, I said pre-click. Facebook requires that a user activates flash before it can be displayed.

Here we set the width and height of our flash movie.

More Options

There are other options available that can be applied to your movie, such as swfbgcolor and flashvars. For a complete list and description of their uses, visit the Facebook Developers Wiki. There you can also see which flash variables facebook automatically passes for use inside your movies (such as the identification of the currently logged in user).

So there you have it! If you followed the above steps, you should now have a fully functional embedded flash movie. I hope you found this tutorial helpful, and that you’ll become our fan on facebook.