---
{
	"title": "Feeds",
	"language": "en",
	"category": "Plugins",
	"description": "Aggregates and displays entries from one or more Web feeds.",
	"tag": "feeds",
	"parentdir": "feeds",
	"altLangPrefix": "feeds",
	"css": ["demo/feeds"],
	"dateModified": "2014-07-28"
}
---
<section class="alert alert-warning">
	<h2>Important: Feed plugin stop working for implementation prior v4.0.30</h2>
	<p>This don't impact feed implementation of Flickr and Youtube</p>
	<p>The WET Feed plugin stop working as January 3<sup>rd</sup>, 2019 because of an hard dependance on Yahoo Query Language (YQL) and its web services.</p>
	<p>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.</p>
	<p>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.</p>
</section>
<p>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.</p>
<section>
	<h2>Examples</h2>
	<section class="wb-feeds limit-3">
		<h3>ATOM feed</h3>
		<p>This method fetch the ATOM feed directly and don't use a third party service.</p>
		<ul class="feeds-cont list-unstyled lst-spcd">
			<li><a href="demo/manitoba-en.atom.xml" rel="external">Government of Canada News Releases</a></li>
		</ul>
		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;section class="wb-feeds limit-3"&gt;
				&lt;h3&gt;Canada News Centre - Manitoba&lt;/h3&gt;
				&lt;ul class="feeds-cont list-unstyled lst-spcd"&gt;
					&lt;li&gt;
						&lt;a href="demo/manitoba-en.atom.xml"&gt;Government of Canada News Releases&lt;/a&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
				&lt;/section&gt;</code></pre>
			</details>
		</section>
	</section>
	<section>
		<h3>Tabbed 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-youtube='{"playlist":[
									{"id":"ZwgEH-Szk0k", "title": "Learn to Set up a Tent"},
									{"id":"w5gpKajD8E0", "title": "Camping with Wildlife"},
									{"id":"_E_9te0nq3A", "title": "Learn to Start a Campfire"},
									{"id":"WrtZjBTkQbw", "title": "Planning your trip"}
								]}'>Parks Canada Youtube</a> </li>
						</ul>
						<div class="clearfix"></div>
					</section>
				</details>
			</div>
		</div>
		<div class="clearfix"></div>
		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;section&gt;
				&lt;h3&gt;Tabbed Social Feeds&lt;/h3&gt;
				&lt;div class="wb-tabs col-md-5 wb-eqht"&gt;
					&lt;div class="tabpanels"&gt;
						&lt;details id="details-flickr"&gt;
							&lt;summary&gt;Flickr&lt;/summary&gt;
							&lt;section class="wb-feeds limit-10"&gt;
								&lt;h4 class="wb-inv"&gt;Flickr&lt;/h4&gt;
								&lt;ul class="feeds-cont list-inline"&gt;
									&lt;li&gt;
										&lt;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;amp;format=json"&gt;Environment Canada Flickr&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
								&lt;div class="clearfix"&gt;&lt;/div&gt;
							&lt;/section&gt;
			&lt;/details&gt;

			&lt;details id="details-youtube"&gt;
				&lt;summary&gt;YouTube&lt;/summary&gt;
				&lt;section class="wb-feeds limit-10"&gt;
					&lt;h4 class="wb-inv"&gt;YouTube&lt;/h4&gt;
					&lt;ul class="feeds-cont list-inline"&gt;
						&lt;li&gt;
							&lt;a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCzJRhTw3KVtDlcdNz33eDMQ/uploads?v=2&amp;amp;alt=json"&gt;Parks Canada Youtube&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;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;amp;alt=json"&gt;Department of Fisheries and Oceans’ YouTube&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
					&lt;div class="clearfix"&gt;&lt;/div&gt;
				&lt;/section&gt;
			&lt;/details&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="clearfix"&gt;&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</section>
	</section>
	<section class="wb-feeds limit-4">
		<h3>JSON feed</h3>
		<p>Use attribute <code>data-ajax</code> to read a <a href="../../docs/ref/feeds/feeds-en.html#json-atom-like-feed">JSON ATOM like feed</a>.</p>
		<p>A patch is going to be released for the older version of wet-boew to fully enable this feature.</p>
		<p><strong>How:</strong> Add the attribute <code>data-ajax</code> with an URL to the JSON format of your feed. The <code>href</code> value would be ignored.</p>
		<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>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<pre><code>&lt;section class="wb-feeds limit-3" data-cors="true"&gt;
				&lt;h3&gt;JSON feed&lt;/h3&gt;
				&lt;ul class="feeds-cont list-unstyled lst-spcd"&gt;
					&lt;li&gt;
						&lt;a data-ajax="demo/manitoba-en.atom.json" href="https://www.canada.ca/en/news/web-feeds/manitoba" rel="external"&gt;Canada News Centre - Manitoba&lt;/a&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
				&lt;/section&gt;</code></pre>
				</details>
		</section>
	</section>
</section>
<section>
	<h2>Special cases</h2>
		<section class="wb-feeds limit-7">
		<h3>Feed with no entries</h3>
		<ul class="feeds-cont list-unstyled lst-spcd">
			<li><a href="demo/manitoba-0-en.atom.xml" rel="external">Government of Canada News Releases</a></li>
		</ul>
	</section>
	<section class="wb-feeds limit-7">
		<h3>Feed with one entry</h3>
		<ul class="feeds-cont list-unstyled lst-spcd">
			<li><a href="demo/manitoba-1-en.atom.xml" rel="external">Government of Canada News Releases</a></li>
		</ul>
	</section>
	<section class="wb-feeds limit-7">
		<h3>When limit is greater than the number of feed entries</h3>
		<ul class="feeds-cont list-unstyled lst-spcd">
			<li><a href="demo/manitoba-en.atom.xml" rel="external">Government of Canada News Releases</a></li>
		</ul>
	</section>
	<section class="wb-feeds">
		<h3>When limit is not set</h3>
		<ul class="feeds-cont list-unstyled lst-spcd">
			<li><a href="demo/manitoba-en.atom.xml" rel="external">Government of Canada News Releases</a></li>
		</ul>
	</section>
</section>
<section>
	<h2>Parameters</h2>
	<table class="table">
		<thead>
			<tr>
				<th scope="col">Class (parameter)</th>
				<th scope="col">Role</th>
				<th scope="col">Details</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-feeds</code></td>
				<td>Identifier</td>
				<td>Main targeting class that identifies the code block used for the Web feeds widget.</td>
			</tr>
			<tr>
				<td><code>limit-<em>x</em></code></td>
				<td>Display</td>
				<td>Controls the amount of items the Web feeds widget will display.</td>
			</tr>
		</tbody>
	</table>
</section>
