Light Dark System

Social Share

<ol-social-share> | OlSocialShare
Since 1.1 stable

Share url on many social networks.

The following social networks are supported facebook, linkedin, twitter, x, email, whatsapp, telegram, viber, line, pinterest, tumblr, hackernews, reddit, vk, xing, buffer, instapaper, pocket, mashable, mix, flipboard, weibo, blogger, baidu, douban, okru, mailru, evernote, skype, delicious, sms, trello, messenger, meneame, diaspora, googlebookmarks, qzone, refind, surfingbird, yahoomail, wordpress, amazon, pinboard, threema, kakaostory, yummly 

<ol-social-share
  style="max-width: 200px;"
  networks='[
    {"name": "copy", "icon": "copy", "label": "Copy"},
    {"name": "email", "icon": "envelope-at", "label": "Email"},
    {"name": "facebook", "icon": "facebook", "label": "Facebook"},
    {"name": "x", "icon": "twitter-x", "label": "X (Twitter)"},
    {"name": "whatsapp", "icon": "whatsapp", "label": "Whatsapp"},
    {"name": "linkedin", "icon": "linkedin", "label": "Linkedin"}
  ]'
>
</ol-social-share>

import OlSocialShare from '@onlive.site/ui/dist/react/social-share';

const App = () => (
  <OlSocialShare
    style="max-width: 200px;"
    networks={[
      { name: 'copy', icon: 'copy', label: 'Copy' },
      { name: 'email', icon: 'envelope-at', label: 'Email' },
      { name: 'facebook', icon: 'facebook', label: 'Facebook' },
      { name: 'x', icon: 'twitter-x', label: 'X (Twitter)' },
      { name: 'whatsapp', icon: 'whatsapp', label: 'Whatsapp' },
      { name: 'linkedin', icon: 'linkedin', label: 'Linkedin' },
    ]}
  >
  </OlSocialShare>
);

Examples

Colorized icons

Apply standard social color to icons.

<ol-social-share
  style="max-width: 200px;"
  colorize
  networks='[
    {"name": "copy", "icon": "copy", "label": "Copy"},
    {"name": "email", "icon": "envelope-at", "label": "Email"},
    {"name": "facebook", "icon": "facebook", "label": "Facebook"},
    {"name": "x", "icon": "twitter-x", "label": "X (Twitter)"},
    {"name": "whatsapp", "icon": "whatsapp", "label": "Whatsapp"},
    {"name": "linkedin", "icon": "linkedin", "label": "Linkedin"}
  ]'
>
</ol-social-share>

import OlSocialShare from '@onlive.site/ui/dist/react/social-share';

const App = () => (
  <OlSocialShare
    style="max-width: 200px;"
    colorize
    networks={[
      { name: 'copy', icon: 'copy', label: 'Copy' },
      { name: 'email', icon: 'envelope-at', label: 'Email' },
      { name: 'facebook', icon: 'facebook', label: 'Facebook' },
      { name: 'x', icon: 'twitter-x', label: 'X (Twitter)' },
      { name: 'whatsapp', icon: 'whatsapp', label: 'Whatsapp' },
      { name: 'linkedin', icon: 'linkedin', label: 'Linkedin' },
    ]}
  >
  </OlSocialShare>
);

Custom icon color

Apply custom color to specific icon.

<ol-social-share
  style="max-width: 200px;"
  colorize
  networks='[
    {"name": "copy", "icon": "copy", "label": "Copy"},
    {"name": "email", "icon": "envelope-at", "label": "Email", "color": "#db4437"},
    {"name": "facebook", "icon": "facebook", "label": "Facebook"},
    {"name": "x", "icon": "twitter-x", "label": "X (Twitter)"},
    {"name": "whatsapp", "icon": "whatsapp", "label": "Whatsapp"},
    {"name": "linkedin", "icon": "linkedin", "label": "Linkedin"}
  ]'
>
</ol-social-share>

import OlSocialShare from '@onlive.site/ui/dist/react/social-share';

const App = () => (
  <OlSocialShare
    style="max-width: 200px;"
    colorize
    networks={[
      { name: 'copy', icon: 'copy', label: 'Copy' },
      { name: 'email', icon: 'envelope-at', label: 'Email' },
      { name: 'facebook', icon: 'facebook', label: 'Facebook' },
      { name: 'x', icon: 'twitter-x', label: 'X (Twitter)' },
      { name: 'whatsapp', icon: 'whatsapp', label: 'Whatsapp' },
      { name: 'linkedin', icon: 'linkedin', label: 'Linkedin' },
    ]}
  >
  </OlSocialShare>
);

In Dropdowns

Social Share work really well when used inside dropdowns.

<ol-dropdown placement="right-start">
  <ol-button slot="trigger" circle>
     <ol-icon name="share" label="Share"></ol-icon>
  </ol-button>
  <ol-social-share
    colorize
    networks='[
      {"name": "copy", "icon": "copy", "label": "Copy"},
      {"name": "email", "icon": "envelope-at", "label": "Email"},
      {"name": "facebook", "icon": "facebook", "label": "Facebook"},
      {"name": "x", "icon": "twitter-x", "label": "X (Twitter)"},
      {"name": "whatsapp", "icon": "whatsapp", "label": "Whatsapp"},
      {"name": "linkedin", "icon": "linkedin", "label": "Linkedin"}
    ]'
  >
  </ol-social-share>
</ol-dropdown>

import OlButton from '@onlive.site/ui/dist/react/button';
import OIcon from '@onlive.site/ui/dist/react/icon';
import OlDropdown from '@onlive.site/ui/dist/react/dropdown';
import OlMenu from '@onlive.site/ui/dist/react/menu';

const App = () => (
  <OlDropdown>
    <OlButton slot="trigger" circle>
      <OlIcon name="share" label="Share"></OlIcon>
    </OlButton>
    <OlSocialShare
      colorize
      networks={[
        { name: 'copy', icon: 'copy', label: 'Copy' },
        { name: 'email', icon: 'envelope-at', label: 'Email' },
        { name: 'facebook', icon: 'facebook', label: 'Facebook' },
        { name: 'x', icon: 'twitter-x', label: 'X (Twitter)' },
        { name: 'whatsapp', icon: 'whatsapp', label: 'Whatsapp' },
        { name: 'linkedin', icon: 'linkedin', label: 'Linkedin' },
      ]}
    >
    </OlSocialShare>
  </OlDropdown>
);

Custom Icons

Use different icons library like Tabler Icons. 

<script type="module">
  import { registerIconLibrary } from '/dist/utilities/icon-library.js';

  registerIconLibrary('tabler', {
    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@2.47.0/icons/${name}.svg`
  });
</script>

<ol-social-share
  style="max-width: 200px;"
  icon-library="tabler"
  networks='[
    {"name": "copy", "icon": "copy", "label": "Copy"},
    {"name": "email", "icon": "mail-share", "label": "Email"},
    {"name": "facebook", "icon": "brand-facebook", "label": "Facebook"},
    {"name": "x", "icon": "brand-x", "label": "X (Twitter)"},
    {"name": "whatsapp", "icon": "brand-whatsapp", "label": "Whatsapp"},
    {"name": "linkedin", "icon": "brand-linkedin", "label": "Linkedin"}
  ]'
>
</ol-social-share>

import OlSocialShare from '@onlive.site/ui/dist/react/social-share';
import { registerIconLibrary } from '@onlive.site/ui/dist/utilities/icon-library.js';

registerIconLibrary('tabler', {
  resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@2.47.0/icons/${name}.svg`
});

const App = () => (
  <OlSocialShare
    style="max-width: 200px;"
    icon-library="tabler"
    networks={[
      { name: 'copy', icon: 'copy', label: 'Copy' },
      { name: 'email', icon: 'envelope-at', label: 'Email' },
      { name: 'facebook', icon: 'facebook', label: 'Facebook' },
      { name: 'x', icon: 'twitter-x', label: 'X (Twitter)' },
      { name: 'whatsapp', icon: 'whatsapp', label: 'Whatsapp' },
      { name: 'linkedin', icon: 'linkedin', label: 'Linkedin' },
    ]}
  >
  </OlSocialShare>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/social-share/social-share.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/social-share/social-share.js';

To import this component using a bundler:

import '@onlive.site/ui/dist/components/social-share/social-share.js';

To import this component as a React component:

import OlSocialShare from '@onlive.site/ui/dist/react/social-share';

Properties

Name Description Reflects Type Default
networks A list of social networks. [{name, icon, label, color}] SocialNetwork[] []
url Url to share. If omitted, by default use window.location.href string -
title Title to share. If omitted, by default use document.title string -
description Description to share. string ''
hashtags Hashtags to share. string ''
colorize Apply standard color to social icons. boolean false
iconLibrary
icon-library 		The name of a registered custom icon library. string | undefined 'default'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ol-share onOlShare Emitted when url is shared. { network: string; url: string }

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <ol-copy-button>
  • <ol-icon>
  • <ol-menu>
  • <ol-menu-item>
  • <ol-popup>
  • <ol-spinner>
  • <ol-tooltip>