🆕 Partage - Share

Ce composant est disponible depuis la dernière version (1.1.0).
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !


Les boutons de partage permettent aux utilisateurs de partager facilement un contenu qu’il consulte à d’autres utilisateur.

 

 

Structure

Les composant permet à l’utilisateur de partager facilement un contenu via :

  • des boutons de partages sur les réseaux sociaux

  • les métadonnées nécessaires au bon fonctionnement du partage sur les réseaux sociaux.

  • un bouton d’envoie par mail.

  • un bouton pour copier le lien du contenu dans le presse papier

Les boutons sont des boutons icône seules.

Le composant existe en deux versions, une version par défaut et une seconde version lorsque les cookies ne sont pas activés.

Partage par défaut

Le composant boutons de partage est composé de :

  • un texte « Partager la page : »

  • de bouton(s) de partage sur les reseaux sociaux (Facebook et/ou Twitter et/ou Linked et/ou Instagram et/ou autre) ,

  • un bouton envoi par mail, optionnel

  • un bouton pour copier le lien, obligatoire

Il est recommandé de ne pas dépasser 5 boutons (3 boutons pour les réseaux sociaux, et les deux boutons de partage), afin que le composant reste sur une ligne.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="fr-share"> <p class="fr-share__title">Partager la page</p> <ul class="fr-share__group"> <li> <a class="fr-share__link fr-share__link--facebook" title="Partager sur Facebook - ouvre une nouvelle fenêtre" href="https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]" target="_blank" rel="noopener" onclick="window.open(this.href,'Partager sur Facebook','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450'); event.preventDefault();">Partager sur Facebook</a> </li> <li> <!-- Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js) --> <a class="fr-share__link fr-share__link--twitter" title="Partager sur Twitter - ouvre une nouvelle fenêtre" href="https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]" target="_blank" rel="noopener" onclick="window.open(this.href,'Partager sur Twitter','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420'); event.preventDefault();">Partager sur Twitter</a> </li> <li> <a class="fr-share__link fr-share__link--linkedin" title="Partager sur LinkedIn - ouvre une nouvelle fenêtre" href="https://www.linkedin.com/shareArticle?url=[À MODIFIER - url de la page]&title=[À MODIFIER - titre ou texte descriptif de la page]" target="_blank" rel="noopener" onclick="window.open(this.href,'Partager sur LinkedIn','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=550,height=550'); event.preventDefault();">Partager sur LinkedIn</a> </li> <li> <a class="fr-share__link fr-share__link--mail" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" title="Partager par email" target="_blank">Partager par email</a> </li> <li> <button class="fr-share__link fr-share__link--copy" title="Copier dans le presse-papier" onclick="navigator.clipboard.writeText(window.location);alert('Adresse copiée dans le presse papier.');">Copier dans le presse-papier</button> </li> </ul> </div>

N’hésitez pas à nous contacter si vous avez besoin d’ajouter d’autres boutons de réseaux sociaux.


Partager par email

Le bouton de partage par mail est un lien ‘mail to’ ouvrant le logiciel de messagerie installé sur le poste de l’utilisateur (comportement par défaut).
Vous pouvez si vous le souhaitez modifier son comportement afin qu’il colle avec votre infrastructure (envoi de mail via un formulaire, etc.) .
Veillez alors à utiliser la balise adéquate (<a> si c’est un lien ou <button> pour l’ouverture d’une modale ou autre interaction ).

Boutons de partage en version inactive

Le code d’intégration des boutons de partage proposé ici sont de simples liens externes vers les services de partage.

Si vous souhaitez utiliser les différentes intégrations (javascript) proposées par les différents réseaux sociaux, vous devrez très probablement les intégrer à votre gestionnaire de consentement afin de que l’utilisateur puisse accepter ou non les cookies déposés.
Par défaut, les services doivent être désactivés, les boutons sont donc passés en inactifs et une mention d’information s’affiche pour rediriger vers la modale de consentement.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="fr-share"> <p class="fr-share__title">Partager la page</p> <ul class="fr-share__group"> <li> <a class="fr-share__link fr-share__link--facebook" title="Partager sur Facebook - désactivé">Partager sur Facebook</a> </li> <li> <a class="fr-share__link fr-share__link--twitter" title="Partager sur Twitter - désactivé">Partager sur Twitter</a> </li> <li> <a class="fr-share__link fr-share__link--linkedin" title="Partager sur LinkedIn - désactivé">Partager sur LinkedIn</a> </li> <li> <a class="fr-share__link fr-share__link--mail" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" title="Partager par email" target="_blank">Partager par email</a> </li> <li> <button class="fr-share__link fr-share__link--copy" title="Copier dans le presse-papier" onclick="navigator.clipboard.writeText(window.location);alert('Adresse copiée dans le presse papier.');">Copier dans le presse-papier</button> </li> </ul> <p class="fr-share__text">Veuillez <a href=[À MODIFIER - url page autorisation cookies]>autoriser le dépôt de cookies</a> pour partager sur Facebook, Twitter et LinkedIn.</p> </div>

Méta données

Les meta données à placer dans la balise head pour gérer les informations de partage sur les réseaux sociaux.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!-- Balises meta Open Graph --> <meta property="og:title" content="[À MODIFIER | Système de Design de l&#39;État]"> <meta property="og:description" content="[À MODIFIER | Développer vos sites et applications en utilisant des composants prêts à l&#39;emploi, accessibles et ergonomiques]"> <meta property="og:image" content="[À MODIFIER | https://systeme-de-design.gouv.fr/src/img/systeme-de-design.gouv.fr.jpg]"> <meta property="og:type" content="website"> <meta property="og:url" content="[À MODIFIER | https://systeme-de-design.gouv.fr/]"> <meta property="og:site_name" content="[À MODIFIER | Site officiel du Système de Design de l&#39;État]"> <meta property="og:image:alt" content="[À MODIFIER | République Française - Système de Design de l&#39;État]"> <!-- Balise méta pour twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="[À MODIFIER | @usernameTwitter]"> <meta name="twitter:image:alt" content="[À MODIFIER | République Française - Système de Design de l&#39;État]">

Nom

Plateforme

Fonction

Format

Nom

Plateforme

Fonction

Format

og:title

Open Graph / Facebook

Titre de la page ( Utiliser le titre, ne pas inclure la marque )

Chaîne de caractère

og:description

Open Graph / Facebook

Brève description du contenu

Chaîne de caractère

og:image

Open Graph / Facebook

URL de l’image

Image jpg , tiff,
1024x1024

og:url

Open Graph / Facebook

URL du contenu

Chaîne de caractère

og:type

Open Graph / Facebook

Type de contenu

Chaîne de caractère  de type article, website, etc.
Voir la liste des types sur le site OGP (en anglais)

og:site_name

Open Graph / Facebook

Nom du site (marque)

Chaîne de caractère

og:locale

Open Graph / Facebook

Langue de contenu

Chaîne de caractère de type “fr_FR” , “en_US”, etc.

og:image:alt

Open Graph / Facebook

texte alternatif de l’image

Chaîne de caractère

twitter:card

Twitter

Type de card twitter (si pas de type : mode)

summary ou summary_large_image

twitter:site

Twitter

Le @username du site sur twitter

Chaîne de caractère: @nomDuCompteTwitter

twitter:image:alt

Twitter

texte alternatif de l’image pour twitter

Chaîne de caractère


Règles d’utilisation

Usages

Le composant peut être placé en haut ou en bas de page.

Accessibilité

Ajouter les alt-méta tags og:image:alt et twitter:image:alt pour l’accessibilité

1 2 <meta property="og:image:alt" content="Add your alternative text here" /> <meta name="twitter:image:alt" content="Add your alternative text here">

Ressources utiles

Vous trouverez ci-dessous des liens afin de tester et prévisualiser l’apparence des partages dans différents réseaux sociaux:

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :