Sélection de la langue

Recherche


Chaînes de médias sociaux: Conception de Canada.ca

Dernière mise à jour : 2024-09-24

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 :

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 « Dans 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 cinq (5) icônes alignées dans une colonne verticale ou une rangée horizontale :

Lien optionnel

Vous pouvez ajouter un lien intitulé « D’autres moyens de rester en contact » si vous souhaitez créer un lien vers d’autres comptes de médias sociaux ou d’autres plateformes de communication ministérielles (p. ex., balados, magazines externes, etc.). Le lien doit mener vers une page qui répertorie tous vos comptes de médias sociaux et les autres moyens de communiquer avec le ministère ou de le suivre.

S’il y a plus d’un compte pour une plateforme :

Placez les chaînes de médias sociaux après la tâche et le contenu de navigation.

Spécifications de conception

Les classes de lien pour les médias sociaux et les icônes associés sont disponibles.

Classes des liens des médias sociaux et les icones associés
Plateforme de médias sociaux Classe CSS Lien vers le fichier SVG (GitHub)
Facebook

facebook

X

twitter

YouTube

youtube

Instagram instagram
LinkedIn

linkedin

Exemples visuels

Chaînes de médias sociaux (affichage vertical avec étiquettes) — grand écran
Chaînes de médias sociaux (affichage vertical avec étiquettes) pour les grands écrans. Version texte ci-dessous :
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 « Dans les médias sociaux  ». On trouve sous le titre une liste horizontale 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
Chaînes de médias sociaux (affichage vertical avec étiquettes) — grand écran
Chaînes de médias sociaux (affichage vertical avec étiquettes) pour les grands écrans. Version texte ci-dessous :
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 « Dans les médias sociaux  ». On trouve sous le titre une liste horizontale avec les icônes associées, mais sans les étiquettes :

  • Facebook
  • X
  • Youtube
  • Instagram
  • LinkedIn
Chaînes de médias sociaux (affichage verticale avec étiquettes et lien « D’autres moyens de rester en contact ») – petit écran
Chaînes de médias sociaux (affichage verticale avec étiquettes et lien « D’autres moyens de rester en contact ») pour les petits écrans. Version texte ci-dessous :
Description de l’image : chaînes de médias sociaux (affichage verticale avec étiquettes et lien « D’autres moyens de rester en contact ») - petit écran

Les liens vers les chaînes de médias sociaux apparaissent avec le titre « Dans 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

Sous les icônes se trouve un lien intitulé : D’autres moyens de rester en contact

Chaînes de médias sociaux (affichage horizontale avec étiquettes et lien « D’autres moyens de rester en contact ») – petit écran
Chaînes de médias sociaux (affichage horizontale avec étiquettes et lien « D’autres moyens de rester en contact ») pour les petits écrans. Version texte ci-dessous :
Description de l’image : chaînes de médias sociaux (affichage horizontale avec étiquettes et lien « D’autres moyens de rester en contact ») - petit écran

Les liens vers les chaînes de médias sociaux apparaissent avec le titre « Dans 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
  • Icône de X
  • Icône de YouTube
  • Icône d’Instagram
  • Icône de LinkedIn

Sous les icônes se trouve un lien intitulé : D’autres moyens de rester en contact

Fenêtre contextuelle modale de médias sociaux pour comptes multiples
Fenêtre contextuelle modale de médias sociaux pour comptes multiples. Version texte ci-dessous :
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) :

SGDC

Pour la Solution de gabarits à déploiement centralisé (SGDC) :

Drupal WxT

Pour Drupal WxT :

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 la configuration pour y ajouter le lien optionnel « D’autres moyens de rester en contact ».
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 :