Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/firstandthird/social-share-button

Sharing buttons
https://github.com/firstandthird/social-share-button

Last synced: 14 days ago
JSON representation

Sharing buttons

Host: GitHub
URL: https://github.com/firstandthird/social-share-button
Owner: firstandthird
License: mit
Created: 2017-03-07T06:49:09.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-08-09T21:52:22.000Z (6 months ago)
Last Synced: 2024-08-10T01:58:50.024Z (6 months ago)
Language: JavaScript
Homepage:
Size: 1.73 MB
Stars: 2
Watchers: 4
Forks: 3
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Social Share Buttons

![npm](https://img.shields.io/npm/v/social-share-button.svg?style=for-the-badge)

![npm](https://img.shields.io/github/workflow/status/firstandthird/social-share-button/Lint?label=Lint&style=for-the-badge)

Social sharing buttons for [Domodule](https://github.com/firstandthird/domodule).

## Installation

```sh

npm install social-share-button

```

_or_

```sh

yarn add social-share-button

```

## Usage

### HTML

```html

  Share on Twitter custom all

```

### JavaScript

```js

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` | `` content's value | Twitter's post text. |

| `tags` | `` content's value | Hashtags |

| `via` | `` content's value | Twitter's author |

### Facebook Options

Have in mind that facebook needs [OG tags](https://developers.facebook.com/docs/sharing/webmasters/) 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` | `` content's value | Pin image |

### Reddit Options

| Option     | Default       | Description                                                 |

|------------|---------------|--------------------------------------------------------|

| `title` | N/A | Reddit post title. |

---



_A [First+Third](https://firstandthird.com) Project_