Share page

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

Example Share Page contents

Nunjucksfor Example Share Page
Nunjucks macro optionsfor Example Share Page
HTMLfor Example Share Page

Nunjucks

{% 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
    })
}}

Nunjucks macro options

Name	Type	Required	Description
headingLevel	int	false	Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2`
title	string	false	Heading for the share component
pageTitle	string	true	The `<title>` of the page to be shared
pageUrl	string	true	The absolute URL of the page to be shared
facebook	boolean	false	Set to “true” to display a Facebook icon and link to allow sharing to Facebook
twitter	boolean	false	Set to “true” to display a Twitter icon and link to allow sharing to Twitter
iconSize	string	false	Icon size can be set to match the size of the list item text as detailed in the typography type scale. Defaults to “2xl”.

HTML

<h2 class="ons-u-fs-r--b ons-u-mb-2xs">Share this post</h2>
<ul class="ons-list ons-list--inline ons-list--icons">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-icon ons-icon--2xl" id="icon-facebook" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"
        focusable="false" aria-hidden="true" role="img" title="ons-icon-facebook">
        <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%3A%2F%2Fexample.com%2Fa-page-to-share"
      class="ons-list__link" target="_blank">Facebook<span class="ons-u-vh"> (opens in a new tab)</span></a>
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-icon ons-icon--2xl" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg"
        focusable="false" aria-hidden="true" role="img" title="ons-icon-twitter">
        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01" />
        <path
          d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z" />
      </svg></span><a
      href="https://twitter.com/intent/tweet?original_referer&amp;text=A%20page%20to%20share&amp;url=https%3A%2F%2Fexample.com%2Fa-page-to-share"
      class="ons-list__link" target="_blank">Twitter<span class="ons-u-vh"> (opens in a new tab)</span></a>
  </li>
</ul>

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.

Help improve this page