Site icon Center for Teaching, Learning & Engagement

Embedding RSS Feeds in Canvas

Enliven your course content by bringing timely, relevant, online articles into a Canvas page. Set this up once and new content will pour in automatically all semester long, using the magic of RSS (Really Simple Syndication).

Overview of the process: find a feed URL, set up iFrame code, and embed into Canvas. Let’s get started:

Step 1: Find a Feed URL

To bring an RSS Feed into Canvas, you need to know its URL.

GCC Library Faculty can assist you in finding feeds from databases and other subscriptions available through the Library. You can also find RSS feeds on your own. There is a Google-powered RSS search engine you can use. Or you can pretty easily extract an RSS feed URL from any web page by following Julia Doherty’s excellent 1-minute video tutorial:

Step 2: Use FeedWind to generate iFrame code

FeedWind is an RSS embed code generator. In a new web browser tab, go to FeedWind: http://feed.mikle.com/

Result: The live preview to the right will be updated with the newest items from your RSS feed.

Result:A code snippet is generated and appears below the link.

Step 3: Make the iFrame Responsive

It’s a best practice to make your embed code “responsive.” This means it will adapt itself to the screen size of the device used to view it. For your students, it will mean that your RSS widget works as well on a mobile phone or tablet as it does on a computer screen.

In a new web browser window or tab, go to Embed Responsively: http://embedresponsively.com/

Why? We want the width of the widget to be 100% of the content area in Canvas. And since Canvas uses https, we want our widget to use https, too; otherwise it will not display.

Step 4: Insert Your Feed Widget into Canvas<

Result: You should see your feed widget in your content area now.

Occasionally, Canvas sets the height to 150 pixels as shown here:

If this happens, you can fix it by going back into Edit mode, click the HTML Editor again, and use CTRL + F (Windows) or CMD + F (Mac) to search for “height”. This will highlight any instances of height in the code:

Replace 150< with 400 (or a pixel height of your choice) and then Save.

Your content must be published in order for your students to see it.

Exit mobile version