Chaînes de médias sociaux: Système de conception de Canada.ca
Dernière mise à jour : 2024-04-03
La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC).
Sur cette page
Quand l’utiliser
Utilisez la configuration de conception des chaînes de médias sociaux sur les pages afin de promouvoir les comptes de médias sociaux officiels du gouvernement du Canada (GC) qui sont pertinents par rapport à la page.
Exemples :
- Page d’accueil institutionnelle
- Blogue
- Page de sujet
Quoi éviter
N’utilisez pas la configuration de conception des chaînes de médias sociaux lorsque le flux d’un utilisateur ne doit pas être interrompu, par exemple pendant un processus transactionnel.
Contenu et conception
Trouvez des spécifications de contenu et de conception et des exemples visuels.
Spécifications de contenu
La configuration de conception des chaînes de médias sociaux est composée du titre « Sur les médias sociaux » et d’icônes renvoyant aux comptes de médias sociaux officiels du gouvernement du Canada.
Les comptes mentionnés dans la configuration de conception doivent être entièrement conformes à la Directive sur la gestion des communications.
Afficher un maximum de sept (7) icônes alignées dans une colonne verticale ou une rangée horizontale :
- L’affichage vertical comprend une étiquette à côté de chaque icône.
- L’affichage horizontal ne comprend que les icônes.
S’il y a plus d’un compte pour une plateforme :
- Indiquez le nom de la plateforme à côté de son icône (affichage vertical seulement).
- Utilisez une fenêtre contextuelle modale pour afficher le nom de chaque compte sur cette plateforme.
- La fenêtre contextuelle modale peut avoir jusqu’à huit (8) liens de texte.
- Utilisez les noms des comptes en tant qu’étiquettes.
Placez les chaînes de médias sociaux après la tâche et le contenu de navigation.
Spécifications de conception
- Spécifications de conception de la fenêtre contextuelle modale
- Couleur de fond de l’en-tête modal : #2e5274
- Titre : H2, Lato, le style de la taille de police est de 1.15 em
- Liens :
- Police : Noto Sans, 16 px, couleurs de lien standards
- Le style du bouton est celui d’un bouton principal.
Les classes de lien pour les médias sociaux et les icônes associés sont disponibles.
Communiquez avec le Bureau de la transformation numérique (BTN) si vous voulez inclure une plateforme qui n’est pas représentée ici.
Exemples visuels
Description de l’image : chaîne de médias sociaux (affichage horizontal) - grand écran
Les liens vers les chaînes de médias sociaux apparaissent avec le titre « Sur les médias sociaux ». On trouve sous le titre une liste verticale avec les icônes et les étiquettes associées :
- Icône de Facebook suivie du texte de l’espace réservé NomPageFacebook
- Icône de X suivie du texte de l’espace réservé @CompteX
- Icône de YouTube suivie du texte de l’espace réservé NomYouTube
- Icône d’Instagram suivie du texte de l’espace réservé NomInstagram
- Icône de LinkedIn suivie du texte de l’espace réservé NomLinkedIn
Description de l’image : chaîne de médias sociaux (affichage horizontal) - grand écran
Les liens vers les chaînes de médias sociaux apparaissent avec le titre « Sur les médias sociaux ». On trouve sous le titre une liste horizontale avec les icônes associées, mais sans les étiquettes :
- X
- Youtube
Description de l’image : chaînes de médias sociaux (affichage vertical avec étiquettes) - petit écran
Les liens vers les chaînes de médias sociaux apparaissent avec le titre « Sur les médias sociaux ». Les liens sont organisés dans une liste à puces avec les icônes et les étiquettes associées :
- Icône de Facebook suivie du texte de l’espace réservé NomPageFacebook
- Icône de X suivie du texte de l’espace réservé @CompteX
- Icône de YouTube suivie du texte de l’espace réservé NomYouTube
- Icône d’Instagram suivie du texte de l’espace réservé NomInstagram
- Icône de LinkedIn suivie du texte de l’espace réservé NomLinkedIn
Description de l’image : fenêtre contextuelle modale de médias sociaux pour comptes multiples
Une fenêtre contextuelle superposée pour afficher de multiples comptes Facebook. Un titre indique la plateforme de médias sociaux, tandis que deux liens intitulés [Titre du premier compte Facebook] et [Titre du deuxième compte Facebook] se trouvent en dessous. La fenêtre modale est dotée d’un bouton de fermeture et d’un X dans le coin pour fermer la composante modale.
Comment procéder à la mise en œuvre
Trouvez des exemples pratiques et de code pour mettre en œuvre la configuration de conception des chaînes de médias sociaux.
Référence pour la mise en œuvre du thème GCWeb (BOEW)
La référence à l’implémentation comprend la façon de configurer chaque élément du système de conception.
Mises en œuvre
Déterminez ce qui convient le mieux au type de page que vous créez.
GC-AEM
Pour Adobe Experience Manager (AEM) du gouvernement du Canada (GC) :
Recherche et justification
Consultez la justification stratégique.
Justification stratégique
Le contenu de la section des chaînes de médias sociaux doit suivre la Directive sur la gestion des communications.
Cette configuration de conception est facultative pour les modèles obligatoires suivants :
Derniers changements
- Mise à jour de l’orientation pour y inclure les spécifications de contenu et de conception, des exemples visuels et une orientation sur la mise en œuvre.
Détails de la page
- Date de modification :