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/

Paste your RSS feed URL into the text entry field (replacing the example text) and click the Add Feed button.

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

Customize your feed widget (optional). As you scroll down the page, you’ll see many customizable settings. As you experiment with them, the live preview will update to show you the results.
When you’re happy with your widget, scroll to the bottom of the page. Click the link that says [Click here for iFrame code].

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

Click inside the code snippet to highlight/select all the code and copy it.

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/

Click Generic iFrame, then paste your FeedWind iframe code into the text area (replacing the example text). Then click the blue Embed button.

Result: Embed Responsively generates a preview and new embed code.

Next, edit the new embed code. You can use CTRL + F (Windows) or CMD + F (Mac) and type in a search term, and your browser will highlight the term within the embed code text box. You are looking for two things:
1. width
  anywhere you see width=”300” or width=300 or width=”300px;”
  change it to width=”100%” or width=100% or width=”100%;”
2. http
  anywhere you see http, change it to https

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.

Finally, copy your new, responsive embed code to your clipboard (you will paste into Canvas in the next step).

Step 4: Insert Your Feed Widget into Canvas<

Log into Canvas and navigate to a course area where you want to include your RSS feed widget. Whether you are creating a new item or adding to an existing item, you’ll need to click Edit to access the Rich Content Editor.
You can embed your RSS feed widget into any content type that uses the Rich Content Editor: Announcements, Assignments, Discussions, Pages, Quizzes, or Syllabus.
Once you are in Edit mode, click HTML Editor
Insert your cursor into the text box and paste the code you copied from Embed Responsively. (If you are adding to existing content, insert a blank line or two where you want the widget to appear and then paste.) Then click the blue Save button.

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: