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.

Questions or comments?

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

Working example

How to implement

  1. For each area that will display Web feeds, create a section element with class="wb-feeds". 
    <section class="wb-feeds"></section>
  2. Inside the section element add a heading (h1 - h6).
  3. Add an unordered list (ul) after the heading with the feeds-cont class.
    • Facebook feeds:
      1. Add the media-list class to the unordered list.
      2. Add <div class="clearfix"></div> after the unordered list.
    • Flickr and YouTube feeds:
      1. Add the list-inline class to the unordered list.
      2. Add <div class="clearfix"></div> after the unordered list.
  4. 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>
    • Facebook feeds:
      1. Add a media class to the list element.
      2. Add a pull-left class to the link.
      3. Add a profile image with a media-object class to the link.
      4. Add a section element with a media-body class after the link.
      5. Inside the section element add a heading (h1 - h6) with a media-heading class. Include the Facebook account name in this heading (e.g., "Parks Canada - Facebook").
      6. Add a p element containing the Facebook account description after the heading.
      <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>
    • Flickr feeds:
      1. The link href attribute needs to contain the URL of the Flickr account's photostream.
      2. 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:
      1. The link href attribute needs to contain the URL of the YouTube account.
      2. 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>
  5. 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).
    1. Create a div element with class="wb-tabs".
    2. Add a div element with class="tabpanels" within the previous div element.
    3. 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.
    4. Add a summary element at the start of each details element with the name of the group of feeds (e.g., <summary>Facebook</summary>).
    5. 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-facebook" open="open">
				<summary>Facebook</summary>
				<section class="wb-feeds limit-5">
					<h4 class="wb-inv">Facebook</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>

Facebook feeds

<section class="wb-feeds limit-5">
	<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>

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

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: