PLEASE NOTE: Having answered the same questions about embedding YouTube videos and Flash in Static FBML custom tabs and using FBML many many times, I’m closing comments on this article and have posted a comprehensive Static FBML Troubleshooting Guide which addresses all the issues that cause users problems when implementing FBML on their custom tabs. Please refer to this article for help, as I’ve closed comments on this post.
We also have a troubleshooting FAQ for embedding Flash, photo galleries and video that you should check out.
The troubleshooting article, combined with this tutorial and the many user comments, should address your issues and get you sorted out. Cheers!
In this tutorial, I’ll show you how to embed a Photobucket slideshow in your Facebook Static FBML fan page. We’ve recommended Photobucket in other blog posts as a great option for hosting images online, specifically “activation” images that Facebook requires to load Flash, YouTube videos and Flickr galleries. Photobucket also offers a great selection of ways to display your slideshow. And they look great on a Facebook fan page!
Embedding a Photobucket slideshow in your Static FBML tab uses the same FBML tag that’s used when embedding YouTube videos or slideshows, Flash (SWF) or Flickr galleries.
Of course, the first thing you need to do is set up a Photobucket account (free) and then create your slideshow. I won’t go into great detail on that here. But, basically, you need first to create a new Photobucket album, then upload photos to that album, tag them, add descriptions, etc.
Get the Embed Code for the Photobucket Slideshow
Once you have a Photobucket album, here’s the drill:
- Click the “Share” button in the upper-right corner:
- On the next screen, click the “Get link code” tab:
- In the same screen, next to “Embed album slideshow,” click into the box and copy the content (Mac: Command + C; Windows: Control + C);
- Paste the content into a text editor. It will look like this:
Create the FBML embed code for your Static FBML tab
From the embed you copied in Photobucket, use the value for embed “src” (the first red box, above) for the “swfsrc” value in the FBML fb:swf tag. You will use the entire “flashvars” parameter (2nd red box):
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
imgsrc='URL-TO-YOUR-IMAGE' width='480' height='360'
Your activation image should be the same dimensions as your slideshow (480px x 360px, in the above example), although you can add width and height values in the “imgstyle” parameter to set different dimensions for the activation image. Example:
This would render an activation image that’s exactly half the dimensions of the slideshow when it loads.
This is what your Photobucket slideshow will look like after the user clicks the activation image: