Flickr Tech Tips

Flickr is a great tool for collecting, sharing, and discovering images. Flickr allows you to create slideshows from an album which you can then embed; the slideshow is Flash-based, so it's always a good idea to also link to the album page, in case the device someone is using does not allow Flash. So, here is a slideshow of my Growth Mindset Cats album:

Getting this to display in Canvas was not as easy as I expected, but I was able to make it work: Flickr Slideshow in Canvas.

Here is the solution I used:

1. Get code. Get the embedded slideshow code from Flickr. Just add /show to any album to get the link (here's an example), and then click on Share in the upper right-hand corner, and configure the HTML for your desired width. Flickr will then display the embed code you need.

2. Create page. In an https space (OU faculty can use OU Create), create a completely vanilla HTML webpage and paste the embed code into the body of the page. Here is my vanilla webpage with the Flickr slideshow.

3. Embed page. Then use iframe to embed that slideshow in your Canvas webpage. Here is the result: Flickr Slideshow in Canvas.

~ ~ ~

I tried two different solutions that did not work in order to reach this solution.

First, I tried pasting in the embed code from Flickr. That was nice and easy, and it worked great in Chrome, but for some reason did not work in Firefox, even though Firefox will indeed display a Flickr slideshow. I suspect it has something to do with the code, completely mumbo-jumbo to me, that Canvas adds automatically. Here's a screenshot; maybe a Canvas guru can explain why it needs to do that to my code:

Then, I tried just iframing the Flickr slideshow page, but Flickr does not allow iframe of its pages.

Luckily, the third solution that I tried (see above) seems to work just fine!