Flickr Albums in Canvas

laurakgibbs
Community Champion
0
1700

CROSSPOSTED. Updates will appear at my CanvasLIVE Playground blog. This post explains how to embed Flickr in Canvas, and the same procedure can be used for Pinterest, as explained here:

Pinterest in Canvas 

~ ~ ~

I've got a Flickr album with my Growth Mindset cats, and you can see that album here: Growth Mindset Cats. Flickr offers an embedding option so you can insert an album slideshow. Click on the Share (arrow) icon which is on the left, below the number of photos, to share an album:

You can then configure how you want to embed the slideshow:


Now, in a plain text editor, paste in that embed code from Flickr, and save it as an .HTML file. You don't need anything else; just the embed code that you have copied from Flickr. Upload that HTML into the Files area of your Canvas course.

For example, I called mine GrowthCatsFlickr.html, and you can see it here: Flickr album in Canvas File.

In the web address for that Canvas file, you can get the Canvas domain, the course number, and the file number, and use that to fill in this iframe snippet. You'll also want to choose a width and height that will work well for your album (it's easy to adjust later).

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://______/courses/______/files/______/download" width="___" height="___"></iframe>

So, for example, here is what I will use for my Flickr album:

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://canvas.ou.edu/courses/56971/files/3858529/download" width="420" height="600"></iframe>

Now, I'll create a Canvas Page, and I'll paste the iframe into the HTML editing view of the page. Here is the page: Flickr Album in Canvas, with a screenshot. The left-right arrows move you through the album, and each image links back to its Flickr page; you can see the page in action here: Flickr Cats in Canvas.


You can also insert a Flickr album into a Discussion Board if you want students to choose images to respond to: