Government of Canada / Gouvernement du Canada

Search

Feeds

Important: Feed plugin stop working for implementation prior v4.0.30

This don't impact feed implementation of Flickr and Youtube

The WET Feed plugin stop working as January 3rd, 2019 because of an hard dependance on Yahoo Query Language (YQL) and its web services.

See the JSON feed example bellow as an alternative solution. A patch is going to be released for older version of wet-boew to fully enable this feature.

Note: The upcoming release of WET-BOEW v4.0.30 (scheduled for the end of January) would read by default the XML feed directly without using any third party services. Although this imply your CORS would be properly configured on your server.

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

ATOM feed

This method fetch the ATOM feed directly and don't use a third party service.

Code

View code 
<section class="wb-feeds limit-3">
				<h3>Canada News Centre - Manitoba</h3>
				<ul class="feeds-cont list-unstyled lst-spcd">
					<li>
						<a href="demo/manitoba-en.atom.xml">Government of Canada News Releases</a>
					</li>
				</ul>
				</section>

Tabbed feeds

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

JSON feed

Use attribute data-ajax to read a JSON ATOM like feed.

A patch is going to be released for the older version of wet-boew to fully enable this feature.

How: Add the attribute data-ajax with an URL to the JSON format of your feed. The href value would be ignored.

Code

View code 
<section class="wb-feeds limit-3" data-cors="true">
				<h3>JSON feed</h3>
				<ul class="feeds-cont list-unstyled lst-spcd">
					<li>
						<a data-ajax="demo/manitoba-en.atom.json" href="https://www.canada.ca/en/news/web-feeds/manitoba" rel="external">Canada News Centre - Manitoba</a>
					</li>
				</ul>
				</section>

Special cases

Feed with no entries

Feed with one entry

When limit is greater than the number of feed entries

When limit is not set

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.

Page details

Date modified: