Skip to main content

Social

The social module is one of several buttons a user can click on to share a product with their social network.

Example

Social on a default theme

Best practices

Use on pages where it would benefit the user to like, share, send, pin, or otherwise inform their network about the product or topic they are interested in. For example, below product detail heroes or on pages where the user has purchased a product.

Do

  • When using in relation to a hero, include social buttons below the hero not inside the hero.
  • When possible, use counters along with social buttons to indicate that the product is popular.
  • Orient several social buttons horizontally instead of vertically stacked.

Don’t

  • The social module will only show a maximum of 4 social buttons at a time before a toggle appears. A maximum of 6 social icons are allowed.
  • Don’t place social buttons on light or dark-themed backgrounds, use only on default or alt-themed backgrounds.

Also known as

Social plug-in
Sharing links

Related

In-page navigation
Product detail page hero

Accessibility

For the social module, there are some accessibility requirements:

  • The <img> must have alt text describing the image itself
  • the <a> tag must have aria-label to describe what activating the link will accomplish. This aria-label will override the alt text and will be read by a screen reader.

Options

By default, social buttons will display according to their service provided html.

Social buttons must be positioned with one of the following layout options:

  • Vertical layout: Position vertically by adding class selector f-vertical.
  • Horizontal layout: Positioned horizontally by adding class selector f-horizontal.

Social buttons must designate one of two types:

  • Follow buttons: Switch to follow me buttons by adding class selector f-follow.
  • Share buttons: Switch to share buttons by adding class selector f-share.

Development

  • Schema definition: The social schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default horizontal

<div class="m-social f-horizontal" itemscope itemtype="http://schema.org/Organization">
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook.svg">
                    <img src="/images/components/social/facebook.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter.svg">
                    <img src="/images/components/social/twitter.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype.svg">
                    <img src="/images/components/social/skype.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin.svg">
                    <img src="/images/components/social/linkedin.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="true" data-js-toggle="false"></button>
</div>

Horizontal with overflow

<div class="m-social f-horizontal" itemscope itemtype="http://schema.org/Organization">
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook.svg">
                    <img src="/images/components/social/facebook.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter.svg">
                    <img src="/images/components/social/twitter.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype.svg">
                    <img src="/images/components/social/skype.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin.svg">
                    <img src="/images/components/social/linkedin.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share with RSS " href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/rss.svg">
                    <img src="/images/components/social/rss.png" alt="RSS icon">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Instagram" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/instagram.svg">
                    <img src="/images/components/social/instagram.png" alt="Instagram logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="false" data-js-toggle="false"></button>
</div>

Default vertical

<div class="m-social f-vertical" itemscope itemtype="http://schema.org/Organization">
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook.svg">
                    <img src="/images/components/social/facebook.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter.svg">
                    <img src="/images/components/social/twitter.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype.svg">
                    <img src="/images/components/social/skype.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin.svg">
                    <img src="/images/components/social/linkedin.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="true" data-js-toggle="false"></button>
</div>

Vertical with overflow

<div class="m-social f-vertical" itemscope itemtype="http://schema.org/Organization">
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Vimeo" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/vimeo.svg">
                    <img src="/images/components/social/vimeo.png" alt="Vimeo logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Pinterest" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/pinterest.svg">
                    <img src="/images/components/social/pinterest.png" alt="Pinterest logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Tumblr" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/tumblr.svg">
                    <img src="/images/components/social/tumblr.png" alt="Tumblr logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin.svg">
                    <img src="/images/components/social/linkedin.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share with RSS" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/rss.svg">
                    <img src="/images/components/social/rss.png" alt="RSS icon">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Instagram" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/instagram.svg">
                    <img src="/images/components/social/instagram.png" alt="Instagram logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="false" data-js-toggle="false"></button>
</div>

Horizontal with share

<div class="m-social f-horizontal f-share" itemscope itemtype="http://schema.org/Organization">
    <span>Share this page</span>
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook-gray.svg">
                    <img src="/images/components/social/facebook-gray.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter-gray.svg">
                    <img src="/images/components/social/twitter-gray.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype-gray.svg">
                    <img src="/images/components/social/skype-gray.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin-gray.svg">
                    <img src="/images/components/social/linkedin-gray.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="true" data-js-toggle="false"></button>
</div>

Horizontal with share and overflow

<div class="m-social f-horizontal f-share" itemscope itemtype="http://schema.org/Organization">
    <span>Share this page</span>
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook-gray.svg">
                    <img src="/images/components/social/facebook-gray.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter-gray.svg">
                    <img src="/images/components/social/twitter-gray.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype-gray.svg">
                    <img src="/images/components/social/skype-gray.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin-gray.svg">
                    <img src="/images/components/social/linkedin-gray.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Pinterest" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/pinterest-gray.svg">
                    <img src="/images/components/social/pinterest-gray.png" alt="Pinterest logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Vimeo" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/vimeo-gray.svg">
                    <img src="/images/components/social/vimeo-gray.png" alt="Vimeo logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="false" data-js-toggle="false"></button>
</div>

Vertical with share

<div class="m-social f-vertical f-share" itemscope itemtype="http://schema.org/Organization">
    <span>Share this page</span>
    <ul>
        <li>
            <a itemprop="sameAs" aria-label="Share on Facebook" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/facebook-gray.svg">
                    <img src="/images/components/social/facebook-gray.png" alt="Facebook logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Twitter" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/twitter-gray.svg">
                    <img src="/images/components/social/twitter-gray.png" alt="Twitter logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on Skype" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/skype-gray.svg">
                    <img src="/images/components/social/skype-gray.png" alt="Skype logo">
                </picture>
            </a>
        </li>
        <li>
            <a itemprop="sameAs" aria-label="Share on LinkedIn" href="#">
                <picture>
                    <source type="image/svg+xml" srcset="/images/components/social/linkedin-gray.svg">
                    <img src="/images/components/social/linkedin-gray.png" alt="LinkedIn logo">
                </picture>
            </a>
        </li>
    </ul>
    <button class="c-glyph" aria-label="Show additional social media links" aria-hidden="true" data-js-toggle="false"></button>
</div>