Open primary navigation
Origami Frontend Components & Services

Readme: o-social-follow

Follow on social media links. For social share buttons see o-share.

Overview

Provides links to follow an account on social media. This is different to o-share which prompts a user to share content to their followers.

Usage

Check out how to include Origami components in your project to get started with o-social-follow.

Socials

Social icons currently supported include:

Markup

o-social-share markup consists of a containing section with label, to group social media links in a landmark. Within the container is 1 or more social media links o-social-follow-icon. A visually hidden label identifies the icon to users of assistive technologies such as screen readers.

The following example shows a single Facebook link.

<section class="o-social-follow"  aria-label="Follow on social media">

    <a href="#" class="o-social-follow-icon o-social-follow-icon--facebook">
        <span class="o-social-follow-icon__label">on facebook</span>
    </a>

</section>

The next example shows multiple social media links.

<section class="o-social-follow" aria-label="Follow on social media">
    <a href="#" class="o-social-follow-icon o-social-follow-icon--twitter">
        <span class="o-social-follow-icon__label">on twitter</span>
    </a>
    <a href="#" class="o-social-follow-icon o-social-follow-icon--facebook">
        <span class="o-social-follow-icon__label">on facebook</span>
    </a>
    <a href="#" class="o-social-follow-icon o-social-follow-icon--linkedin">
        <span class="o-social-follow-icon__label">on linkedin</span>
    </a>
    <a href="#" class="o-social-follow-icon o-social-follow-icon--youtube">
        <span class="o-social-follow-icon__label">on youtube</span>
    </a>
    <a href="#" class="o-social-follow-icon o-social-follow-icon--instagram">
        <span class="o-social-follow-icon__label">on instagram</span>
    </a>
</section>

Stand Alone

Add the modifier class o-social-follow-icon--standalone to each social icon when following on social media is not the primary action available to a user.

-    <a href="#" class="o-social-follow-icon o-social-follow-icon--instagram">
+    <a href="#" class="o-social-follow-icon o-social-follow-icon--instagram o-social-follow-icon--standalone">
-        <span class="o-social-follow-icon__label">on instagram</span>
-    </a>

Inverse

To use o-social-follow on a dark background add the "inverse" modifier class o-social-follow--inverse to each social icon. The inverse theme may be used with either stand alone or contained variants above.

-    <a href="#" class="o-social-follow-icon o-social-follow-icon--instagram">
+    <a href="#" class="o-social-follow-icon o-social-follow-icon--instagram o-social-follow-icon--inverse">
-        <span class="o-social-follow-icon__label">on instagram</span>
-    </a>

Sass

@import '@financial-times/o-social-follow/main';

Call oSocialFollow to output all o-social-follow styles.

@include oSocialFollow();

We recommend passing the oSocialFollow mixin an optional argument $opts, to specify styles granularly and keep your CSS bundle small.

For example:

@include oSocialFollow($opts: (
    'icons': ('twitter', 'facebook', 'linkedin', 'youtube', 'instagram'),
    'standalone': true,
    'themes': ('inverse')
));

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.

Licence

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

Status
active
Switch component view

GitHub: o-social-follow@1.0.4

Install o-social-follow

If using the Build Service, add o-social-follow@^1.0.4 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-social-follow@^1.0.4".

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com