Contact Us
  • Tutorial: Embed a Photobucket Slideshow in your Facebook Static FBML Fan Page

    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!

    Photobucket 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:
      Photobucket Share
    • On the next screen, click the “Get link code” tab:
      Photobucket - Get Link Code
    • 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:
      Photobucket - Raw Embed Code

    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):


    <fb:swf
    swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
    swfsrc='http://static.pbsrc.com/flash/rss_slideshow.swf'
    imgsrc='URL-TO-YOUR-IMAGE' width='480' height='360'
    flashvars="rssFeed=http%3A%2F%2Ffeed567.photobucket.com%2Falbums%2Fss117
    %2Fhyperarts%2FGreenland%25202007%2Ffeed.rss"
    />

    You will need to create an “activation” image that the user clicks to activate your slideshow (Facebook requires that the user take an action, usually a click, to activate Flash and/or JavaScript).

    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:


    imgstyle="width:240px; height:180px;"

    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:

    Related Static FBML Tutorials

    Tutorial: Embed YouTube Videos and Flash in Static FBML Tabs

    Tutorial: Embedding Your YouTube Channel Video Player in a Static FBML Page

    Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML

    Tutorial: Embedding a Flickr Gallery in Static FBML Tab

    Other Resources

    Facebook Developer Wiki on fb:swf tag

    Comments

    1. Hi there.

      I need some help on FBMLing using Photobucket. Can someone help..?

      The following Photobucket codes below differ slightly than the normal slideshows’. May I know where within the codes do i embed into the the FBML? Thanks a gazillion.

      • Hi Liza, I can’t see your code because you didn’t surround it with the <code> … </code> tags, but the URL you should use would be the “src” value in the code Photobucket provides you. If one of them includes the “.swf” extension, I’d try that one first.

    2. Hi Tim, I uploaded mine successfully but it is taking 2 clicks to activate. Can you put some kind of auto play or load in that code?

      Thanks!
      Tammy

      • Try adding: &autoplay=1 to the end of the SWF URL:

        whatever.swf&autoplay=1

        or if that doesn’t work, add either:

        &autoplay=1 or &autoplay=true

        to the end of the flashvars value.

    3. Hey Tim, my bad, it wasn’t taking 2 clicks it was just a tad slow about loading on one click.

      Thanks so much though!

      Tammy

    4. Do you know of any way to NOT make images in a Photobucket slideshow link back to the Photobucket website? Folks who visit my website see my photobucket slideshow, but when they click on one of the photos, they are taken to http://www.photobucket.com – I don’t like this happening. In fact, I clicked on one of the images in your slideshow and was taken directly to YOUR photobucket account where I can view all your photos! This just isn’t right.

      Thanks!

    5. Susan Harding says:

      Whether i use your instructions for Flickr or now Photobucket there seems to be a missing piece. In your example above you don’t address what should go in this link? Why would I use a link to hyperarts?

      imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='480' height='360'

      Thanks

    Trackbacks

    1. [...] image (imgsrc) for fb:swf and fb:flv, and links to videos and galleries on YouTube, Vimeo, Photobucket, Flickr, etc.. Test a URL by pasting it into your browser's address bar. [...]