Origami Frontend Components & Services

Readme: o-share

Social media buttons.


Usage

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):

The following social networks are deprecated, and will be removed in the next major release:

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

Sass

@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

Migration guide

Migrating from v5.x.x to v6.x.x

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

<a href="#">
-    <i>
+    <span class="o-share__text">
        Share on Twitter
-    </i>
+    </span>
</a>
<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>
<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>

Migrating from v4.x.x to v5.x.x

o-share v5 introduces a breaking change that you may need to update in your product:

<a
+class="o-share__action--icon"
href="#"><i>Icon</i></a>
<button
+class="o-share__action--icon"
><i>Icon</i></button>

Migrating from v3.x.x to v4.x.x

o-share v4 introduces a few breaking changes that you may need to update in your product:

Migrating from v2.x.x to v3.x.x

o-share v3 introduces a few breaking changes that you may need to update in your product:


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.

Switch component view

GitHub Repository

Install o-share

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

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

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