Fils de syndication
Vous cherchez la BOEW v3.1?
À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.
Needs translation
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
sectionelement withclass="wb-feeds".<section class="wb-feeds"></section> - Inside the
sectionelement add a heading (h1-h6). - Add an unordered list (
ul) after the heading with thefeeds-contclass.- Facebook feeds:
- Add the
media-listclass to the unordered list. - Add
<div class="clearfix"></div>after the unordered list.
- Add the
- Flickr and YouTube feeds:
- Add the
list-inlineclass to the unordered list. - Add
<div class="clearfix"></div>after the unordered list.
- Add the
- Facebook feeds:
- 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:
- Add a
mediaclass to the list element. - Add a
pull-leftclass to the link. - Add a profile image with a
media-objectclass to the link. - Add a section element with a
media-bodyclass after the link. - Inside the
sectionelement add a heading (h1-h6) with amedia-headingclass. Include the Facebook account name in this heading (e.g., "Parks Canada - Facebook"). - Add a
pelement 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&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&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> - Add a
- Flickr feeds:
- The link
hrefattribute needs to contain the URL of the Flickr account's photostream. - Add a
data-ajaxattribute 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&format=json">Environment Canada Flickr</a> </li> - The link
- YouTube feeds:
- The link
hrefattribute needs to contain the URL of the YouTube account. - Add a
data-ajaxattribute 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&alt=json">Parks Canada Youtube</a> </li> - The link
- Regular feeds:
- 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
divelement withclass="wb-tabs". - Add a
divelement withclass="tabpanels"within the previousdivelement. - For each group of feeds (group feeds by type), add a
detailselement. Addopen="open"to the group of feeds that should be displayed by default. - Add a
summaryelement at the start of eachdetailselement with the name of the group of feeds (e.g.,<summary>Facebook</summary>). - Add the areas to display Web feeds after each
summaryelement as described in steps 1 to 4, except add thewb-invclass 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> - Create a
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&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&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&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&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&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&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&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&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&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&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&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&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&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&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. |
|
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).
|
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).
|
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.
|
Source code
- Date de modification :