Creating a Modular Homepage with an RSS Feed Widget

Post

This tutorial will walk you through how to find your RSS feed for your Canvas course announcements and then how to create a widget to have these announcements on your homepage for your course. The tutorial also includes the HTML code to copy and paste into the rich content editor in Canvas.

What you need to know before you start:

What you’ll learn from this tutorial:

  • Using an HTML code to customize your homepage
  • How to find your RSS feed for your course announcements
  • Creating an RSS widget with your custom feed
  • Adding that widget to your custom homepage

Begin Tutorial

IMPORTANT! Do this in your LIVE course shell and NOT your practice course

Creating your custom course homepage
  1. Click this HTML file link [homepage_tutorial.html]
  2. Right click when it opens & select view source code or view page source.
  3. Copy the entire code and paste into the wiki you are using for your Canvas course homepage.
    Important: you must be in the HTML editor view.
  4. Follow the instructions in the code to customize the page for your course.
    • Adding course name & short introduction
    • Adding instructor photo
    • Adding contact information
  5. Click save and keep window open
Finding your RSS feed for your Announcements
  • First you need to create an minimum of one announcement
    • Open your course
    • Click on Announcements
    • Click create announcement
    • Once you’ve created an announcement view your course in student view
    • Once in the student view open the announcement tab
    • Right click on the RSS icon & select “copy link address”
    • Paste link into notepad, you will need it for the next steps.
Creating your RSS Widget
  1. Go to webRSS.com and sign up for an account (it is free)
  2. Once logged in click on the “Home” tab at the top
  3. On the left sidebar menu under “Create Widgets” select Add new feed
  4. Paste the URL for your announcement feed
  5. Click create new feed
  6. Now go through and select you setting preferences
Setting Recommendations
  • Display Feed Title = No
  • Display Feed Source = No
  • Panel Width = 430px
  • Max. Items to Display = 1
  • Item Display Order = New Items on Top
  • Show item desciption = Full
  • Open links in New Window = No
  • Include Add to Site button = No
  • Choose Icon = No
  • Select Pre-Design Templates
  • Theme = invisible
  • Background Color = #ffffff
  • Title Background Color = #ffffff
  • Title text color = #000000
  • Body text color = #000000
  • Border color = leave blank
  • Font = verdana
  • Font size = 2
  1. Click “save & grab code”
  2. Select iFrames for preferred programming language
  3. You will need to add height=’600′ after width=’300′ in the string of code.
  4. Copy code, switch to your Canvas homepage and paste into the designated section on your custom homepage.
    Important: Make sure you are using the HTML view before pasting your code.

[top]