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="" 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="" 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.

Monday, February 13, 2017

Notes. Blog RSS in Canvas.

In a previous post I wrote up some quick notes about a Diigo RSS feed in Canvas, and in this post I want to write up some notes about how to get a blog RSS feed to appear in Canvas, again using the Inoreader tool. The example I am using today is my new "Feedback Cats" project at my Growth Mindset blog; this Canvas page shows the most recent 5 blog posts with the cats: Blog RSS: Feedback Cats in Canvas (that's an open Canvas course, so just click and go!).

This is Inoreader's "magazine view" (you can also get a full-post view), and I've configured it to display the most recent five items (that's your choice). As you can see, Inoreader grabs a thumbnail, provides a link to the blog post and to the blog itself, along with a snippet from the text of the blog post. If you want to see more, you can click "Next Five" at the bottom of the frame.

To create this Canvas page like this for any blog feed, you follow the same instructions as for the Diigo RSS feed; the process for adding the blog RSS is the same as for Diigo RSS: Subscribe to the blog's RSS feed in an Inoreader folder; Export the folder as RSS/HTML, Configure the HTML Clip, Configure the iframe in Canvas. See that blog post for screenshots and additional details.

Notice that you could put multiple blogs into a folder, so you can use this same solution for a single blog, or for a blog network. For more about how I use Inoreader to manage my blog network, see: Building My Student Blog Network with Inoreader. I've been using Inoreader since 2014, and I have nothing but good things to say: an excellent product with excellent customer service and support.

Blog Site OR Post Feed. So, with any blog, you have two options: you can embed the blog itself in a Canvas page (step by step instructions), or you can display just the most recent post content via RSS, as here. That is the amazing things about blogs: they can function like a website, but they also have a live content stream which you can use separately from the website presentation. It all depends on your needs and goals!

Alternative Solutions:

I found these Community questions about RSS feeds in pages:

Can RSS feeds be on pages? How? Adam Williams replied here with a recommendation for a third party tool (FeedWind), which looks like it would also work. My guess, though, is that Inoreader is the more powerful and flexible option, and I would also guess that it is probably more reliable (running an RSS syndication service requires a lot of dedicated server resources).

Does anyone have a good tool for embedding rss feeds in a course? Here Stefanie Sanders replied with a referral to Feed the Me from the App Center. When I looked up Feed the Me in the App Center, the demo page was broken, and it sounds like it does not deliver thumbnails, only linked titles. Not having thumbnails would be a significant drawback, at least for me. See the Community question page there for details about how people are using the Feed the Me app.

Sunday, February 12, 2017

Notes. Diigo-in-Canvas

One of the challenges I set for myself in the CanvasLIVE brainstorming was to use this as a reason to clean up my Diigo as a sharing platform. Right now I use Diigo as a quick way to bookmark for my own future use, but I have not been doing a good job of annotating and organizing content to share. Diigo is a good platform for that, though, because it has RSS: and the combination of RSS and Inoreader is what lets you send Diigo content anywhere, including inside Canvas.

So, inspired by Janie's Feedback presentation, I am working on two related feedback projects: cleaning up and organizing the feedback articles I've bookmarked in Diigo, and also creating a new series of feedback cats. The Diigo process is what I want to document here.

First, take a look at the CanvasLIVE Playground page that I created to demonstrate how this works: Diigo RSS: Feedback Resources. You see there a live display of the feedback articles that I have tagged and annotated in Diigo. New articles show up automatically!

For each item, there is a title that is linked to the article online, plus a short annotation from me, along with an image pulled from the article. The default display is five items, and you can then click at the bottom to see the next five items, and so on. It's also possible click and see the same contents at Diigo.

Here's how it works:


1. Use Diigo to create bookmarks. It's easy to create a Diigo account (they have some special services for educators too), and there are some browser plugins that allow you to save bookmarks easily as you are browsing. Think about how you like to search and organize the articles as you choose your tags.

2. Optional: add annotations. I usually bookmark lots of stuff, and when I get time I then go back through the bookmarks and add notes (Diigo lets you edit bookmarks later to add notes). When I annotate an article, I add the tag "annotated." That allows me to easily find the bookmarks that are annotated, and I can also search for "NOT annotated" in order to see which articles don't have annotations (yet).

3. Optional: grab images. In addition to annotations that you add to a bookmark, Diigo lets you grab an image to save along with the URL. That can be very helpful in providing a visual clue when scanning a long list of items.


To do this, you will need Inoreader, and you can use the free version of the services (although I highly recommend getting a paid version so that you can use Inoreader not just to gather RSS but also other social media content like Facebook, Twitter, etc.). Go to for more information.

1. Find the Diigo RSS. The RSS button is at the bottom right of any Diigo search results! For this Canvas page, my Diigo search is #growthmindset #theme:feedback #annotated. You can also see the search results directly at Diigo.

2. Subscribe to the RSSfeed in Inoreader. Just copy-and-paste the feed address into the upper right-hand corner of your Inoreader. Make sure you add the feed to a folder; you can have just one feed in a folder, or you can add feeds later on. If you start out with the feed in a folder, you will be able to add the feeds later and have them automatically be part of any service you have configured for the folder.

3. Export the folder as RSS/HTML. Click on the folder, then click on Folder Settings at the top of the Inoreader screen, then Folder Information, and then click Export to turn it on. After you turn on the export, you will see the different Export options:

4. Configure the HTML Clip. Now that you have turned on the folder for export, click on the HTML Clip link and make your choices. For the Canvas page I made, I put in a title ("Growth Mindset Diigo"). It defaults to magazine view, and you can choose the number of items that display. 

5. Configure the iframe in Canvas. Copy the iframe code from Inoreader, and then adjust the width and height as needed. I set the width="750" and height="1400" but you can choose what best suits your needs (although you need at least 750 pixels width for the magazine view).
IMPORTANT: You will need to change to for this to work in Canvas!

Paste the HTML code into your Canvas page and you are good to go! Any new item that you add in Diigo meeting your search criteria will show up automatically in Canvas now.

It's the magic of RSS: some people may think RSS is dead, but as you can see, it is alive and well — and it's still my favorite web technology. :-)

Monday, February 6, 2017

Notes. Random/Daily Discussion Prompts

One thing I will want to show is how you can use dynamic content not just in Pages, but also in Discussions. So, for example, you can use a randomizer for a Discussion Board prompt, like in this example of a Random Growth Mindset Cat (and note also how you have to alert the student about reloading, opening the link in a new window to save it, including the link in the reply so others will know what the prompt was).

One issue that comes up is the height of the iframe (may require scrolling or may result in white space); no easy solution around that. Notice that I centered the iframe (so, paragraph centered, then iframe in paragraph).

You can also have a dynamic widget for daily discussion prompts where there would be a new discussion prompt each day. This would be useful for the kind of discussion where students have a rolling period of time where they can contribute, but the daily prompt would keep it fresh. Again, alert students to clicking on more info so they can share the link to their prompt in the reply.

Here's a screenshot with the script for daily cat:

Blog Announcements

I will do a demo on using a blog for homepage announcements, and one key thing to remember (which I always forget myself when setting up a new one) is that you MUST add the open-in-new-tab snippet to the template header. Otherwise, Canvas will reject any non-http links in the blog. I've got that secret code and other info in this blog post, which I will adapt for use as a tutorial here:
Blissfully Blogging Announcements in Canvas

CanvasLIVE Playground

Of course a new project requires a new blog, especially if I need to use the blog for Canvas course announcements. :-)