Skip to content

Social follow

The Social Follow component displays a collection of social media channels and store badges. Social media channels are rendered as icon buttons, while store badges use platform badge styles.

  • CSS

Maintained by Platform

    Ready to use

    CSS

    Description

    Section titled “Description”

    The Social Follow component displays a collection of social media channels and store badges. Social media channels are rendered as icon buttons, while store badges use platform badge styles.

    React

    Section titled “React”

    Import the SocialFollow component from @tmedxp/aem-react-components.

    If both socialFollowItems and storeBadges are empty, the component does not render.

    Properties

    Section titled “Properties”
    Prop Type Description Required
    socialFollowItems SocialFollowItem[] Collection of social media channels to display.
    storeBadges StoreBadge[] Collection of store badges to display.
    id string Unique identifier applied to the root element.

    SocialFollowItem properties

    Section titled “SocialFollowItem properties”
    Prop Type Description Required
    link string Destination URL for the social media channel. Opens in a new tab. ✅
    label string | null Label used for the link title and accessible name. If not provided, the channel type is used.
    type SocialFollowType Social media platform to display. ✅

    SocialFollowType

    Section titled “SocialFollowType”
    type SocialFollowType =
      'TikTok' | 'Youtube' | 'Facebook' | 'X' | 'LinkedIn' | 'Instagram';

    StoreBadge properties

    Section titled “StoreBadge properties”
    Prop Type Description Required
    link string Destination URL for the social media channel. Opens in a new tab. ✅
    label string | null Label used for the link title and accessible name. If not provided, the channel type is used.
    type SocialFollowType Social media platform to display. ✅

    StoreBadgeType

    Section titled “StoreBadgeType”
    type StoreBadgeType =
      'app-store' | 'google-play' | 'spotify' | 'apple-podcasts';

    Example

    Section titled “Example”
    import { SocialFollow } from '@tmedxp/aem-react-components';
    

    const SocialFollowExample = () => {
      return (
        <SocialFollow
          socialFollowItems={[
            {
              type: 'Facebook',
              link: 'https://www.facebook.com/toyota',
              label: 'Follow us on Facebook',
            },
            {
              type: 'Instagram',
              link: 'https://www.instagram.com/toyota',
              label: 'Follow us on Instagram',
            },
          ]}
          storeBadges={[
            {
              type: 'app-store',
              link: 'https://apps.apple.com',
              label: 'Download on the App Store',
            },
            {
              type: 'google-play',
              link: 'https://play.google.com/store',
              label: 'Get it on Google Play',
            },
          ]}
        />
      );
    };
    

    export { SocialFollowExample };