Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/estevanmaito/sharect
🔗 A lightweight JavaScript library to let users share their text selections to social networks.
https://github.com/estevanmaito/sharect
facebook-share javascript-library medium selection share social-network text twitter-share
Last synced: 5 days ago
JSON representation
🔗 A lightweight JavaScript library to let users share their text selections to social networks.
- Host: GitHub
- URL: https://github.com/estevanmaito/sharect
- Owner: estevanmaito
- License: mit
- Created: 2017-03-22T23:39:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-24T09:43:30.000Z (over 1 year ago)
- Last Synced: 2025-02-09T05:06:22.079Z (12 days ago)
- Topics: facebook-share, javascript-library, medium, selection, share, social-network, text, twitter-share
- Language: JavaScript
- Homepage: https://estevanmaito.github.io/sharect/
- Size: 2.4 MB
- Stars: 223
- Watchers: 7
- Forks: 19
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
A **lightweight** (8kb, 2.9kb gziped) JavaScript library to let people share their text selections to social networks. (Yes, like Medium)
[Watch it live.](https://estevanmaito.github.io/sharect)
### Get started with 2 lines
```javascript
Sharect.init()
```
## Table of contents
- [Demo](https://estevanmaito.github.io/sharect)
- [Quick Start](#quick-start)
- [Browser Support](#browser-support)
- [Documentation](#documentation)
- [Usage](#usage)
- [Adding more social icons](#adding-more-social-icons)
- [Upgrade to 2.0](#upgrade)
- [Contributing](#contributing)
## Quick Start
### Install (choose one)
- `npm install sharect`
- [Download from Github](https://github.com/estevanmaito/sharect/releases/download/2.0.0/sharect.js)
- CDN ``
### Initialize
```javascript
Sharect.init();
```
## Browser Support
## Documentation
The complete API is composed by 3 methods:
- [.config](#config)
- [.appendCustomShareButtons](#appendcustomsharebuttons)
- [.init](#init)
### .config
**Optional**. Configure the core library. Expects an object as argument with any of the following options.
Property | Default | Type | Description
-- | -- | -- | --
`twitter` | `true` | `boolean` | If Twitter should be shown in tooltip
`facebook` | `true` | `boolean` | If Facebook should be shown in tooltip.
`twitterUsername` | `""` | `string` | The username that should be cited when shared. Ex: `estevanmaito`
`backgroundColor` | `#333333` | `string` | The background color of the tooltip. Can be any valid CSS color name
`iconColor` | `#FFFFFF` | `string` | The color of the icons in the tooltip. Can be any valid CSS color name
`selectableElements` | `['body']` | `array` | Define the elements that can be selected, including it's children. **It expects a valid selector string** like `['p', '.article', '#main']`
Example
```javascript
Sharect.config({
twitterUsername: 'estevanmaito',
backgroundColor: '#C53364'
}).init()
```
Result
### .appendCustomShareButtons
**⚠️DISCLAIMER⚠️: If you don't plan to share on any social media other than Facebook and Twitter (covered by the `.config` method above) you can safely ignore this method.**
**Optional**. Extends the core social buttons. Expects an array of object(s) as argument containing an `icon` and a `url`.
#### `icon`
`icon` must be a string containing a monochromatic 24x24px SVG.
#### `url`
`url` must be a string containing the sharing URL (a list of options can be found [in this project](https://github.com/bradvin/social-share-urls)). Note that `PAGE_URL` and `TEXT_SELECTION` are required placeholders that will be replaced by the library.
Example
```javascript
Sharect.appendCustomShareButtons([{
icon: '',
url: 'https://api.whatsapp.com/send?text=TEXT_SELECTION%20PAGE_URL'
}]).init()
```
Result
### .init
**Required**. Initialize the library.
## Usage
### Smallest example
```html
Sharect.init();
```
### Complete core API
```html
Sharect.config({
facebook: true,
twitter: true,
twitterUsername: 'estevanmaito',
backgroundColor: '#C53364',
iconColor: '#fff',
selectableElements: ['p']
}).init();
```
## Adding more social icons
You can find a list of social share options [in this project](https://github.com/bradvin/social-share-urls), and below are some common social networks so you can save time or use it as reference.
Whatsapp
```javascript
{
icon: '',
url: 'https://api.whatsapp.com/send?text=TEXT_SELECTION%20PAGE_URL'
}
```
Reddit
```javascript
{
icon: '',
url: 'https://reddit.com/submit?url=PAGE_URL&title=TEXT_SELECTION'
}
```
## Upgrade
If you are coming from 1.x, please refer to our [guide on upgrading](/UPGRADING.md).
## Contributing
Please, read the [CONTRIBUTING.md](CONTRIBUTING.md).