social-share-button

v3.0.1

Published

3 months ago

Sharing button behaviour.

Downloads

835

0High
0Medium
0Low

jga

Social Share Buttons

Social sharing buttons for Domodule.

Installation

npm install social-share-button

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