Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Social Share

The Social Share Component is a custom AARP component designed to enable authors to add social share icons to an AEM page. 

Editor to Copy/Paste
Training
Figma Design

Default Style

Why is this black? When nothing is selected it should be their brand colors. For specialized media sites, they use the same token but in their theme.

'UXDIA Body Theme' Selected

Lorem ipsum dolar sit amet consectetur.

'UXDIA Footer Theme' Selected

Line icons are deprecated. Use new fill styles.

'Horizontal Marquee' + 'UXDIA Body Theme'

Why is this spacing different from above?

Training

The Social Share Component allows an author to add the Social Share button icons to their AEM pages to allow a user to share the following:

  • Article Pages
  • Events
  • Promotional Marketing Landing Pages

Training Video

6:23

Authoring Capability

  • Facebook (checkbox) - This checkbox will turn on the Facebook Social Share icon and it will appear on your page.

  • Facebook Analytics ID - This field is where the data-form--element ID or click tracking code is placed.

  • Facebook Path - The actual Facebook path. (This is not required. Only use if you don’t want the Facebook share URL pop-up to appear.

  • Twitter or X (checkbox) - This checkbox will turn on the X Social Share icon and it will appear on your page.

  • Twitter or X Analytics ID - This field is where the data-form--element ID or click tracking code is placed.

  • Twitter or X Path - The actual X path. (This is not required. Only use if you don’t want the X share URL pop-up to appear.

  • LinkedIn (checkbox) - This checkbox will turn on the LinkedIn Social Share icon and it will appear on your page.

  • LinkedIn Analytics ID - This field is where the data-form--element ID or click tracking code is placed.

  • LinkedIn Path - The actual LinkedIn path. (This is not required. Only use if you don’t want the LinkedIn share URL pop-up to appear.

  • Pinterest (checkbox) - This checkbox will turn on the Pinterest Social Share icon and it will appear on your page.

  • Pinterest Analytics ID - This field is where the data-form--element ID or click tracking code is placed.

  • Pinterest Path - The actual Pinterest path. (This is not required. Only use if you don’t want the Pinterest share URL pop-up to appear.

  • UXDIA Footer Theme - This is the displayed view for the AARP footer. (it only works while being within a container with a black or dark background color used.)

  • UXDIA Body Theme - This is Vertical view of the social share buttons, which is commonly used on article pages.

  • UXDIA Sticky - Makes the social share buttons sticky and don’t disappear when user scrolls the page. It is rarely used.

  • Display Overlay message - Select if you wish to display an overlay message. (Only required if social paths are used.)

  • Overlay Message - This is the message that appears in the overlay pop-up. It us usually used to say. “You are now leaving AARP.org.”