@bolt/components-share NPM

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://boltdesignsystem.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://boltdesignsystem.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://boltdesignsystem.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"

bolt design system bolt css framework design system components

@bolt/components-copy-to-clipboard @bolt/components-list @bolt/components-menu @bolt/core-v3.x @bolt/elements-icon

@everything-registry/sub-chunk-136 @infinitebrahmanuniverse/nolb-_bol @bolt/starter-kit

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

2.23.0-canary.12672.5.0

4 years ago

2.23.0-canary.12655.5.0

4 years ago

2.23.0-canary.12658.5.0

4 years ago

2.23.0-canary.12666.5.0

4 years ago

2.23.0-canary.12662.5.0

4 years ago

2.23.0-canary.12670.5.0

4 years ago

2.23.0-canary.12664.5.0

4 years ago

2.23.0-canary.12656.5.0

4 years ago

2.23.0-canary.12648.5.0

4 years ago

2.23.0-canary.12640.5.0

4 years ago

2.23.0-canary.12612.5.0

4 years ago

2.23.0-canary.12634.5.0

4 years ago

2.23.0-canary.12615.5.0

4 years ago

2.23.0-canary.12620.5.0

4 years ago

2.23.0-canary.12617.5.0

4 years ago

2.23.0-canary.12570.5.0

4 years ago

2.23.0-canary.12573.5.0

4 years ago

2.23.0-canary.12560.5.0

4 years ago

2.23.0-canary.12555.5.0

4 years ago

2.23.0-canary.12548.5.0

4 years ago

2.23.0-canary.12551.5.0

4 years ago

2.23.0-canary.12544.5.0

4 years ago

2.22.2-canary.12540.5.0

4 years ago

2.22.1-canary.12533.5.0

4 years ago

2.22.0

4 years ago

2.22.0-canary.12522.5.0

4 years ago

2.22.0-canary.12517.5.0

4 years ago

2.22.0-canary.12518.5.0

4 years ago

2.22.0-canary.12485.5.0

4 years ago

2.22.0-canary.12482.5.0

4 years ago

2.22.0-canary.12471.5.0

4 years ago

2.22.0-canary.12464.5.0

4 years ago

2.22.0-canary.12458.5.0

4 years ago

2.22.0-canary.12445.5.0

4 years ago

2.22.0-canary.12437.5.0

4 years ago

2.22.0-canary.12432.5.0

4 years ago

2.22.0-canary.12435.5.0

4 years ago

2.22.0-canary.12430.5.0

4 years ago

2.22.0-canary.12427.5.0

4 years ago

2.22.0-canary.12418.5.0

4 years ago

2.22.0-canary.12412.5.0

4 years ago

2.22.0-canary.12406.5.0

4 years ago

2.21.0

4 years ago

2.21.0-canary.12395.5.0

4 years ago

2.21.0-canary.12392.5.0

4 years ago

2.21.0-canary.12394.5.0

4 years ago

2.21.0-canary.12390.5.0

4 years ago

2.21.0-canary.12384.5.0

4 years ago

2.21.0-canary.12371.5.0

4 years ago

2.21.0-canary.12369.5.0

4 years ago

2.21.0-canary.12349.5.0

4 years ago

2.21.0-canary.12352.5.0

4 years ago

2.21.0-canary.12348.5.0

4 years ago

2.21.0-canary.12345.5.0

4 years ago

2.21.0-canary.12337.5.0

4 years ago

2.21.0-canary.12324.5.0

4 years ago

2.21.0-canary.12312.5.0

4 years ago

2.21.0-canary.12310.5.0

4 years ago

2.21.0-canary.12309.5.0

4 years ago

2.20.2-canary.12297.5.0

4 years ago

2.21.0-canary.12300.5.0

4 years ago

2.20.2-canary.12294.5.0

4 years ago

2.20.1-canary.12283.5.0

4 years ago

2.20.1-canary.12259.5.0

4 years ago

2.20.1-canary.12257.5.0

4 years ago

2.20.1-canary.12250.5.0

4 years ago

2.20.0

4 years ago

2.20.0-canary.12222.5.0

4 years ago

2.20.0-canary.12206.5.0

4 years ago

2.19.2-canary.12200.5.0

4 years ago

2.19.1-canary.12191.5.0

4 years ago

2.19.1-canary.12182.5.0

4 years ago

2.19.1-canary.12170.5.0

4 years ago

2.19.0

4 years ago

2.19.0-canary.12150.5.0

4 years ago

2.19.0-canary.12151.5.0

4 years ago

2.19.0-canary.12156.5.0

4 years ago

2.19.0-canary.12146.5.0

4 years ago

2.19.0-canary.12145.5.0

4 years ago

2.19.0-canary.12138.5.0

4 years ago

2.19.0-canary.12120.5.0

4 years ago

2.19.0-canary.12118.5.0

4 years ago

2.19.0-canary.12104.5.0

4 years ago

2.19.0-canary.12091.5.0

4 years ago

2.18.2-canary.12075.5.0

4 years ago

2.18.2-canary.12071.5.0

4 years ago

2.18.1

4 years ago

2.18.0

4 years ago

2.18.0-canary.12055.5.0

4 years ago

2.18.0-canary.12057.5.0

4 years ago

2.18.0-canary.12035.5.0

4 years ago

2.18.0-canary.12032.5.0

4 years ago

2.18.0-canary.12033.5.0

4 years ago

2.18.0-canary.12034.5.0

4 years ago

2.18.0-canary.12045.5.0

4 years ago

2.18.0-canary.12030.5.0

4 years ago

2.18.0-canary.12025.5.0

4 years ago

2.18.0-canary.12023.5.0

4 years ago

2.18.0-canary.12022.5.0

4 years ago

2.18.0-canary.12019.5.0

4 years ago

2.18.0-canary.12018.5.0

4 years ago

2.18.0-canary.12013.5.0

4 years ago

2.18.0-canary.12012.5.0

4 years ago

2.18.0-canary.12011.5.0

4 years ago

2.18.0-canary.11996.5.0

4 years ago

2.18.0-canary.11994.5.0

4 years ago

2.18.0-canary.11977.5.0

4 years ago

2.18.0-canary.11986.5.0

4 years ago

2.17.1-canary.11976.5.0

4 years ago

2.17.0

4 years ago

2.17.0-canary.11975.5.0

4 years ago

2.17.0-canary.11966.5.0

4 years ago

2.17.0-canary.11957.5.0

4 years ago

2.17.0-canary.11955.5.0

4 years ago

2.17.0-canary.11956.5.0

4 years ago

2.17.0-canary.11948.5.0

4 years ago

2.17.0-canary.11947.5.0

4 years ago

2.17.0-canary.11931.5.0

4 years ago

2.17.0-canary.11929.5.0

4 years ago

2.17.0-canary.11923.5.0

4 years ago

2.17.0-canary.11922.5.0

4 years ago

2.17.0-canary.11909.5.0

4 years ago

2.17.0-canary.11910.5.0

4 years ago

2.17.0-canary.11902.5.0

4 years ago

2.16.2

4 years ago

2.17.0-canary.11889.5.0

4 years ago

2.16.1

4 years ago

2.17.0-canary.11878.5.0

4 years ago

2.17.0-canary.11880.5.0

4 years ago

2.17.0-canary.11877.5.0

4 years ago

2.16.0-canary.11870.5.0

4 years ago

2.16.0-canary.11857.5.0

4 years ago

2.16.0

4 years ago

2.16.0-canary.11829.5.0

4 years ago

2.16.0-canary.11827.5.0

4 years ago

2.15.3-canary.11820.5.0

4 years ago

2.15.3-canary.11797.5.0

4 years ago

2.15.2

4 years ago

2.15.2-canary.11781.5.0

4 years ago

2.15.2-canary.11785.5.0

4 years ago

2.15.1-canary.11765.5.0

4 years ago

2.15.1-canary.11764.5.0

4 years ago

2.15.0-canary.11760.5.0

4 years ago

2.15.0

4 years ago

2.15.0-canary.11722.5.0

4 years ago

2.15.0-canary.11706.5.0

4 years ago

2.15.0-canary.11702.5.0

4 years ago

2.15.0-canary.11686.5.0

4 years ago

2.15.0-canary.11674.5.0

4 years ago

2.15.0-canary.11659.5.0

4 years ago

2.15.0-canary.11679.5.0

4 years ago

2.15.0-canary.11639.5.0

4 years ago

2.15.0-canary.11605.5.0

4 years ago

2.15.0-canary.11599.5.0

4 years ago

2.15.0-canary.11591.5.0

4 years ago

2.15.0-canary.11590.5.0

4 years ago

2.15.0-canary.11565.5.0

4 years ago

2.15.0-canary.11588.5.0

4 years ago

2.15.0-canary.11557.5.0

4 years ago

2.15.0-canary.11558.5.0

4 years ago

2.14.1-canary.11548.5.0

4 years ago

2.14.1-canary.11513.5.0

4 years ago

2.14.0-canary.11511.5.0

4 years ago

2.14.0

4 years ago

2.14.0-canary.11506.5.0

4 years ago

2.14.0-canary.11501.5.0

4 years ago

2.14.0-canary.11498.5.0

4 years ago

2.14.0-canary.11502.5.0

4 years ago

2.14.0-canary.11481.5.0

4 years ago

2.14.0-canary.11492.5.0

4 years ago

2.14.0-canary.11467.5.0

4 years ago

2.14.0-canary.11473.5.0

4 years ago

2.14.0-canary.11477.5.0

4 years ago

2.14.0-canary.11463.5.0

4 years ago

2.14.0-canary.11406.5.0

4 years ago

2.14.0-canary.11403.5.0

4 years ago

2.14.0-canary.11399.5.0

4 years ago

2.14.0-canary.11389.5.0

4 years ago

2.14.0-canary.11374.5.0

4 years ago

2.14.0-canary.11357.5.0

4 years ago

2.14.0-canary.11372.5.0

4 years ago

2.14.0-canary.11359.5.0

4 years ago

2.14.0-canary.11344.5.0

4 years ago

2.14.0-canary.11322.5.0

4 years ago

2.14.0-canary.11311.5.0

4 years ago

2.13.1-canary.11309.5.0

4 years ago

2.13.0

4 years ago

2.13.0-canary.11303.5.0

4 years ago

2.12.1

4 years ago

2.11.5

4 years ago

2.10.2

4 years ago

2.13.0-canary.11274.6.0

4 years ago

2.13.0-canary.11269.6.0

4 years ago

2.13.0-canary.11268.6.0

4 years ago

2.13.0-canary.11267.6.0

4 years ago

2.13.0-canary.11210.6.0

4 years ago

2.13.0-canary.11192.6.0

4 years ago

2.13.0-canary.11178.6.0

4 years ago

2.13.0-canary.11180.6.0

4 years ago

2.13.0-canary.11141.6.0

4 years ago

2.13.0-canary.11116.6.0

4 years ago

2.13.0-canary.11115.6.0

4 years ago

2.13.0-canary.11117.6.0

4 years ago

2.13.0-canary.11114.6.0

4 years ago

2.13.0-canary.11111.6.0

4 years ago

2.13.0-canary.11102.6.0

4 years ago

2.12.0-canary.11099.6.0

4 years ago

2.12.0

4 years ago

2.12.0-canary.11095.6.0

4 years ago

2.12.0-canary.11083.6.0

4 years ago

2.12.0-canary.11081.6.0

4 years ago

2.12.0-canary.11079.6.0

4 years ago

2.12.0-canary.11075.6.0

4 years ago

2.12.0-canary.11073.6.0

4 years ago

2.12.0-canary.11041.6.0

4 years ago

2.12.0-canary.11034.6.0

4 years ago

2.12.0-canary.11044.6.0

4 years ago

2.12.0-canary.11005.6.0

4 years ago

2.12.0-canary.11018.6.0

4 years ago

2.11.4-canary.11003.6.0

4 years ago

2.12.0-canary.11019.6.0

4 years ago

2.12.0-canary.11015.6.0

4 years ago

2.11.3-canary.10997.6.0

4 years ago

2.11.4-canary.11002.6.0

4 years ago

2.11.3-canary.10995.6.0

4 years ago

2.11.3-canary.10981.6.0

4 years ago

2.11.2

4 years ago

2.11.0

4 years ago

2.11.0-canary.2fa99416a.0

4 years ago

2.11.0-canary.10844.6.0

4 years ago

2.11.0-canary.10836.6.0

4 years ago

2.11.0-canary.10823.6.0

5 years ago

2.10.0

5 years ago

2.10.0-canary.10793.6.0

5 years ago

2.10.0-canary.10787.6.0

5 years ago

2.10.0-canary.10781.6.0

5 years ago

2.10.0-canary.10778.6.0

5 years ago

2.10.0-canary.10759.6.0

5 years ago

2.9.2

5 years ago

2.10.0-canary.10748.6.0

5 years ago

2.9.2-canary.10746.6.0

5 years ago

2.9.1-canary.10740.6.0

5 years ago

2.9.1-canary.10731.6.0

5 years ago

2.9.1-canary.10726.6.0

5 years ago

2.9.0

5 years ago

2.9.0-canary.10710.6.0

5 years ago

2.9.0-canary.10709.6.0

5 years ago

2.9.0-canary.10708.6.0

5 years ago

2.9.0-canary.10705.6.0

5 years ago

2.9.0-canary.10701.6.0

5 years ago

2.9.0-canary.ff66ba780.0

5 years ago

2.9.0-canary.6b70020b5.0

5 years ago

2.8.4-canary.bde01a443.0

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

2.8.0-canary.0eafc7d56.0

5 years ago

2.8.0-canary.0c7097ab5.0

5 years ago

2.8.0-canary.bfa021fa1.0

5 years ago

2.8.0-beta.2

5 years ago

2.8.0-canary.33b5593d7.0

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago