Social buttons (Boutons sociaux)

Le composant Boutons sociaux a pour objectif d’afficher plusieurs réseaux sociaux couramment utilisés, ou d’autres types de mise en relation (RSS, email…), facilitant ainsi la navigation des utilisateurs vers les profils sociaux associés (ou ces autres possibilités d’échanges).

Usage

Le composant Boutons sociaux peut être utilisé dans diverses situations pour améliorer l’expérience utilisateur. Voici quelques exemples d’utilisation :

Affichage des liens vers les profils sociaux d’une personne ou d’une organisation.
Intégration dans un pied de page pour permettre aux utilisateurs de suivre une entité sur plusieurs plateformes sociales.
Création de boutons de partage pour faciliter le partage de contenu sur des réseaux sociaux spécifiques.
Bouton de consultation de flux RSS.
…

Bonnes pratiques

Utilisation cohérente : assurez-vous d’utiliser les variantes du composant de manière cohérente sur l’ensemble de votre application ou site web pour maintenir une apparence uniforme.
Contraste : assurez-vous que les icônes et les couleurs de fond sont suffisamment contrastées pour garantir une bonne lisibilité, notamment pour les utilisateurs atteints de déficience visuelle.
Accessibilité : veillez à ce que le composant soit accessible aux utilisateurs malvoyants en utilisant des attributs d’accessibilité appropriés et en fournissant des descriptions textuelles alternatives.
Liens pertinents : assurez-vous que les liens vers les profils sociaux soient à jour et renvoient aux pages officielles correspondantes.

Style & code

Dépendances :

classe sipaui sur un parent (par exemple le <body>).

Ce composant est une suite de liens vers les différents réseaux ou d’autres services relationnels (applications mobiles, flux RSS…). Il se construit donc naturellement avec un <a>. Mais il peut être utile de l’avoir en <button> pour mieux le contrôler en JS. Il sera donc possible de le construire avec les 2 méthodes…

Il existe aussi 2 versions visuellement : une simple (juste l’icône, en noire ou blanche en fonction de l’arrière-plan) et une avec un fond de couleur derrière lui conférant un aspect de bouton.

Version simple

La version simple se construit avec la classe su-social-button que l’on pose sur le <a> ou le <button> et un <span> pour l’icône issue de la fonte d’icônes de SipaUI. Puisqu’il s’agit d’un lien sortant (vers un autre domaine), vous pouvez utiliser un target="_blank" pour ouvrir un nouvel onglet si vous le souhaitez.

<a class="su-social-button" target="_blank" href="javascript:;" title="Rejoignez Ouest-France sur Facebook" >
    <span class="su-icon">Facebook</span>
</a>
<button class="su-social-button" title="Rejoignez Ouest-France sur Facebook" >
    <span class="su-icon">Facebook</span>
</button>

Sur fond sombre

Il est possible de le passer en blanc avec la classe su-negative sur l’élément lui-même ou sur un parent.

<div style="background: DimGray; padding: 10px">
    <a class="su-social-button su-negative" target="_blank" href="javascript:;" title="Rejoignez Ouest-France sur X" >
        <span class="su-icon">X.</span>
    </a>
    <button class="su-social-button su-negative" title="Rejoignez Ouest-France sur X" >
        <span class="su-icon">X.</span>
    </button>
</div>

Version avec fond

Pour une version avec fond, il suffit d’ajouter une classe su-y où « y » est le nom du réseau social ou du « service relationnel ».

<a class="su-social-button su-instagram" target="_blank" href="javascript:;/" title="Partager sur Instagram" >
    <span class="su-icon">Instagram</span>
</a>
<button class="su-social-button su-instagram" href="javascript:;" title="Partager sur Instagram" >
    <span class="su-icon">Instagram</span>
</button>

Version avec fond et nom

Si vous voulez aussi afficher un intitulé à côté de l’élément, ajoutez un <span> avec le texte désiré et un attribut aria-hidden="true" sur le 1^er <span> contenant le visuel pour éviter la redondance de texte pour les lecteurs d’écran (accessibilité).

<a class="su-social-button su-flipboard" target="_blank" href="javascript:;" title="Partager sur Flipboard" >
    <span class="su-icon" aria-hidden="true">Flipboard</span>
    <span>Flipboard</span>
</a>
<button class="su-social-button su-flipboard" title="Partager sur Flipboard" >
    <span class="su-icon" aria-hidden="true">Flipboard</span>
    <span>Flipboard</span>
</button>

Catalogue des boutons disponibles

N. B. – Notez la particularité pour « X » qui nécessite un . après le X pour l’icône, étant donné l’impossiblité de faire une ligature avec une seule lettre…

<ul>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" target="_blank" href="javascript:;" title="Rejoignez Ouest-France sur Facebook" >
            <span class="su-icon">Facebook</span>
        </a>
        <a class="su-social-button su-facebook" href="javascript:;" title="Partager sur Facebook" >
            <span class="su-icon">Facebook</span>
        </a>
        <a class="su-social-button su-facebook" href="javascript:;" title="Partager sur Facebook" >
            <span class="su-icon" aria-hidden="true">Facebook</span>
            <span>Facebook</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Partager sur X" >
            <span class="su-icon">X.</span>
        </a>
        <a class="su-social-button su-x" href="javascript:;" title="Partager sur X" >
            <span class="su-icon">X.</span>
        </a>
        <a class="su-social-button su-x" href="javascript:;" title="Partager sur X" >
            <span class="su-icon" aria-hidden="true">X.</span>
            <span>X</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Partager sur Instagram" >
            <span class="su-icon">Instagram</span>
        </a>
        <a class="su-social-button su-instagram" href="javascript:;" title="Partager sur Instagram" >
            <span class="su-icon">Instagram</span>
        </a>
        <a class="su-social-button su-instagram" href="javascript:;" title="Partager sur Instagram" >
            <span class="su-icon" aria-hidden="true">Instagram</span>
            <span>Instagram</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Partager sur Flipboard" >
            <span class="su-icon">Flipboard</span>
        </a>
        <a class="su-social-button su-flipboard" href="javascript:;" title="Partager sur Flipboard" >
            <span class="su-icon">Flipboard</span>
        </a>
        <a class="su-social-button su-flipboard" href="javascript:;" title="Partager sur Flipboard" >
            <span class="su-icon" aria-hidden="true">Flipboard</span>
            <span>Flipboard</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Partager sur Linkedin" >
            <span class="su-icon">Linkedin</span>
        </a>
        <a class="su-social-button su-linkedin" href="javascript:;" title="Partager sur Linkedin" >
            <span class="su-icon">Linkedin</span>
        </a>
        <a class="su-social-button su-linkedin" href="javascript:;" title="Partager sur Linkedin" >
            <span class="su-icon" aria-hidden="true">Linkedin</span>
            <span>Linkedin</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Rejoignez Ouest-France en RSS" >
            <span class="su-icon">RSS</span>
        </a>
        <a class="su-social-button su-rss" href="javascript:;" title="Rejoignez Ouest-France en RSS" >
            <span class="su-icon">RSS</span>
        </a>
        <a class="su-social-button su-rss" href="javascript:;" title="Rejoignez Ouest-France en RSS" >
            <span class="su-icon" aria-hidden="true">RSS</span>
            <span>RSS</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px; margin-bottom: 20px">
        <a class="su-social-button" href="javascript:;" title="Téléchargez les applications mobiles de Ouest-France" >
            <span class="su-icon">mobile</span>
        </a>
        <a class="su-social-button su-mobile-app" href="javascript:;" title="Téléchargez les applications mobiles de Ouest-France" >
            <span class="su-icon">mobile</span>
        </a>
        <a class="su-social-button su-mobile-app" href="javascript:;" title="Téléchargez les applications mobiles de Ouest-France" >
            <span class="su-icon" aria-hidden="true">mobile</span>
            <span>Nos apps mobiles</span>
        </a>
    </li>
    <li style="display: flex; gap: 10px;">
        <a class="su-social-button" href="javascript:;" title="Écrivez-nous" >
            <span class="su-icon">mail</span>
        </a>
        <a class="su-social-button su-mail" href="javascript:;" title="Écrivez-nous" >
            <span class="su-icon">mail</span>
        </a>
        <a class="su-social-button su-mail" href="javascript:;" title="Écrivez-nous" >
            <span class="su-icon" aria-hidden="true">mail</span>
            <span>Écrivez-nous</span>
        </a>
    </li>
</ul>

Liste des classes disponibles

su-social-button
su-facebook
su-x
su-instagram
su-flipboard
su-linkedin
su-rss
su-mobile-app
su-mail
su-negative