1. Government Frontend Component Guide
  2. Share links

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.

Real world examples:

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

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

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

Other examples

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"
    }
  ]
} %>

Track as sharing links (preview)

Where the component is used to allow users to share content on social media, tracking can be added that uses Social Interactions. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call.

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

With title (preview)

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

With branding (preview)

Organisation colour branding can be added to the component as shown.

<%= render "govuk_publishing_components/components/share_links", {
  brand: "attorney-generals-office",
  links: [
    {
      href: "share",
      text: "Follow the Attorney General on Twitter",
      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: "Share on email to someone you know",
      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,
  brand: "hm-treasury",
  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"
    }
  ]
} %>