Fils de syndication

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

• Exemple anglais
• Exemple français

Évaluation et rapport

• Accessibilité (CS WCAG 2.1/2.2 Niveau A & AA)- Rapport Anglais
• Accessibilité (CS WCAG 2.1/2.2 Niveau A & AA)- Rapport Français

Comment implémenter

1. Pour chaque zone qui affiche des fils de syndication, créer un élément section avec class="wb-feeds".

   <section class="wb-feeds"></section>

2. Dans l'élément section, ajouter une entête (h1 - h6).
3. 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.
4. 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>

5. 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).
   1. Créer un élément div avec la classe class="wb-tabs".
   2. Ajouter un élément divavec class="tabpanels" à l'intérieur de l'élément div précédent.
   3. 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.
   4. 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>).
   5. 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>

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

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

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

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

Événements

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

$( document ).on( "wb-ready.wb-feeds", ".wb-feeds", function( event ) {
});

$( ".wb-feeds" ).on( "wb-ready.wb-feeds", function( 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 ) {
});

$( document ).on( "wb-ready.wb", function( event ) {
});

Code source

Code source du widget de fils de syndications sur GitHub