But

Cette composante est un gadget logiciel permettant de regrouper et d’afficher des données d'un ou plusieurs fils de syndication. Les formats soutenus sont Atom, RSS et Media RSS.

Utiliser lors

de la promotion et le partage d'information de fils de syndication sur une page Web

Exemples

Comment implémenter

Pour chaque zone qui affiche des fils de syndication, créer un élément section avec class="wb-feeds".
```
<section class="wb-feeds"></section>
```
Dans l'élément section, ajouter une entête (h1 - h6).
Ajouter une liste non-ordonnée (ul) après l'entête avec la classe feeds-cont.
- Fils de syndication Flickr et YouTube :
  1. Ajouter la classe list-inline à la liste non-ordonnée.
  2. Ajouter <div class="clearfix"></div> après la liste non-ordonnée.
Pour chaque source de fil de syndication à afficher, ajouter un élément de liste contenant un lien vers le fil.
- Fils de syndication ordinaires :
```
<li>
	<a href="https://canada.ca/sample.atom">Exemple de flux Atom</a>
</li>
```
- Fils de syndication Flickr :
  1. L'attribut href du lien doit contenir l'URL du fil-photo du compte Flickr.
  2. Ajouter l'attribut data-ajax au lien contenant l'URL du fil JSON du compte Flickr (en anglais seulement).
```
<li>
	<a href="https://www.flickr.com/photos/environmentcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&format=json">Flickr d'Environnement Canada</a>
</li>
```
- Fils de syndication YouTube :
  1. L'attribut href du lien doit contenir l'URL du compte YouTube.
  2. Ajouter l'attribut data-ajax au lien contenant l'URL du fil JSON du compte YouTube.
```
<li>
	<a href="https://www.youtube.com/user/ParksCanadaAgency" rel="external" data-ajax="https://gdata.youtube.com/feeds/api/users/UCr23fllByMomgNGeShe-73g/uploads?v=2&alt=json">YouTube de Parcs Canada</a>
</li>
```

Facultatif : Regrouper plusieurs types de fils de syndication dans une interface à onglets. L'avantage de cette approche est qu'elle ne charge que les fils qui sont actuellement visibles (ce qui améliore considérablement la performance lorsqu'il y a beaucoup d'éléments).

Créer un élément div avec la classe class="wb-tabs".
Ajouter un élément divavec class="tabpanels" à l'intérieur de l'élément div précédent.
Pour chaque groupe de flux (regrouper les fils par type), ajouter un élément details. Ajouter l'attribut open="open" au groupe de fils qui doit être affiché par défaut.
Ajouter un élément summary au début de chaque élément details avec le nom du groupe de fils (e.g., <summary>Pinterest</summary>).
Ajouter les zonnes pour afficher les flux Web après chaque élément summary tel que décrit aux étapes 1 à 4, mais avec l'exception d'ajouter la classe wb-inv à l'entête de chaque zone.

<section>
	<h3>Les comptes des médias sociaux à onglets</h3>
	<div class="wb-tabs col-md-5 wb-eqht">
		<div class="tabpanels">
			<details id="details-pinterest" open="open">
				<summary>Pinterest</summary>
				<section class="wb-feeds limit-5">
					<h4 class="wb-inv">Pinterest</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>

Exemples de code

Fils de syndication ordinaires

<section class="wb-feeds limit-5">
	<h3>Communiqués de presse et rappels de la sécurité routière</h3>
	<ul class="feeds-cont">
		<li>
			<a href="https://www.tc.gc.ca/medias/rss/routier.xml" rel="external">Communiqués de presse routière (Tous)</a>
		</li>
		<li>
			<a href="https://wwwapps.tc.gc.ca/Saf-Sec-Sur/7/VRDB-BDRV/search-recherche/rss.aspx?lang=fra" rel="external">Rappels de la Sécurité Routière</a>
		</li>
	</ul>
</section>

Fils de syndication Flickr

<section class="wb-feeds limit-15">
	<ul class="feeds-cont list-inline">
		<li>
			<a href="https://www.flickr.com/photos/environnementcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&format=json">Flickr d'Environnement Canada</a>
		</li>
	</ul>
	<div class="clearfix"></div>
</section>

Fils de syndication YouTube

<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/UCr23fllByMomgNGeShe-73g/uploads?v=2&alt=json">YouTube de Parcs Canada</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/UCf1JLCB96nHLjidhSJtHDFA/uploads?v=2&alt=json">YouTube de Pêches et Océans Canada</a>
		</li>
	</ul>
	<div class="clearfix"></div>
</section>

Les comptes des médias sociaux à onglets

<section>
	<h3>Les comptes des médias sociaux à onglets</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/environnementcan" rel="external" data-ajax="https://api.flickr.com/services/feeds/photos_public.gne?id=47721741@N05&format=json">Flickr d'Environnement Canada</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/UCr23fllByMomgNGeShe-73g/uploads?v=2&alt=json">YouTube de Parcs Canada</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/UCf1JLCB96nHLjidhSJtHDFA/uploads?v=2&alt=json">YouTube de Pêches et Océans Canada</a>
						</li>
					</ul>
					<div class="clearfix"></div>
				</section>
			</details>
		</div>
	</div>
	<div class="clearfix"></div>
</section>

Converting ATOM XML feed into JSON ATOM like format

Here is the skeleton structure for the feed:

{
	"feed": {
		"entry": [
			{
				"title": "[Title of the entry]",
				"updated": "[UTC date format]",
				"link": "[URL]"
			},

			...
		]
	}
}

Notes:

Replace ... in each entry and remove the ending comas for the least entry.
The Feed plugin would ignore any meta information added to describe the feed. However we recommend that your feed contains self-describing information.

Alias for "Publication date" of each entry:

publishedDate
published
pubDate
updated

Alias for "Link" of each entry:

link
href

Options de configuration

Documente les options de configuration publiques qui peuvent être utilisées par les intégrateurs ou les développeurs.

Option	Description	Comment configurer	Valeurs
`limit-x`	Contrôle le nombre d'items du fil de syndication que le widget affichera.	Ajouter la classe `limit-x` après la classe `wb-feeds` et remplacer `x` avec nombre entier.	défault (non spécifié) Affiche toutes les entrées du fil de syndication `limit-4`: Limite l'affichage à quatre items.
`data-cors="true"`	Permet des requêtes inter-sites (CORS) afin d’obtenir le fil de syndication ATOM sans à devoir utiliser le service web de Yahoo.	Ajouter l’attribut `data-cors="true"`	non-définie (défaut) Utilise le service web de Yahoo `true` Obtient directement le fil de syndication ATOM

Événements

Documente les événements publics qui peuvent être utilisés par les intégrateurs ou les développeurs .

Événement	Déclencheur	Ce qu'il fait
`wb-init.wb-feeds`	Déclenché manuellement (e.g., `$( ".wb-feeds" ).trigger( "wb-init.wb-feeds" );`).	Utilisé pour initialiser manuellement le widget de fils de syndication. Note: Le widget de fils de syndication sera initialisé automatiquement à moins qu'il soit ajouté après le chargement initial de la page.
`wb-ready.wb-feeds` (v4.0.5+)	Déclenché automatiquement après que le plugiciel de fils de syndication ait été initialisé.	Utilisé pour identifier où le plugiciel a fini d'être initialisé (cible de l'événement). `$( 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+)	Déclenché automatiquement après que le fil de syndication soit devenu visible.	Utilisé pour identifier quel fil est devenu visible (cible de l'événement). `$( 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+)	Déclenché automatiquement lorsque BOEW a terminé son chargement et son exécution.	Utilisé pour identifier quand tous les plugiciels BOEW et les correctifs ont terminé leur chargement et leur exécution. `$( document ).on( "wb-ready.wb", function( event ) { });`

Code source

Code source du widget de fils de syndications sur GitHub