Partage - Share

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

1 Structure
2 Partage par défaut
- 2.1 Partager par email
3 Boutons et liens de partage en version inactive
4 Méta données
5 Règles d’utilisation
- 5.1 Usages
- 5.2 Accessibilité
- 5.3 Ressources utiles
- 5.4 Besoin d’aide ?

Structure

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

des liens de partages sur les ré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 et les liens sont des boutons et liens icônes 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 partage est composé de :

un texte « Partager la page : »
de lien(s) et de bouton(s) de partage sur les réseaux 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 éléments (3 liens pour les réseaux sociaux et les deux boutons de partage), afin que le composant reste sur une ligne.

<div class="fr-share">
    <p class="fr-share__title">Partager la page</p>
    <ul class="fr-btns-group">
        <li>
            <a class="fr-btn--facebook fr-btn" 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();" href="https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]" target="_blank" rel="noopener">
                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-btn--twitter fr-btn" 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();" 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">
                Partager sur Twitter
            </a>
        </li>
        <li>
            <a class="fr-btn--facebook fr-btn" 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();" 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">
                Partager sur LinkedIn
            </a>
        </li>
        <li>
            <a class="fr-btn--mail fr-btn" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" target="_blank">
                Partager par email
            </a>
        </li>
        <li>
            <button class="fr-btn--copy fr-btn" 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 et liens de partage en version inactive

Le code d’intégration des boutons et liens 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.

<div class="fr-share">
    <p class="fr-share__title">Partager la page</p>
    <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>
    <ul class="fr-btns-group">
        <li>
            <a class="fr-btn--facebook fr-btn" aria-disabled="true" role="link">
                Partager sur Facebook
            </a>
        </li>
        <li>
            <a class="fr-btn--twitter fr-btn" aria-disabled="true" role="link">
                Partager sur Twitter
            </a>
        </li>
        <li>
            <a class="fr-btn--facebook fr-btn" aria-disabled="true" role="link">
                Partager sur LinkedIn
            </a>
        </li>
        <li>
            <a class="fr-btn--mail fr-btn" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" target="_blank">
                Partager par email
            </a>
        </li>
        <li>
            <button class="fr-btn--copy fr-btn" onclick="navigator.clipboard.writeText(window.location);alert('Adresse copiée dans le presse papier.');">
                Copier dans le presse-papier
            </button>
        </li>
    </ul>
</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.

<!-- 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é

Les liens désactivés n’ont pas d’attribut href, et possèdent les attributs aria-disabled="true" role="link"

Ressources utiles

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

Open Graph Check
Facebook Sharing Debugger
Twitter Sharing debugger
LinkedIn Post Inspector

Besoin d’aide ?

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

la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !
le centre de support pour envoyer vos demandes de correctifs et d'évolution.