Canvas Tip: Add News Feeds to a Canvas Page with iframe and Feedburner

Aug 10, 2011 at 10:51 am, Jared Stein

Instructure Canvas features a pretty powerful Pages tool that allows for rich text editing, quick linking to tools and activities, and embedding multimedia. It does not, unfortunately, support the embedding of RSS or Atom news feeds. Pages strips out your Javascript, too, so there’s no use trying to roll your own feed parser. But there is a work-around: use Feedburner and an IFRAME.

Warning!

The iframe element, like the HTML frame, is infamous because it traps content inside a restricted browser frame. If the purpose of embedding a news frame in a Canvas Page is to help people access external content, you should tell them to CTRL + click links from the feed in order to open them in a new tab/window.

Feedburner is a web service that transforms regular web pages or news feeds into custom news feeds with static URLs that you can manage through a single account. Feedburner produces a human-readable version of a feed. And since Feedburner is now owned by Google, you can use your existing Google account.

Once logged in to Feedburner.com, create your own new feed by pasting in the URL of the web page or news feed you want to target.

This will produce a Feedburner feed with its own unique URL–make note of that URL from the address bar; we’ll need it to create the iframe in our Canvas course.

The iframe HTML element embeds any URL into a window within a web page. To add an iframe to a Canvas Page, open the Page, click Switch Views to access the HTML, and then type the iframe tags. For example:

<iframe src=”http://feeds.feedburner.com/SkateReanimate” style=”height: 600px; width: 100%;”></iframe>

…where the SRC attribute value is your Feedburner URL. After saving the Canvas page, you may have to refresh in order to see the results:

In this case, the Feedburner feed is actually a conglomeration of different feeds collected and organized in Google Reader. After sharing the GReader folder, I used Feedburner to convert GReader’s Atom feed into a new feed. This was necessary because Google Reader blocks use of iframes for its shared feeds.

4 Responses to “Canvas Tip: Add News Feeds to a Canvas Page with iframe and Feedburner”

  1. Mahendra kumar Says:

    knowledge is a power of students.

  2. Larry Cebula Says:

    Kurt Beer at Canvas pointed me to this post as a possible way to force Canvas to display my Announcements as the default page. But Feedburner is not accepting the URL of my Announcements feed. I get an error page. Any advice?:

    Received HTTP error code 400 while fetching source feed.
    Identify Feed Source
    Back to My Feeds

    The feed URL you entered is:

    https://canvas.instructure.com/feeds/announcements/enrollment_LFHH9Gsyp7VeWCQrhL0VV4b7Kie7HJ5a8vauh1yb.atom

    We could not find a valid feed at that address.

  3. Jared Stein Says:

    Looks like there might be an error in the feed itself from Canvas. I’ll report this to the Canvas developers and will let you know if there’s an update!

  4. Jared Stein Says:

    Larry, sorry to be so slow responding. Looks like there’s actually an invalid element in the Canvas Announcements feed. I’ve reported that to the Support team, and we hope to see a fix soon.

Post a comment

Anti-Spam Protection by WP-SpamFree