Laura Gibbs

NPR: An Example of Embedding

Blog Post created by Laura Gibbs on Mar 19, 2017

I'm in the process of documenting different embedding options for Canvas, and today I wrote up an NPR example. Please share your favorite embedding strategies here: Favorite Tools/Sites for EMBEDDING in Canvas Pages 


You can see the results of the NPR embedding here in my PAINT Canvas Workshop: NPR. Why embed rather than link? Embedding allows you to put the audio in the context that makes sense for your class. With regard to this particular item, I teach a course in Indian Epics, and I also like to share information about contemporary Indian authors with my students, and I am especially excited to share their Twitter accounts so that students can see the authors using Twitter to connect and share with their readers. As soon as I heard this interview on NPR, I knew I wanted to share that interview with my students (it's a really great interview about storytelling in general, along with some specifically Indian material), and I also wanted to share Kanishk Tharoor's Twitter account too, because he is a wonderful author to follow (I also follow his father, Shashi Tharoor, who is a personal hero of mine). Here's a screenshot of how that turned out:


NPR screenshot


NPR is a perfect example of an embedded service (in this case, audio) which uses iframes. That makes it a great candidate for use in Canvas. Here's how I embedded the NPR item in that Canvas page:


1. I went to the NPR webpage for the item, and you'll see I also included that link in the supplementary material that I included also because the webpage has a very useful transcript of the audio also.


2. I clicked on the embed link in the upper right and copied the iframe embedding code that NPR provides:


npr embed


3. I then pasted in the embed code using the HTML Editor view in Canvas. Then, using the Rich Content Editor view, I added some supplementary information to provide context for the audio. As you can see, I also added the Twitter feed for the author; you can find out more about that here: Twitter4Canvas. (The Twitter embedding requires one more step because, unlike the NPR embed, Twitter uses javascript rather than a simple iframe.)