Share page
ExperimentalUse 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="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&text=A page to share&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 %}
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