{ "@context": { "@version": 1.1, "dct": "http://purl.org/dc/terms/", "title": { "@id": "dct:title", "@container": "@language" }, "description": { "@id": "dct:description", "@container": "@language" }, "modified": "dct:modified" }, "title": { "en": "Social media channels", "fr": "Bloc des réseaux de médias sociaux" }, "description": { "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.", "fr": "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)." }, "modified": "2024-02-05", "componentName": "gc-follow-us", "status": "stable", "version": "2.1", "pages": { "docs": [ { "title": "Social media channels - Documentation", "language": "en", "path": "gc-follow-us-doc-en.html" }, { "title": "Bloc des réseaux de médias sociaux - Documentation", "language": "fr", "path": "gc-follow-us-doc-fr.html" } ], "examples": [ { "title": "Social media channels", "language": "en", "path": "gc-follow-us-en.html" }, { "title": "Bloc des réseaux de médias sociaux", "language": "fr", "path": "gc-follow-us-fr.html" } ] }, "a11yGuidance": "no accessibility guidance", "variations": [ { "name": { "en": "GC Follow us - default", "fr": "GC Suivez-nous - par défaut" }, "status": "stable", "description": { "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.", "fr": "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)." }, "guidance": { "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html", "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html" }, "iteration": "_:iteration_gc_follow_1", "example": [ { "en": { "href": "gc-follow-us-en.html", "text": "GC Follow us" }, "fr": { "href": "gc-follow-us-fr.html", "text": "GC Suivez-nous" } } ], "implementation": [ "_:implement_gc_follow" ], "history": [ { "en": "July 2024 - Adding 'More ways to connect' optional link.", "fr": "Juillet 2024 - Ajout du lien optionnel « D'autres moyens de rester en contact »." }, { "en": "February 2024 - Initial implementation of the variation.", "fr": "Février 2024 - Implémentation initiale de la variante." } ] }, { "name": { "en": "Follow us", "fr": "Suivez-nous" }, "status": "deprecated", "description": { "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.", "fr": "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)." }, "guidance": { "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html", "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html" }, "iteration": "_:iteration_follow_1", "example": [ { "en": { "href": "deprecated/follow-us-en.html", "text": "Follow us" }, "fr": { "href": "deprecated/follow-us-fr.html", "text": "Suivez-nous" } } ], "implementation": [ "_:implement_follow" ], "history": [ { "en": "September 2024 - This variant is now officially deprecated.", "fr": "Septembre 2024 - Cette variante est maintenant officiellement obsolète." }, { "en": "April 2017 - Initial implementation of the variation.", "fr": "Avril 2017 - Implémentation initiale de la variante." } ] } ], "implementation": [ { "@id": "_:implement_gc_follow", "iteration": "_:iteration_gc_follow_2", "name": { "en": "Standard", "fr": "Standard" }, "introduction": { "en": "This implementation is meant for developers/publishers adding the component manually.", "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." }, "instructions": { "en": [ "Refer to the below code sample.", "To display the icons horizontally, add the CSS class \"list-inline\" to the <ul>.", "If there is more than one account from a single platform, make them available via an overlay (popup).", "Information on how to display the 'More ways to connect' link will be available soon." ], "fr": [ "Référez-vous à l'exemple de code ci-dessous.", "Pour afficher les icônes horizontalement, ajoutez la classe CSS \"list-inline\" au <ul>.", "S’il y a plus d’un compte pour une même plateforme, énumérez-les dans un contenu superposé (popup).", "Des informations sur la façon d'afficher le lien « D'autres moyens de rester en contact » seront disponibles bientôt." ] }, "sample": { "en": [ { "@type": "source-code", "description": "Default layout code sample:", "code": "
\n\t

On social media

\n\t\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code pour disposition par défaut :", "code": "
\n\t

Dans les médias sociaux

\n\t\n
" } ] } }, { "@id": "_:implement_follow", "iteration": "_:iteration_follow_2", "name": { "en": "Standard", "fr": "Standard" }, "introduction": { "en": "This implementation is meant for developers/publishers adding the component manually.", "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." }, "instructions": { "en": [ "Refer to the below code sample." ], "fr": [ "Référez-vous à l'exemple de code ci-dessous." ] }, "sample": { "en": [ { "@type": "source-code", "description": "Code sample:", "code": "
\n\t

Follow:

\n\t\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", "code": "
\n\t

Suivez :

\n\t\n
" } ] } } ], "iteration": [ { "@id": "_:iteration_gc_follow_3", "name": "GC Follow us - Iteration 3", "date": "2024-07", "detectableBy": ".gc-followus", "additions": [ "New link for more ways to connect." ] }, { "@id": "_:iteration_gc_follow_2", "name": "GC Follow us - Iteration 2", "date": "2024-02", "detectableBy": ".gc-followus", "additions": [ "New SVG image for X logo (formerly known as Twitter)." ], "fixes": [ "Deprecated: SVG image for Twitter to be deprecated." ], "assets": [ { "@type": "source-code", "@language": "en", "description": "Code sample", "code": { "@type": [ "rdf:HTML", "@id" ], "@value": "includes/gc-follow-us.html" } } ] }, { "@id": "_:iteration_gc_follow_1", "name": "GC Follow us - Iteration 1", "date": "2021-08", "detectableBy": ".gc-followus" }, { "@id": "_:iteration_follow_2", "name": "Follow us - Iteration 2", "date": "2024-02", "detectableBy": ".followus", "additions": [ "New Base64 image for X logo (formerly known as Twitter).", "Added logic to dynamically replace \"Twitter\" with \"X\" in hidden text." ], "assets": [ { "@type": "source-code", "@language": "en", "description": "Code sample", "code": { "@type": [ "rdf:HTML", "@id" ], "@value": "includes/follow.html" } } ] }, { "@id": "_:iteration_follow_1", "name": "Follow us - Iteration 1", "date": "2017-04", "detectableBy": ".followus", "assets": [ { "@type": "source-code", "@language": "en", "description": "Code sample", "code": { "@type": [ "rdf:HTML", "@id" ], "@value": "includes/follow.html" } } ] } ], "changesets": [ { "@id": "_:cs_gc_follow", "name": "GC Follow us", "status": "stable", "baseOnIteration": "_:iteration_gc_follow_1", "detectableBy": ".gc-followus", "layout": [ "Default: the social media accounts are stacked vertically with each account having the logo on the left and name on the right.", "Inline: the social media accounts are listed horizontally with only the logo visible." ], "semantic": "section.gc-followus > h2 + (ul > li > a)", "static": [ "Dans les médias sociaux", "On social media" ], "schema": [ "FacebookAccountName", "FacebookAccountURL", "TwitterAccountName", "TwitterAccountURL", "YouTubeAccountName", "YouTubeAccountURL", "InstagramAccountName", "InstagramAccountURL", "LinkedInAccountName", "LinkedInAccountURL" ], "configuration": "isInline: if yes, add class \"list-inline\" to