Component

Share links

Social media links for linking to or sharing the current page on social media.

The component will not process a URL into a share link itself. Pass complete share URLs to the component.

Note that the component automatically appends visually hidden text to the link (default: Share on <your text> (opens in a new tab)). Consider this when setting the link text.

Real world examples:

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/share_links", {
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook",
      data_attributes: {}
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter",
      data_attributes: {}
    }
  ]
} %>

Accessibility acceptance criteria

The share link icons must be presentational and ignored by screen readers.

Links in the component must:

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when they have focus
change in appearance when touched (in the touch-down state)
change in appearance when hovered
be usable with touch
be usable with voice commands
have visible text
have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string.
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

Right to left (preview)

<%= render "govuk_publishing_components/components/share_links", {
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    }
  ]
} %>

With data attributes (preview)

Data attributes can be added to both the parent element and the individual share links, as shown. Note that the component defaults to having a data-module of ga4-link-tracker if tracking is enabled, but this is preserved even if another value for module is passed.

<%= render "govuk_publishing_components/components/share_links", {
  data_attributes: {
    module: "example-passed-module"
  },
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook",
      data_attributes: {
        meeting: "hello"
      }
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter",
      data_attributes: {
        departing: "goodbye"
      }
    }
  ]
} %>

With title (preview)

<%= render "govuk_publishing_components/components/share_links", {
  title: "Share this page",
  links: [
    {
      href: "share",
      text: "Share on Facebook",
      hidden_text: "",
      icon: "facebook"
    }
  ]
} %>

With black icons (preview)

<%= render "govuk_publishing_components/components/share_links", {
  black_icons: true,
  links: [
    {
      href: "share",
      text: "Follow the Attorney General on Twitter",
      hidden_text: "",
      icon: "twitter"
    }
  ]
} %>

With black links (preview)

<%= render "govuk_publishing_components/components/share_links", {
  black_links: true,
  links: [
    {
      href: "share",
      text: "Follow the Attorney General on Twitter",
      hidden_text: "",
      icon: "twitter"
    }
  ]
} %>

With custom visually hidden text (preview)

Use this option to specify a visually hidden text for screenreaders to prepend to the link text.

If omitted, the default text used will be ‘Share on’.

<%= render "govuk_publishing_components/components/share_links", {
  links: [
    {
      href: "share",
      text: "Facebook",
      hidden_text: "Download from",
      icon: "facebook"
    }
  ]
} %>

Track as sharing links (preview)

In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_extra_data object.

<%= render "govuk_publishing_components/components/share_links", {
  track_as_sharing: true,
  ga4_extra_data: {
    optional_extra_values: "go here"
  },
  links: [
    {
      href: "share",
      text: "Share on Facebook",
      icon: "facebook"
    },
    {
      href: "share",
      text: "Share on Twitter",
      icon: "twitter"
    }
  ]
} %>

Track as follow links (preview)

Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_extra_data object.

<%= render "govuk_publishing_components/components/share_links", {
  track_as_follow: true,
  ga4_extra_data: {
    optional_extra_values: "go here"
  },
  links: [
    {
      href: "follow",
      text: "Follow us on Facebook",
      hidden_text: "",
      icon: "facebook"
    },
    {
      href: "follow",
      text: "Follow us on Twitter",
      hidden_text: "",
      icon: "twitter"
    }
  ]
} %>

Stack vertically (preview)

<%= render "govuk_publishing_components/components/share_links", {
  stacked: true,
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    }
  ]
} %>

Arrange in columns (preview)

Share links are arranged in even columns that adjust according to the available space. Note that the column width is based on an assumed width, so if the link text is long it may wrap (the example below demonstrates this).

This option uses CSS grid, which is not fully supported in IE <= 11, so in those browsers the columns are floated.

<%= render "govuk_publishing_components/components/share_links", {
  columns: true,
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    },
    {
      href: "/email-share-link",
      text: "Email",
      icon: "email"
    },
    {
      href: "/flickr-share-link",
      text: "Flickr",
      icon: "flickr"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    },
    {
      href: "/linkedin-share-link",
      text: "Linkedin",
      icon: "linkedin"
    }
  ]
} %>

With all icons (preview)

<%= render "govuk_publishing_components/components/share_links", {
  stacked: true,
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    },
    {
      href: "/email-share-link",
      text: "Email",
      icon: "email"
    },
    {
      href: "/flickr-share-link",
      text: "Flickr",
      icon: "flickr"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    },
    {
      href: "/linkedin-share-link",
      text: "Linkedin",
      icon: "linkedin"
    },
    {
      href: "/whatsapp-share-link",
      text: "WhatsApp",
      icon: "whatsapp"
    },
    {
      href: "/other-share-link",
      text: "Anything else that might be included that could have quite a long name",
      icon: "other"
    },
    {
      href: "/youtube-share-link",
      text: "YouTube",
      icon: "youtube"
    }
  ]
} %>

With flexbox (preview)

<%= render "govuk_publishing_components/components/share_links", {
  flexbox: true,
  links: [
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    },
    {
      href: "/flickr-share-link",
      text: "Flickr",
      icon: "flickr"
    },
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/youtube-share-link",
      text: "YouTube",
      icon: "youtube"
    },
    {
      href: "/other-share-link",
      text: "Anything else that might be included that could have quite a long name",
      icon: "other"
    }
  ]
} %>

With square icons and flexbox (preview)

<%= render "govuk_publishing_components/components/share_links", {
  square_icons: true,
  flexbox: true,
  links: [
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    },
    {
      href: "/flickr-share-link",
      text: "Flickr",
      icon: "flickr"
    },
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/youtube-share-link",
      text: "YouTube",
      icon: "youtube"
    },
    {
      href: "/other-share-link",
      text: "Anything else that might be included that could have quite a long name",
      icon: "other"
    }
  ]
} %>