Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

Please refer to my tutorial on adding Static FBML to your Facebook Fan Page for details on adding Static FBML to your Facebook Fan Page. This tutorial shows you how to add a Flickr slideshow, created from one of your “Sets” in your Flickr account, to a Static FBML Application Tab.

PLEASE NOTE: If you can’t get it working, make sure:

• The URLs to both the activation image (imgsrc) and the slideshow are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.
• You have closed the <fb:swf> tag, with </fb:swf>. If the tag isn’t closed, it won’t work.
• All quotes are closed. It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width=”xxx’ ).

Embedding your Flickr Slideshow in Static FBML

Embedding a Flickr Slideshow / Set in your Facebook Static FBML Application Tab is fairly straightforward. Here’s how it’s done:

Create a Flickr Set

If the Set that you want to be the slideshow is already created, skip to Step 4. If you need to first create the Set that will be the Flickr slideshow…

After logging in to your Flickr account….

1) Click on “Organize & Create”:

2) Drag the photos you want in the “set” to the canvas area. When you have added all the pictures you want to have in this Set, click “Add to Set” and select “New Set”.

3) Give the new set a name:

and then click the blue “Save” button:

You will be returned to a screen that shows all your sets.

4) Click on the name of the Set you just created, or the one you want to be the slideshow.

On the left side, at the bottom click on “Open set page”:

On the next screen, click on “Slideshow” in top right area:

Click the “Share” button:

You will see a screen in the upper left:

Under “Grab the Embed HTML” click “Copy to clipboard.”

Creating the FBML Code for your Flickr Slideshow

The code copied to your clipboard will look similar to this:

From that code you want to extract values to place in the FBML to embed the slideshow in your Static FBML page. The above code, when rendered in your FBML, will look like this:

As you can see, you’re just copying into the FBML tag fb:swf the values for the URL to the .swf object, the dimensions, and the “flashvars”.

“URL-TO-ACTIVATION-IMAGE” is the image that must be uploaded to a Web-accessible server that is clicked to enable the slideshow.

Take this code and paste it into your Static FBML box.