Les boutons de partage permettent aux utilisateurs de partager facilement un contenu, via les réseaux sociaux, par envoi de mail ou en copiant l’URL du contenu dans le presse-papier.
Documentation<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="[À MODIFIER - @usernameTwitter]">
<meta property="og:title" content="[À MODIFIER - Système de Design de l'État]">
<meta property="og:description" content="[À MODIFIER - Développer vos sites et applications en utilisant des composants prêts à l'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'État]">
<meta property="og:image:alt" content="[À MODIFIER - République Française - Système de Design de l'État]">
<meta name="twitter:image:alt" content="[À MODIFIER - République Française - Système de Design de l'État]">
Partager la page
<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--linkedin 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>
Partager la page
Veuillez autoriser le dépôt de cookies pour partager sur Facebook, Twitter et LinkedIn.
<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--linkedin 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>
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
Partager la page
<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 - 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 - 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 - 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>
Partager la page
Veuillez autoriser le dépôt de cookies pour partager sur Facebook, Twitter et LinkedIn.
<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-share__group">
<li>
<a class="fr-share__link fr-share__link--facebook" title="Partager sur Facebook - désactivé" aria-disabled="true" role="link">Partager sur Facebook</a>
</li>
<li>
<a class="fr-share__link fr-share__link--twitter" title="Partager sur Twitter - désactivé" aria-disabled="true" role="link">Partager sur Twitter</a>
</li>
<li>
<a class="fr-share__link fr-share__link--linkedin" title="Partager sur LinkedIn - désactivé" aria-disabled="true" role="link">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>