Social media buttons.
The simplest markup you might need looks like this:
<div data-o-component="o-share"
class="o-share"
data-o-share-links="{{links}}"
data-o-share-url="{{url}}"
data-o-share-title="{{title}}"
data-o-share-titleExtra="{{titleExtra}}"
data-o-share-summary="{{summary}}"
data-o-share-relatedTwitterAccounts="{{relatedTwitterAccounts}}">
</div>
The different options are:
links
: List of lower case social networks to be added separated by a space.url
: The URL to be shared.title
: The title of the content to be sharedtitleExtra
: Any additional text relating to the title, e.g. site section.summary
: Summary text to be shared.relatedTwitterAccounts
: Comma-separated list of Twitter accounts to encourage the user to follow. See Twitter intents for more info.The different social networks are (in the order suggested by the design team):
The following social networks are deprecated, and will be removed in the next major release:
links
config option)To support core experience, you need to include the complete markup directly.
Social media share buttons will function as plain <a>
elements (and can be set to target="_blank"
if the product wishes.
To instantiate the JavaScript:
var oShare = require('o-share');
var oShareInstance = new oShare(document.querySelector('[data-o-component=o-share]'));
The markup will be generated for that instance of o-share
.
You can also instantiate all instances in your page by running oShare.init
which returns an array with all of them.
Alternatively, an o.DOMContentLoaded
event can be dispatched on the document
to run #init()
:
document.addEventListener("DOMContentLoaded", function() {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});
Check out the API docs
@import 'o-share/main';
We also support silent mode. So if you want to use all the default o-share
classes, you need to set it to false:
$o-share-is-silent: false;
If not, you can just use our mixins to set you custom class.
Check out the API docs
o-share v6 introduces a breaking change that you may need to update in your product:
It may help to look at the changes made to the demo markup
<i>
tag have been removed so an additional class is required.<i>
.<a href="#">
- <i>
+ <span class="o-share__text">
Share on Twitter
- </i>
+ </span>
</a>
<a>
and <button>
tag have been removed so an additional class is required.<a>
and <button>
tags have been removed.<a
-class="o-share__action--icon"
+class="o-share__icon o-share__icon--twitter"
href="#">
<span class="o-share__text">
Share on Twitter
</span>
</a>
<button
-class="o-share__action--icon"
+class="o-share__icon o-share__icon--mail"
>
<span class="o-share__text">
Share via Email
</span>
</button>
o-share__action
class.<li class="o-share__action
-o-share__action--twitter
">
<a class="o-share__icon o-share__icon--twitter" href="#">
<span class="o-share__text">
Share on Twitter
</span>
</a>
</li>
o-share v5 introduces a breaking change that you may need to update in your product:
o-share__action--icon
) to avoid specificity issues with other components that use o-icons
<a
+class="o-share__action--icon"
href="#"><i>Icon</i></a>
<button
+class="o-share__action--icon"
><i>Icon</i></button>
o-share v4 introduces a few breaking changes that you may need to update in your product:
o-colors
. Updating to this new version will mean updating any other components that you have which are using o-colors
o-share v3 introduces a few breaking changes that you may need to update in your product:
o-share__action--url
to o-share__action--link
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.
This software is published by the Financial Times under the MIT licence.