Intégration du widget Olifid
Paramètres avancés
Widget ‘list’:
C’est le widget qui affiche la liste des news
Code à insérer :
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)
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 « inside-widget » 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 « inside-widget » 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.
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)
Comment afficher le détails des communiqués :
1) Les scripts ‘inside-widget’ : les communiqués s’afficheront sur la même page que le widget
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= »inside-widget »
Ce script n’est pas compatible avec les deux autres scripts ‘inside-widget’. Il faut en choisir un parmi les 3.
Script d’affichage en lightbox:
Voici le script qui permet d’affiche les communiqués en entier à l’intérieur d’une lightbox en surimpression.
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= »inside-widget »
Il ne faut pas oublier le CSS lié à la ‘feedmodal’ qui défini l’affichage de la lightbox, ici entre les balises ‘style’ .
Ce script n’est pas compatible avec les deux autres scripts ‘inside-widget’. Il faut en choisir un parmi les 3.
Script d’affichage dynamique dans une div sur la même page :
Voici le script qui permet d’affiche les communiqués en entier à l’intérieur d’une div sur la même page que le widget-list.
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= »inside-widget »
Ce script n’est pas compatible avec les deux autres scripts ‘inside-widget’. Il faut en choisir un parmi les 3.
2) Le script ‘page de destination’:
C’est le script qui permet l’affichage de l’intégralité d’un communiqué sur la page de destination définie précédemment
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.
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)