Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Share page

Experimental

Use the ‘Share page’ component to allow site visitors to share a page on Twitter and/or Facebook.

Important information:
This component requires documentation.

Example

<h2 class="u-fs-r--b u-mb-xs">Share this post</h2>
<ul class="list list--inline list--bare list--icons">
  <li class="list__item ">
    <span class="list__prefix" aria-hidden="true">
      <svg class="svg-icon svg-icon--xxl" id="icon-facebook" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z" />
      </svg>
    </span><a href="https://www.facebook.com/sharer/sharer.php?u=https://example.com/a-page-to-share" class="list__link " target="_blank" rel="noreferrer external">Facebook<span class="u-vh">this link will open in a new tab</span></a>
  </li>
  <li class="list__item ">
    <span class="list__prefix" aria-hidden="true">
      <svg class="svg-icon svg-icon--xxl" id="icon-twitter" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z" />
      </svg>
    </span><a href="https://twitter.com/intent/tweet?original_referer&amp;text=A page to share&amp;url=https://example.com/a-page-to-share" class="list__link " target="_blank" rel="noreferrer external">Twitter<span class="u-vh">this link will open in a new tab</span></a>
  </li>
</ul>
Nunjucks macro options
Name Type Required Description
titleTag string false The HTML tag that is used the title e.g. h2. Defaults to h2
title string true Heading for the share component
pageTitle string true Page title for the page to be shared
pageURL string true Absolute URL of the page to be shared
facebook boolean false Display a Facebook icon/link to allow sharing to Facebook
twitter boolean false Display a Twitter icon/link to allow sharing to Twitter
iconSize string false Icon size can be set to m, l, xl, xxl. Defaults to xxl
{% from "components/share-page/_macro.njk" import onsSharePage %}
{{
    onsSharePage({
        "title": 'Share this post',
        "pageTitle": 'A page to share',
        "pageURL": 'https://example.com/a-page-to-share',
        "facebook": true,
        "twitter": true
    })
}}

{% macro onsSharePage(params) %}
    {% from "components/lists/_macro.njk" import onsList %}
    {% set titleTag = params.titleTag | default("h2") %}
    <{{ titleTag }} class="u-fs-r--b u-mb-xs">{{ params.title }}</{{ titleTag }}>
    {% set list = [] %}
    {% if params.facebook is defined and params.facebook and params.facebook === true %}
        {% set facebook =
            {
                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL,
                "text": 'Facebook',
                "prefixIcon": 'facebook',
                "iconSize": params.iconSize | default("xxl"),
                "rel": 'noreferrer external',
                "target": '_blank'
            }
         %}
        {% set list = (list.push(facebook), list) %}
    {% endif %}
    {% if params.twitter is defined and params.twitter and params.twitter === true %}
        {% set twitter =
            {
                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle ~ '&url=' ~ params.pageURL,
                "text": 'Twitter',
                "prefixIcon": 'twitter',
                "iconSize": params.iconSize | default("xxl"),
                "rel": 'noreferrer external',
                "target": '_blank'
            }
         %}
        {% set list = (list.push(twitter), list) %}
    {% endif %}
    {{
        onsList({
            "classes": 'list--inline',
            "itemsList": list
        })
    }}
{% endmacro %}

Help improve this component

Let us know how we could improve this component or share your user research findings.

Discuss the ‘Share page’ component on GitHub