Feeds

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.

Use when

Promoting and sharing information from Web feeds on a Web page

Working example

How to implement

For each area that will display Web feeds, create a section element with class="wb-feeds".
```
<section class="wb-feeds"></section>
```
Inside the section element add a heading (h1 - h6).
Add an unordered list (ul) after the heading with the feeds-cont class.
- Flickr and YouTube feeds:
  1. Add the list-inline class to the unordered list.
  2. Add <div class="clearfix"></div> after the unordered list.

For every Web feed source to display, add a list element containing a link to the feed.

Regular feeds:

<li>
	<a href="http://canada.ca/sample.atom">Sample Atom Feed</a>
</li>

Flickr feeds:

The link href attribute needs to contain the URL of the Flickr account's photostream.
Add a data-ajax attribute to the link containing the URL of the Flickr account JSON feed.

<li>
	<a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;format=json">Environment Canada Flickr</a>
</li>

YouTube feeds:

The link href attribute needs to contain the URL of the YouTube account.
Add a data-ajax attribute to the link with the URL of the YouTube account JSON feed.

<li>
	<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;alt=json">Parks Canada Youtube</a>
</li>

Optional: Group multiple types of feeds into a tabbed interface. The benefit of this approach is it will only load the feeds that are currently visible (significantly improves performance when there are lots of feeds).

Create a div element with class="wb-tabs".
Add a div element with class="tabpanels" within the previous div element.
For each group of feeds (group feeds by type), add a details element. Add open="open" to the group of feeds that should be displayed by default.
Add a summary element at the start of each details element with the name of the group of feeds (e.g., <summary>Pinterest</summary>).
Add the areas to display Web feeds after each summary element as described in steps 1 to 4, except add the wb-inv class to the heading for each area.

<section>
	<h3>Tabbed Social Feeds</h3>
	<div class="wb-tabs col-md-5 wb-eqht">
		<div class="tabpanels">
		<details id="details-pinterest" open="open">
			<summary>Pinterest</summary>
				<section class="wb-feeds limit-5">
					<h4 class="wb-inv">Pinterestk</h4>
					<ul class="feeds-cont media-list">
						...
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>

			<details id="details-flickr">
				<summary>Flickr</summary>
				<section class="wb-feeds limit-10">
					<h4 class="wb-inv">Flickr</h4>
					<ul class="feeds-cont list-inline">
						...
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>

			<details id="details-youtube">
				<summary>YouTube</summary>
				<section class="wb-feeds limit-10">
					<h4 class="wb-inv">YouTube</h4>
					<ul class="feeds-cont list-inline">
						...
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>
		</div>
	</div>
	<div class="clearfix"></div>
</section>

Example code

Regular feeds

<section class="wb-feeds limit-5">
	<h3>Road News Releases and Safety Recalls</h3>
	<ul class="feeds-cont">
		<li>
			<a href="http://www.tc.gc.ca/mediaroom/rss/road.xml" rel="external">Road News Releases (All)</a>
		</li>
		<li>
			<a href="http://wwwapps.tc.gc.ca/Saf-Sec-Sur/7/VRDB-BDRV/search-recherche/rss.aspx?lang=eng" rel="external">Road Safety Recalls</a>
		</li>
	</ul>
</section>

Flickr feeds

<section class="wb-feeds limit-15">
	<ul class="feeds-cont list-inline">
		<li>
			<a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;format=json">Environment Canada Flickr</a>
		</li>
	</ul>
	<div class="clearfix"></div>
</section>

YouTube feeds

<section class="wb-feeds limit-15">
	<ul class="feeds-cont list-inline">
		<li>
			<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;alt=json">Parks Canada Youtube</a>
		</li>
		<li>
			<a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UC5D1a5R8bbrTXEJrjmRX7gA/uploads?v=2&amp;alt=json">Department of Fisheries and Oceans’ YouTube</a>
		</li>
	</ul>
	<div class="clearfix"></div>
</section>

Tabbed feeds

<section>
	<h3>Tabbed Social Feeds</h3>
	<div class="wb-tabs col-md-5 wb-eqht">
		<div class="tabpanels">

		<details id="details-flickr">
				<summary>Flickr</summary>
				<section class="wb-feeds limit-10">
					<h4 class="wb-inv">Flickr</h4>
					<ul class="feeds-cont list-inline">
						<li>
							<a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47711201@N05&amp;format=json">Environment Canada Flickr</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>

			<details id="details-youtube">
				<summary>YouTube</summary>
				<section class="wb-feeds limit-10">
					<h4 class="wb-inv">YouTube</h4>
					<ul class="feeds-cont list-inline">
						<li>
							<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;alt=json">Parks Canada Youtube</a>
						</li>
						<li>
							<a href="https://www.youtube.com/user/fisheriescanada?feature=results_main" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UC5D1a5R8bbrTXEJrjmRX7gA/uploads?v=2&amp;alt=json">Department of Fisheries and Oceans’ YouTube</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>
		</div>
	</div>
	<div class="clearfix"></div>
</section>

Configuration options

Document the public configuration options that can be used by implementers or developers.

Option	Description	How to configure	Values
`limit-x`	Controls the amount of items the Web feeds widget will display.	Add the `limit-x` class after the `wb-feeds` class and replace `x` with an integer.	`limit-4` (default): Limits display to four items.

Events

Document the public events that can be used by implementers or developers.

Event	Trigger	What it does
`wb-init.wb-feeds`	Triggered manually (e.g., `$( ".wb-feeds" ).trigger( "wb-init.wb-feeds" );`).	Used to manually initialize the Feeds widget. Note: The Feeds widget will be initialized automatically unless it is added after the page has already loaded.
`wb-ready.wb-feeds` (v4.0.5+)	Triggered automatically after the Feeds plugin has initialized.	Used to identify where the Feeds plugin has finished initializing (target of the event). `$( document ).on( "wb-ready.wb-feeds", ".wb-feeds", function( event ) { });` `$( ".wb-feeds" ).on( "wb-ready.wb-feeds", function( event ) { });`
`wb-feed-ready.wb-feeds` (v4.0.5+)	Triggered automatically after a feed has become visible.	Used to identify which feed has become visible (target of the event). `$( document ).on( "wb-feed-ready.wb-feeds", ".wb-feeds .feeds-cont", function( event ) { });` `$( ".wb-feeds .feeds-cont" ).on( "wb-feed-ready.wb-feeds", function( event ) { });`
`wb-ready.wb` (v4.0.5+)	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`

Source code

Feeds widget source code on GitHub

Date modified:: 2014-08-04

Language selection

Search and menus

Search