Share

Getting Started

Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-share

Description

The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags

OG tags MUST be present for share functionality to work correctly (see example below)
The only currently supported share methods are:
- Facebook
- Twitter
- LinkedIn
- Email
- Copy to Clipboard (component)
Facebook only needs u (URL) to scrap the page's OG Tags
- Facebook Sharing API resources: https://developers.facebook.com/docs/sharing/reference/share-dialog#params_share
- Facebook Open Graph Debuger: https://developers.facebook.com/tools/debug/
Twitter Needs at least one of the following query vars:
- url (recommended -- URL included with the Twee)
- text (recommended -- re-populated text highlighted in the Tweet composer)
- via (Attribute the source of a Tweet to a Twitter username, no @ needed)
- hashtags (A comma-separated list of hashtags to be appended to default Tweet text)
- Twitter Tweet API resources: https://dev.twitter.com/web/tweet-button/parameters#tweet-content-parameters
- Twitter card validator: https://cards-dev.twitter.com/validator
LinkedIn only needs url to scrap the page's OG Tags, but also can include:
- title
- summary
- source
- LinkedIn Sharing API resources: https://developer.linkedin.com/docs/share-on-linkedin (click "Customized URL")
Email Recommended query vars:
- subject
- body

Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://bolt-design-system.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://bolt-design-system.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://bolt-design-system.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />

Best Practices

Don't use the share tool with a page's related sections
Implement any "stickiness" and placement functionality on the platform the component is being used in
For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
Don't have the fixed position of the component overlap any "related content"

Usage

{% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse"
    },
    {
      name: "twitter",
      url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
    },
    {
      name: "linkedin",
      url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com"
    },
    {
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com"
    }
  ],
  copy_to_clipboard: {
    text_to_copy: "https://boltdesignsystem.com"
  },
} only %}

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
text	`string`		Defines the label text in front of the social icons.	`Share this page`
size	`string`	`small` OR `medium`	Controls the size of icons and spacing.	`medium`
align	`string`	`start`, `center`, `end`	Controls the horizontal alignment of label text and icons.	`start`
opacity	`integer`	`100`, `80`, `60`, `40`, `20`	Controls the overall transparency of the share tool.	`100`
sources	`array`	[items]: Type: `object` Properties: `name` Name of the social media source. Type: `string` `url` The specifically formed share URL with query string. Type: `string`	Social media sources to share to.	N/A
copy_to_clipboard	`object`	@bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object `text` DEPRECATED This property has been renamed trigger_text Type: string `copiedText` DEPRECATED Use the custom_confirmation property instead if you need to change the confirmation text. Type: string `iconSize` DEPRECATED Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size. Type: string `url` DEPRECATED This property has been renamed text_to_copy Type: string `trigger_text` Text to use for the inital copy button. Ignored if the custom_trigger property is used. Type: string `text_to_copy` The text to copy to the clipboard. Type: string `custom_trigger` (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed. Type: string OR object OR array `custom_transition` (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon. Type: string OR object OR array `custom_confirmation` (optional) Custom content to show after a successful copy. Type: string OR object OR array		N/A
inline			DPRECATED. Button version has been removed so this prop is no longer needed.	N/A
copyToClipboard			DPRECATED. Please use copy_to_clipboard.	N/A

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Share

Install via NPM

Description

OG Tags

Example

Best Practices

Small Size

Medium Size

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

Align: start

Align: center

Align: end

xdark

dark

light

xlight