Adding Announcements to the Home Page

rkelley1
Community Participant

I'm exploring a way to add course announcements to the Home Page.  Below is a screen shot of what the announcements look like on the Home Page.  For those interested, I'm providing the steps I followed, and a video walk through.  This builds upon what I learned from visiting the SJSU School of Information site.  If you try it out, please let me how it is (or isn't) working for you.

Thanks!

Example of Announcements on Your Home Page (Using RSS, Feedwind, & HTML)

Announcements on Home Page.png

Watch An Example of Announcements Being Added to the Home Page

View Video on YouTube - Adding Announcements  to Home Page

Steps for Inserting Announcements into Your Home Page (Using RSS & HTML)

  • First, you need to create an minimum of one announcement
    1. Open your course
    2. Click on Announcements
    3. Click create announcement (if you don't already have one)
    4. Once you've created an announcement view your course in student view
    5. Once in the student view open the announcement tab
    6. Right click on the RSS icon & select "copy link address"
    7. Paste link into notepad, you will need it for the next steps.
  • Second, go to Feedwind
    1. Create your free account (e.g., can login with Facebook or Google); otherwise, may impact results below
    2. Paste the link into the 'Feed URL' box on the left hand side
    3. Click the 'Plus' button (to the right of where you pasted the URL)
    4. Adjust General Settings to suit (e.g., set height to 390; keep width as 'responsive')
    5. Click the green 'Get Code' at the top right of the page
    6. Click on the 'Try this if it doesn't work' link
    7. Click on the bottom 'Copy Code' button
    8. Paste the Feedwind html code into a safe place to keep it temporarily (e.g., Notepad or Word app)
  • Go to your Canvas Home Page (or anywhere else you wish to add the announcements)
    1. Edit the page (e.g., Home Page)
    2. Place a row of x's where you'd like the announcements to go (e.g., xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)
    3. Switch to the HTML editor by clicking on the link 'HTML Editor'
    4. !! Copy all of the HTML code on your Canvas page and paste it somewhere as a backup of your existing page (e.g., in the Notepad or Word app).
    5. Copy the Feedwind html code (from wherever you temporarily stored it)
    6. Highlight the row of x's (e.g., xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx) on the Canvas page (in HTML view), and paste over it the Feedwind code.
    7. Copy the HTML code below the Feedwind copy you just pasted.
    8. Click on the 'Rich Content Editor' link at the top, to switch back to the Rich Content Editor view.
    9. In rich text editor view, drag and resize the Feedwind Announcements box so that the height and width are 650.  Don't worry if this results in a large box; if you set width to be mobile responsive (on Feedwind), then your announcement widget will adjust on your page to the proper width.  We'll address the height of the announcements widget in a step further below.
    10. Switch to the HTML editor by clicking on the link 'HTML Editor'
    11. Paste the HTML code back into place (so that it is pasted in after any existing HTML code; this assumes everything below the feedwind HTML was removed by Canvas)
    12. Edit the height of the Feedwind iFrame to the desired height (e.g., <iframe src="https://feed.mikle.com/widget/v2/####/" width="640" height="400"></iframe></p>
    13. Save the page