Feeds

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

This feature 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.

Examples

Road News Releases and Safety Recalls

Code

View code 
<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>

Ottawa Weather

Code

View code 
<section class="wb-feeds limit-1">
	<h3>Ottawa Weather</h3>
	<ul class="feeds-cont">
		<li>
			<a href="http://weather.gc.ca/rss/city/on-118_e.xml" rel="external">Ottawa Ontario</a>
		</li>
	</ul>
</section>

Tabbed feeds

Facebook

Facebook

  • Enviroment Canada Logo

    Enviroment Canada - Facebook

    At Environment Canada our business is protecting the environment, conserving the country's natural heritage and providing weather and environmental predictions to keep Canadians informed and safe.

  • Parks Canada Logo

    Parks Canada - Facebook

    On behalf of the people of Canada, we protect and present nationally significant examples of Canada's natural and cultural heritage, and foster public understanding, appreciation and enjoyment in ways that ensure the ecological and commemorative integrity of these places for present and future generations.

Flickr

Flickr

YouTube

YouTube

Code

View code 
<section>
	<h3>Tabbed Social Feeds</h3>
	<div class="wb-tabs col-md-5 wb-eqht">
		<div class="tabpanels">
			<details id="details-facebook" open="open">
				<summary>Facebook</summary>
				<section class="wb-feeds limit-5">
					<h4 class="wb-inv">Facebook</h4>
					<ul class="feeds-cont media-list">
						<li class="media">
							<a class="pull-left" href="https://www.facebook.com/feeds/page.php?id=318424514044&amp;format=atom10">
								<img class="media-object" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/t1.0-1/c17.17.207.207/430015_10151952323214045_194318965_n.png" alt="Enviroment Canada Logo" width="64" />
							</a>
							<section class="media-body">
								<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=318424514044&amp;format=atom10" rel="external">Enviroment Canada - Facebook</a></h4>
								<p>At Environment Canada our business is protecting the environment, conserving the country's natural heritage and providing weather and environmental predictions to keep Canadians informed and safe.</p>
							</section>
						</li>
						<li class="media">
							<a class="pull-left" href="https://www.facebook.com/feeds/page.php?id=137563459593611&amp;format=atom10">
								<img class="media-object" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/t1.0-1/p320x320/10245484_872682866081663_8340097330550277155_n.png" alt="Parks Canada Logo" width="64" />
							</a>
							<section class="media-body">
								<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=137563459593611&amp;format=atom10" rel="external">Parks Canada - Facebook</a></h4>
								<p>On behalf of the people of Canada, we protect and present nationally significant examples of Canada's natural and cultural heritage, and foster public understanding, appreciation and enjoyment in ways that ensure the ecological and commemorative integrity of these places for present and future generations.</p>
							</section>
						</li>
					</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">
						<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>

Parameters

Class (parameter) Role Details
wb-feeds Identifier Main targeting class that identifies the code block used for the Web feeds widget.
limit-x Display Controls the amount of items the Web feeds widget will display.
Date modified: