Social Media component

Design options

The Social Media component features different options for icon size, icon and title colours, as well as options for title placement and alignment.

Content tab

Setting the social media links

• Click Add Item.
• Select a Type of social media.
• Enter an absolute Link to the social media account.
• Click the red circle to cancel the item.
• Cick the green up or down arrow to change the order of the accounts that will be displayed.

Guidelines

The Social Media component is an accessibility-compliant turnkey solution for displaying social media links with a uniform look and feel on all AEM web pages.

This component is often added to the sidebar region (on pages using the Right sidebar template) or in the footer — either the grey footer or the burgundy footer (in the case of custom footers for the latter). It can also be applied anywhere within the Body of an AEM page.

Accessibility

The icons included with the Social Media component have Alt text for the images already built in so they comply with accessibility standards.

Examples & use cases

Example 1

Default settings

Example 3

Multi-coloured icons

Helpful tips & "gotchas"

• Even though clicking the magnifying glass beside the Link field allows you to select paths within AEM, this field is meant to hold an external link to a social media account; ignore the magnifying glass and simply paste in an absolute link.
• To display the same set of social media links across multiple web pages (e.g., in the footer), place the Social Media component inside a Box component; then use the Reference component on other pages to mirror the Box and all its contents.

Training

The Social Media component is not covered in the AEM training sessions but may be addressed upon request. AEM authors are also advised to contact the Social Media team for guidance if they would like to use it.