Intégration du widget Olifid

Paramètres avancés

Widget ‘list’:

C’est le widget qui affiche la liste des news

Code à insérer :

Copy to Clipboard

Contactez-nous pour obtenir votre clef d’API

Fonctionnement du code du widget ‘list’ :

La première ligne est très simple, il suffit juste de mettre votre clef d’API à la place de YOUR-API-KEY

Information importante: l’API key ne fonctionne que sur un nom de domaine précis, le widget ne fonctionnera donc pas sur un autre nom de domaine que celui associé à l’API key qui vous aura été attribuée.

(Contactez-nous pour obtenir votre clef d’API)

Copy to Clipboard

La suite consiste en une div avec différents paramètres

id= « olifid » est obligatoire. Cela permet au script de savoir qu’il doit placer le widget ici

data-query= « » est l’endroit où vous placerez la query qui déterminera quel type de contenu apparaître dans le widget. Exemple: « language:fr » ne fera apparaitre que le contenu en français. Pour plus de détail, voir l’API doc

data-link-scheme= « » C’est la page de destination des liens: cela indique sur quelle page de votre site les contenus complets des news s’afficheront (voir la suite). Cela va servir à fabriquer les url pour chaque news. Chez Olifid, la page de destination est /widget/detail/

IMPORTANT: si vous utilisez le terme « widget-inside » comme data-link-scheme, alors cela vous permettra d’afficher les communiqués en entier de manière automatique à l’intérieur du widget, ou en lightbox. Pour cela vous devrait rajouter les scripts « widget-inside » proposés ci-dessous

data-link-id= « » indique quelle sera la variable utilisée pour retrouver la news. Chez Olifid on utilise « id » tout simplement. Les url des news auront donc cet aspect : https://www.olifid.com/widget/detail/?id=xxxxx avec xxxx l’id de la news

data-cpnumber= « » indique le nombre de news que l’on souhaite avoir dans le widget

la div contenant le lds-hourglass concerne le sablier d’attente d’affichage.

Copy to Clipboard

Enfin, la balise ‘<style>’ permet de gérer le style du widget en détail pour une intégration parfaite dans votre site.

(voir l’exemple ci-dessous)

Copy to Clipboard

Script d’affichage intérieur:

Voici le script qui permet d’affiche les communiqués en entier à l’intérieur de l’espace du widget.

Vous pouvez insérer ce script au choix à l’endroit du widget, ou alors avant la fermeture de la balise body, ou dans le header.

IMPORTANT: pour cela vous devait avoir impérativement paramétré l’attribut data-link-scheme ainsi: data-link-scheme= »widget-inside »

Copy to Clipboard

Exemple :

Code widget :

Copy to Clipboard

CSS utilisé :

Copy to Clipboard
 <style>
    #olifid {
      border: 1px solid rgb(0, 0, 0);
      height: 50vh;
      width: 100%;
      overflow: auto;
      font-size: 12px;
      text-align: center;
    }

    #olifid table {
      border-collapse: collapse;
      border-spacing: 0;
      text-align: left;
    }

    #olifid table td {
      padding: 6px;
    }

    #olifid table td.date {
      color: gray;
      white-space: nowrap;
      font-size: 10px;
    }

    #olifid table td.link {
      /*white-space: nowrap;*/
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 200px;
    }

    #olifid table td.link a {
      color: black;
      font-weight: bold;
      text-decoration: none;
    }

    #olifid table td.orga {
      color: gray;
      font-size: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width:80px;
    }

    #olifid table tbody tr:nth-child(odd) {
      background-color: #ebebeb;
      color: #fff;
    }

    #olifid .lds-hourglass {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      display: inline-block;
      top: 50%;
      transform: perspective(1px) translateY(-50%);
    }

    #olifid .lds-hourglass:after {
      content: " ";
      display: block;
      border-radius: 50%;
      width: 0;
      height: 0;
      margin: 8px;
      box-sizing: border-box;
      border: 32px solid #000;
      border-color: #000 transparent #000 transparent;
      animation: lds-hourglass 1.2s infinite;
    }

    @keyframes lds-hourglass {
      0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }

      50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      100% {
        transform: rotate(1800deg);
      }
    }
  </style>



</html>

Widget ‘detail’:

C’est le widget qui permet l’affichage de l’intégralité d’un communiqué sur la page de destination définie précédemment

Code à insérer :

Copy to Clipboard

Contactez-nous pour obtenir votre clef d’API

Fonctionnement du code du widget ‘detail’ :

On reprend le code du widget list.

Le data-link-scheme permet de savoir au widget s’il est bien sur la page d’affichage des news en entier.

Ainsi, le widget remplira les différentes ‘span’ en fonction de leur id.

Copy to Clipboard

Liste des ‘id’ disponibles qui permettront d’afficher la news en détail avec tous ses éléments constitutifs:

olifid_headline : titre de la news

olifid_versioncreated : date d’émission de la news

olifid_subheadline : sous-titre de la news (toutes les news n’ont pas forcément de sous-titre)

olifid_dateline : information complémentaire sur la date/lieu de la news (exemple: Toronto, le 4 Janvier 2021) (toutes les news n’ont pas forcément de dateline)

olifid_body_xhtml : c’est le corps de la news

olifid_copyrightnotice : copyright (il est obligatoire de l’afficher sous peine de suspension de la diffusion)

olifid_contact : contact de la société qui diffuse la news (toutes les news n’ont pas forcément de contact défini)

Copy to Clipboard