Monday, March 6, 2017

Flickr Album 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, including in a Canvas Page. 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:



And just for fun, I'll embed the actual album here too: it can go anywhere that javascript is accepted. :-)


Growth Mindset Memes


This post also appears in the Canvas Community Instructional Designers group.

Sunday, March 5, 2017

Pinterest in Canvas

I'm a huge fan of Pinterest, one of the ways I use it for my classes is to create a Board for each class each semester where I pin the stories in my students' projects. The projects are up and running now, so here are the Boards: Myth-Folklore and Indian Epics. As you can see, I embed the Boards on the Project Directory page for each class, and in this post I'll explain how you can also embed Pinterest Boards like that in Canvas; click here for the Canvas Page:


You can create all kinds of widgets for Pinterest accounts, and the option I used here was to create a custom-sized Board. To create a widget, just click on the ... menu you see at any Board:


Then, configure your widget by filling in the blanks provided:



This will generate a custom code for your widget, plus a standard javascript snippet. These will both appear on the widget design page down towards the bottom:


Now, in a plain text editor, paste in both chunks of code, and save the text file with an HTML suffix. You don't need any other code; just the two snippets provided by Pinterest:


Then, upload it to your Canvas space. For example, I will call my file IEPinterestBoard.html, and you can see it here: Pinterest Board in Canvas File.

In the web address for that Canvas file, you can find 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 Board (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 Pinterest Board:

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

Now, I'll create a Canvas Page, and I'll paste the iframe into the HTML editing view of the page. You can also add any other page content that you want!

Here is the resulting Pinterest: Indian Epics. Now, as I pin new stories to the Board from my students' projects (there are new stories every week!), those pins will show up automatically inside Canvas.

I also have the Board embedded in our class wiki page; Pinterest Board widgets work wherever javascript is accepted.