Ajouter des identifiants à une page

Livefyre propose plusieurs options de configuration pour positionner les Sidenotes sur votre page :

  • L'option Sélecteurs définit les éléments sur lesquels les Sidenotes doivent apparaître.
  • Les ancres représentent des éléments qui peuvent être mis à l’écart.
  • Le conteneur de thread personnalisé vous permet de définir l'emplacement du thread Sidenotes par rapport au contenu mis en place.
  • L'option Nombre de Sidenotes vous permet d'afficher le nombre de Sidenotes ajoutés à l'emplacement indiqué.
  • Utilisez plusieurs objets ConvConfig pour ajouter des identifiants à plusieurs articles sur une même page.

Sélecteurs

L’option sélecteurs permet aux Sidenotes de rechercher du contenu sur la page. La valeur de cette option vous permet de déterminer de manière dynamique les éléments qui seront utilisés. Il peut s’agir d’une chaîne de sélecteur (telle que "#content p, #content img"), d’un objet jQuery (tel que $(‘#content’)), d’un tableau d’éléments DOM ou d’un objet doté de deux propriétés : inclure et exclure. L’application Sidenotes utilise alors les éléments spécifiés ou les éléments correspondants sur la page. Si des propriétés d’inclusion et d’exclusion sont utilisées, les Sidenotes analysent d’abord la page pour rechercher tous les éléments de la propriété include, puis suppriment tous les éléments trouvés sur la propriété exclude.

Ancrages

Les ancres représentent un élément dont le contenu peut être mis de côté. Un élément d’ancrage peut contenir du texte ou une image. L’option de sélecteurs transmise lors de la construction de l’application détermine les éléments d’ancrage.

Identifiants d’ancrage

Les ancres de la page sont identifiées à l’aide d’un data-lf-anchor-id.

Pour définir vous-même l’identifiant d’une ancre, ajoutez l’attribut data-lf-custom-anchor-id à l’élément que vous souhaitez mapper à une ancre. Cela s’avère utile dans les cas où la détection automatique des ancres échouerait.

Par exemple, si vous prévoyez d’utiliser une URL différente pour les versions pour ordinateur de bureau et mobile d’une image, deux URL différentes peuvent être mappées à des ancres différentes. Si, à la place, votre code HTML fournit un data-lf-custom-anchor-id identique sur les périphériques mobiles et les ordinateurs de bureau, l’élément d’image est traité comme une ancre unique.

Les ancres ont un type qui est déterminé dynamiquement, mais qui peut également être défini explicitement à l'aide de l'attribut data-lf-custom-anchor-type.

REMARQUE

La valeur du numéro de énumération doit être utilisée.

Les types disponibles sont :

  • Texte: 1
  • Image: 2
  • Média: 3
  • Rich: 4

Voir méthode updateAnchors pour en savoir plus sur l'utilisation de la méthode updateAnchors pour ajouter dynamiquement du contenu Sidenote à la page.

Conteneur de thread personnalisé

Utilisez l'option threadContainerEl pour spécifier un emplacement pour un thread Sidenotes, autre que la position par défaut. Par défaut, lorsqu’une ancre est activée, les Sidenotes apparaissent en regard ou en dessous du contenu pertinent. Pour modifier cette valeur par défaut, utilisez threadContainerEl pour spécifier l'élément où le thread doit apparaître.

Cette valeur pour cette option fonctionne de la même manière que l’option de sélecteurs, sauf que seul le premier élément valide sera utilisé.

Nombre de sidents

Utilisez l'option numSidenotesEl pour incorporer un widget Sidenotes count facultatif sur votre page. Cette option accepte la même entrée que l'option de sélecteurs mais n'utilise que le premier élément valide du tableau d'entrée.

Le widget décorera l’élément fourni ou correspondant et inclura l’icône d’entrée Sidenotes, le nombre de Sidenotes entrés à cet emplacement et une icône d’aide.

Un clic sur le widget affiche une fenêtre contextuelle contenant une brève explication des Sidenotes et de leur utilisation.

L'explication et l'exemple de texte sont configurables à l'aide de chaînes personnalisées ( questionExplanation et questionMockText, respectivement). L’aspect du widget de comptage et de la fenêtre contextuelle peut également être configuré à l’aide de styles personnalisés ( numSidenotes et numSidenotesPopover, respectivement).

Ajouter plusieurs collections Sidenotes à une seule page

Livefyre vous permet d'ajouter plusieurs collections Sidenotes à une seule page. Par exemple, si la page comporte trois articles d’actualité, vous pouvez inclure trois itérations distinctes de l’application Sidenotes. Pour ce faire, vous devez définir un objet ConvConfig distinct pour chaque instance de Sidenotes que vous souhaitez créer. Par exemple :

<html> 
   <head> 
      <script src="//cdn.livefyre.com/Livefyre.js"></script> 
   </head> 
<body> 
   <h2>Story #1</h2> 
   <div id="story1"> 
      <p class="sidenotes">stuff #1</p> 
      <p class="sidenotes">more stuff #1</p> 
   </div> 
   <hr /> 
   <h2>Story #2</h2> 
   <div id="story2"> 
      <p class="sidenotes">stuff #2</p> 
      <p class="sidenotes">more stuff #2</p> 
      <p class="sidenotes">more and more stuff</p> 
   </div> 
   <hr /> 
   <script type="text/javascript"> 
      var convConfig_story1 = { 
         network: '<Your Network>', 
         siteId: '<Site ID>', 
         articleId: '<Your Article ID>', 
         selectors: '#story1 > p.sidenotes', 
         collectionMeta: '<First collectionMeta>' 
      }; 
  
      var convConfig_story2 = { 
         network: '<Your Network>', 
         siteId: '<Site ID>', 
         articleId: '<Your Second Article ID>', 
         selectors: '#story2 > p.sidenotes', 
         collectionMeta: '<Second collectionMeta>' 
      }; 
  
      Livefyre.require(['sidenotes#1', 'auth'], function(Sidenotes, auth) { 
         new Sidenotes(convConfig_story1); 
         new Sidenotes(convConfig_story2); 
         auth.delegate({ 
            login: function (callback) { 
               callback(null,{livefyre: '<Login Token>'}); 
            } 
         }); 
      }); 
   </script> 
</body> 
</html>

Sur cette page