- Passer au contenu principal
- Passer à « À propos de ce site »

# 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

- Exemple anglais
- Exemple 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="http://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 `div`avec `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>

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

## 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 :
  2015-03-19