social-share-button

Sharing button behaviour.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
social-share-button
283.0.02 months ago7 years agoMinified + gzip package size for social-share-button in KB

Popular Searches

Readme

Social Share Buttons
npm npm
Social sharing buttons for Domodule.

Installation

npm install social-share-button

or
yarn add social-share-button

Usage

HTML

<body>
  <a data-module="SocialShareButton"
     data-module-text="No water in mars yet"
     data-module-tags="not,awesome"
     data-module-via="NASA"
     data-module-base-url="https://firstandthird.com/"
     data-module-net="twitter">Share on Twitter custom all</a>
</body>

JavaScript

import 'social-share-button';

It supports the following sharing methods:
  • Email: email
  • GPlus: gplus
  • LinkedIn: linkedin
  • Facebook: facebook
  • Twitter: twitter
  • Pinterest: pinterest
  • Reddit: reddit

They're controlled with the data-module-net option.

ShareUrl

All of the networks have a way to set the sharing url which is controlled via the data-module-base-url attribute. Should data-module-relative appear on the element, the URL would be based on the current one.

Email Options

| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | subject | document.title | Email's subject. | | body | Check this out #url | Note that #url will be replaced with shareUrl |

LinkedIn Options

| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | text | N/A | Linkedin's post text. | | title | N/A | Linkedin's post title. |

Twitter Options

| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | text | <meta property="twi:text" content=""> content's value | Twitter's post text. | | tags | <meta property="twi:hashtag" content=""> content's value | Hashtags | | via | <meta property="twi:author" content=""> content's value | Twitter's author |

Facebook Options

Have in mind that facebook needs OG tags for the post to be formatted correctly.
| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | tag | N/A | Post's tags. | | text | N/A | Post's text. Note that due to facebook limitation's this is seen as a byline rather than as text. |

Pinterest Options

| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | title | N/A | Pin title | | media | <meta property="og:image" content=""> content's value | Pin image |

Reddit Options

| Option | Default | Description | |------------|---------------|--------------------------------------------------------| | title | N/A | Reddit post title. |

A First+Third Project