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 « 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.

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

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.

VOIR L’EXEMPLE

Copy to Clipboard

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.

VOIR L’EXEMPLE ICI ou L’EXEMPLE ICI

Copy to Clipboard

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.

VOIR L’EXEMPLE ICI

Copy to Clipboard

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

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)

VOIR L’EXEMPLE ICI

Copy to Clipboard