How To Embed A Flickr Slideshow In A Tab On Your Facebook Page

Ever since I created my Facebook page, I’ve been looking for a way to embed a Flash slideshow into it. Facebook doesn’t allow embeds, so I looked at a lot of different applications, and MagToo was the closest I could come to a decent solution.

The thing is, I use my Flickr account as a kind of hub to display my work, so the ideal thing would be if I could find a way to use their embed code in Facebook.

I was browsing some Facebook pages and came across one with Flickr slideshows embedded in a tab, and decided I had to know how it was done. From past experience, I knew it had to be Flickr’s embed code wrapped somehow inside FBML (Facebook Markup Language). I looked around and managed to find a good forum thread started by the page owner, and a succinct introduction to FBML. Learning FBML has always been on my list anyway, so I dug in.

Here’s how I made it work:

1. Go to “Edit Page” in your Facebook page.

2. Go down to “More Applications”, mouse over to the little “pencil” symbol on the right and select “Browse More”.

3. Search for “Static FBML”.

4. After selecting the application from the search results, click on “Add to my Page”.

5. When the selection window comes up, choose the page it should be added to.

6. Go back to your page and “Edit Page” again.

7. Look for the FBML application, mouse over to the right and select “Edit”.

8. Here’s where it gets tricky. You need to convert the Flickr embed code for your slideshow into FBML. This was the original code for my slideshow from Flickr:

<object width="700" height="525"> <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2Fshow%2F&page_show_back_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2F&set_id=72157605677028199&jump_to="></param> <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param> <param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2Fshow%2F&page_show_back_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2F&set_id=72157605677028199&jump_to=" width="700" height="525"></embed></object>


And here is the same code in FBML:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='"http://www.flickr.com/apps/slideshow/show.swf?v=71649'
flashvars='offsite=true&lang=en-us&page_show_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2Fshow%2F&page_show_back_url=%2Fphotos%2Fpeterliuphoto%2Fsets%2F72157605677028199%2F&set_id=72157605677028199&jump_to='
imgsrc="http://[location-and-name-of-your-image]"
width='700px'
height='525px'
waitforclick='true'
/>

Feel free to copy and paste this code. Simply replace the location of my slideshow with the one Flickr gives you for yours (“page_show_url”), and update the width and height parameters accordingly.

9. One last thing: as you can see, this code includes an “imgsrc” parameter near the bottom. This is because of a quirk in the platform where the slideshow object appears blank, and you have to put a “cover” image where the object is. It’s awkward, because your viewers will have to click on the image, then click again on the slideshow to start it, but it’s unavoidable right now. Let’s hope they improve the platform going forward. I simply created an image in Photoshop with the same dimensions as my slideshow and uploaded it.

10. Fill in the “Box Title” with the label of your new tab, then press the “Save Changes” button on the bottom.

11. Go back into “Edit Page”, mouse over to the right of your newly created FBML and select “Application Settings”. You will see a choice to make your new application available as a tab on your page.

12. Go back to your page, and you should see a new tab labeled with the name of your application. Sit back and enjoy your new slideshow.

As a live example, here’s the one I created on my page.

Tagged as: embed, facebook, facebook page, fbml, flickr, html