<h2 class="ons-u-fs-r--b ons-u-mb-xs">Share this post</h2>
<ul class="ons-list ons-list--inline ons-list--bare ons-list--icons">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-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="ons-list__link" target="_blank">Facebook<span class="ons-u-vh">this link will open in a new tab</span></a>
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-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="ons-list__link" target="_blank">Twitter<span class="ons-u-vh">this link will open in a new tab</span></a>
  </li>
</ul>

{% 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="ons-u-fs-r--b ons-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',
                "iconType": 'facebook',
                "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',
                "iconType": 'twitter',
                "rel": 'noreferrer external',
                "target": '_blank'
            }
         %}

        {% set list = (list.push(twitter), list) %}

    {% endif %}

    {{
        onsList({
            "variants": 'inline',
            "iconPosition": 'before',
            "iconSize": params.iconSize | default("xxl"),
            "itemsList": list
        })
    }}
{% endmacro %}