Content presentation - Share page

Use the share page component to allow users to share a page on Twitter or Facebook.

Open this default share page example in new window
Copy default share page code 
<h2 class="hs2-u-font-size-22 hs2-u-margin-bottom-2">Share this post</h2>

<ul class="hs2-list hs2-list--bare">

  <li class="hs2-list__item hs2-u-display-flex hs2-u-align-items-center">
    <span aria-hidden="true">
      <svg id="icon-facebook" class="hs2-icon--size-25" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
        <path fill="#1d70b8" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
      </svg>
    </span>
    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fa-page-to-share" class="hs2-list__link" target="_blank">Facebook<span class="hs2-u-visually-hidden"> (opens in a new tab)</span>
    </a>
  </li>

  <li class="hs2-list__item hs2-u-display-flex hs2-u-align-items-center">
    <span aria-hidden="true">
      <svg class="hs2-icon--size-25" id="icon-twitter" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
        <path fill="#1d70b8" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
      </svg>
    </span>
    <a href="twitter.url" class="hs2-list__link" target="_blank">Twitter<span class="hs2-u-visually-hidden"> (opens in a new tab)</span>
    </a>
  </li>

</ul>
Close default share page code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default share page
Name Type Required Description
Name titleTag Type string Required false Description The HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Defaults to “h2”
Name title Type string Required false Description Heading for the share component
Name pageTitle Type string Required true Description The <title> of the page to be shared
Name pageURL Type string Required true Description The absolute URL of the page to be shared
Name facebook Type boolean Required false Description Set to “true” to display a Facebook icon and link to allow sharing to Facebook
Name twitter Type boolean Required false Description Set to “true” to display a Twitter icon and link to allow sharing to Twitter
Copy default share page code 
{% from "share-page/macro.njk" import sharePage %}

{{
  sharePage({
    "title": 'Share this post',
    "pageTitle": 'A page to share',
    "pageURL": 'https://example.com/a-page-to-share',
    "facebook": true,
    "twitter": true
  })
}}
Close default share page code

When to use this component

Use the share page component on pages that users may want to share with other social media users. For example, on releases or news articles.