Fils de syndication

Questions ou commentaires?

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

  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 Facebook :
      1. Ajouter la classe media-list à la liste non-ordonnée.
      2. Ajouter <div class="clearfix"></div> après la liste non-ordonnée.
    • 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="http://canada.ca/sample.atom">Exemple de flux Atom</a>
</li>
    • Fils de syndication Facebook :
      1. Ajouter la classe media à l'élément liste.
      2. Ajouter la classe pull-left au lien.
      3. Ajouter une image de profile avec la classe media-object au lien.
      4. Ajouter une élément section avec la classe media-body après le lien.
      5. À l'intérieur de l'élément section, ajouter une entête (h1 - h6) avec la classe media-heading. Ajouter le nom du compte Facebook dans cette entête (e.g., "Parcs Canada - Facebook").
      6. Ajouter un élément p contenant la description du compte Facebook après l'entête.
      <li class="media">
	<a class="pull-left" href="https://www.facebook.com/feeds/page.php?id=134615279898518&amp;format=atom10">
		<img class="media-object" src="http://graph.facebook.com/134615279898518/picture?type=large" alt="Logo Parcs Canada" width="64" />
	</a>
	<section class="media-body">
		<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=134615279898518&amp;format=atom10" rel="external">Parcs Canada - Facebook</a></h4>
		<p>Les parcs nationaux, aires marines nationales de conservation et lieux historiques nationaux du Canada.</p>
	</section>
</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>Facebook</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-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>

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="http://www.tc.gc.ca/medias/rss/routier.xml" rel="external">Communiqués de presse routière (Tous)</a>
		</li>
		<li>
			<a href="http://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 Facebook

<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=460123390028&format=atom10">
				<img class="media-object" src="http://graph.facebook.com/460123390028/picture?type=large" alt="Logo Environnement Canada" width="64" />
			</a>
			<section class="media-body">
				<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=460123390028&format=atom10" rel="external">Environnement Canada - Facebook</a></h4>
				<p>EC est une organisation diversifiée offrant des programmes et des services efficaces et regroupant des gens dynamiques qui font une différence sur le plan environnemental et dans différents aspects de la vie des Canadiennes et Canadiens..</p>
			</section>
		</li>
		<li class="media">
			<a class="pull-left" href="https://www.facebook.com/feeds/page.php?id=134615279898518&format=atom10">
				<img class="media-object" src="http://graph.facebook.com/134615279898518/picture?type=large" alt="Logo Parcs Canada" width="64" />
			</a>
			<section class="media-body">
				<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=134615279898518&format=atom10" rel="external">Parcs Canada- Facebook</a></h4>
				<p>Les parcs nationaux, aires marines nationales de conservation et lieux historiques nationaux du Canada.</p>
			</section>
		</li>
	</ul>
	<div class="clearfix"></div>
</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-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=460123390028&format=atom10">
								<img class="media-object" src="http://graph.facebook.com/460123390028/picture?type=large" alt="Logo Environnement Canada" width="64" />
							</a>
							<section class="media-body">
								<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=460123390028&format=atom10" rel="external">Environnement Canada - Facebook</a></h4>
								<p>EC est une organisation diversifiée offrant des programmes et des services efficaces et regroupant des gens dynamiques qui font une différence sur le plan environnemental et dans différents aspects de la vie des Canadiennes et Canadiens.</p>
							</section>
						</li>
						<li class="media">
							<a class="pull-left" href="https://www.facebook.com/feeds/page.php?id=134615279898518&format=atom10">
								<img class="media-object" src="http://graph.facebook.com/134615279898518/picture?type=large" alt="Logo Parcs Canada" width="64" />
							</a>
							<section class="media-body">
								<h4 class="media-heading"><a href="https://www.facebook.com/feeds/page.php?id=134615279898518&format=atom10" rel="external">Parcs Canada- Facebook</a></h4>
								<p>Les parcs nationaux, aires marines nationales de conservation et lieux historiques nationaux du Canada.</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/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>

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.
limit-4 (défaut):
Limite l'affichage à quatre items.

É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

Date de modification :