Origami Frontend Components & Services

Readme: o-share

Social media buttons.


Markup

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:

The different social networks are (in the order suggested by the design team):

Core experience

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.

JavaScript

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

Events

The following events are fired by o-share.

oShare.ready

oShare.ready fires when a o-share instance has been initialised.

The event provides the following properties:

oShare.open

oShare.open fires when a social network share action is triggered, to open a new window.

The event provides the following properties:

Sass

@import 'o-share/main';

The oShare mixin is used to output the o-share styles.

@include oShare();

The mixin can take an optional argument $opts, that allows you to specify styles more granularly.

@include oShare($opts: ('vertical': false, 'inverse': true, 'icons': ('twitter', 'pinterest')));

Migration

State Major Version Last Minor Release Migration guide
✨ active 7 N/A migrate to v7
⚠ maintained 6 6.5 migrate to v6
╳ deprecated 5 5.0 migrate to v5
╳ deprecated 4 4.0 migrate to v4
╳ deprecated 3 3.0 migrate to v3
╳ deprecated 2 2.1 -
╳ deprecated 1 1.7 -

Contact

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.


Licence

This software is published by the Financial Times under the MIT licence.

Support Status
active
Switch component view

GitHub Repository

Install o-share

If using the Build Service, add o-share@^7.0.0 to your script and link tags.

If running a Manual Build, run bower install --save "o-share@^7.0.0".

Help & Support

o-share is maintained directly by the Origami team. If you have any questions about o-share or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com