Web feeds

Overview

Project Lead: Mario Bonito (@masterbee)

Purpose

The purpose of this feature is to provides a widget for aggregating and displaying the entries from one or more Web feeds on a Web page. Supported Web feed formats are Atom, RSS, and Media RSS. The widget can also display Twitter feeds as well as weather information from Environment Canada.

Rationale

why does it work the way it does?
why is it necessary?
when should we use it?

Benefits

Displays entries from one or more Atom, RSS, and Media RSS and Twitter feeds on a Web page without the need for a Web feed reader
Dynamically fetches the top items of any public Atom, RSS, or Media RSS feed
Enables cross-promotion and sharing of information between Web sites
Conforms to WCAG 2.0 AA
Uses WAI-ARIA to enhance accessibility
Progressive enhancement approach

Recommended usage

Promoting and sharing information from Web feeds on a Web page

Implementation

Getting Started

For each Web feed, create a divelement with class="wet-boew-webwidget with an inner div element with class="widget-container"
Inside the inner div created in the previous step add a section element
Inside the section element add a heading (h1-h6) with one of the following classes: widget-title-attention, widget-title-dark or widget-title-attention
Add an unordered list (ul) after the heading with the widget-content class.
For every Web feed source to display add a list element containing a link to the feed:
```
<li><a href="http://canada.gc.ca/sample.atom">Sample Atom Feed</a>
```

Example Code

<div class="wet-boew-webwidget limit-5 span-4"><div class="widget-container">
	<section>
	<h3 class="widget-title-dark">RSS Feed</h3>
		<ul class="widget-content">
			<li><a href="http://www.tc.gc.ca/mediaroom/rss/road.xml">Road News Releases (All)</a></li>
			<li><a href="http://wwwapps.tc.gc.ca/Saf-Sec-Sur/7/VRDB-BDRV/Search/Rss-Search.aspx">Road Safety Recalls</a></li>
		</ul>
	</section>
</div></div>

Parameters

The web feeds widget accept the following parameter: limit

Limit Parameter

Each feed widget can specify a limit of element to display. To use this parameter add a class to the parent element (the div with the wet-boew-webwidget class) that start with "limit" followed by a dash then followed by the number of elements to limit the feed too. For a 5 items limit, use the following class: class="limit-5". If no class is provided then no limit is set.

Examples

Development

The Web feeds widget is dependent upon Google Feed API (Terms of Service).

The code for the Web feeds widget is located in several places within the source folder of WET:

js/workers/webwidget.js - contains the JavaScript code for the Web feeds widget
js/sass/webwidget.scss - contains the CSS for the Web feeds widget
js/images/webfeeds/ - contains the images for the Web feeds widget

Known Issues

Default refresh period is set to 5 minutes which could create a noticeable delay before the widget posts a Web feed update.
Potential for slowdowns when there is a lot of traffic on the server.

Version History

References

Google Feed API