Creating a Modular Homepage with an RSS feed widget

This tutorial will walk you through how to find your RSS feed for your Canvas course annoucements 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:


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

    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 sidebare 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
  7. 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

  8. Click "save & grab code"
  9. Select iFrames for preferred programming language
  10. You will need to add height='600' after width='300' in the string of code.
  11. 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.