estevanmaito / Sharect
Licence: mit
🔗 A lightweight JavaScript library to let users share their text selections to social networks.
Stars: ✭ 192
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sharect
Share Selected Text
share selected text on twitter, buffer, and some others. Inspired by medium.com
Stars: ✭ 64 (-66.67%)
Mutual labels: share, medium, javascript-library
Godot-Share
Simple share text and/or image module for Godot Engine (Android & iOS)
Stars: ✭ 58 (-69.79%)
Mutual labels: share, text
web-marker
a web page highlighter - Please star if you like this project
Stars: ✭ 51 (-73.44%)
Mutual labels: text, selection
Goodshare.js
🚀 А useful modern JavaScript solution for share a link from your website to social networks or mobile messengers. Easy to install and configuring on any of your website!
Stars: ✭ 420 (+118.75%)
Mutual labels: share, social-network
Datash
Send and Receive files directly from your browser with end-to-end encryption
Stars: ✭ 178 (-7.29%)
Mutual labels: share, text
jQuery-Awesome-Sosmed-Share-Button
Awesome Social Media Share Button With Share Count
Stars: ✭ 58 (-69.79%)
Mutual labels: share, social-network
Web Highlighter
✨ A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️
Stars: ✭ 373 (+94.27%)
Mutual labels: text, selection
Cordova qq
A Cordova wrapper around the Tencent QQ SDK for Android and iOS. Provides access to QQ ssoLogin, QQ Sharing, QQZone Sharing etc.
Stars: ✭ 294 (+53.13%)
Mutual labels: share, social-network
Nativeshare
NativeShare是一个整合了各大移动端浏览器调用原生分享的插件
Stars: ✭ 751 (+291.15%)
Mutual labels: share, javascript-library
Share This
Medium-like text selection sharing without dependencies
Stars: ✭ 787 (+309.9%)
Mutual labels: medium, selection
Insert Text At Cursor
Fast crossbrowser insertion of text at cursor position in a textarea / input
Stars: ✭ 49 (-74.48%)
Mutual labels: text, selection
text-editor
A text selection range API written in pure JavaScript, for modern browsers.
Stars: ✭ 24 (-87.5%)
Mutual labels: text, selection
selecton-extension
Selecton provides popup with actions on text selection in all major browsers
Stars: ✭ 36 (-81.25%)
Mutual labels: text, selection
linkcast
Share links, images, blogs and everything on the web with your friends in one click using this chrome extension Linkcast
Stars: ✭ 13 (-93.23%)
Mutual labels: share, social-network
Stories
Medium clone built with Ruby on Rails
Stars: ✭ 688 (+258.33%)
Mutual labels: medium, social-network
Selection
✨ Selection - A simple and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies. Full mobile and scroll support.
Stars: ✭ 1,371 (+614.06%)
Mutual labels: selection, javascript-library
Share Bar
A pure JS plugin to generate a share bar for social media, used by Globo.com.
Stars: ✭ 158 (-17.71%)
Mutual labels: share, social-network
Has friendship
Add friendship to ActiveRecord models
Stars: ✭ 187 (-2.6%)
Mutual labels: social-network
Human Connection
Free and open-source social network for active citizenship.
Stars: ✭ 177 (-7.81%)
Mutual labels: social-network
A lightweight (8kb, 2.9kb gziped) JavaScript library to let people share their text selections to social networks. (Yes, like Medium)
Get started with 2 lines
<script src="https://unpkg.com/[email protected]/dist/sharect.js"></script>
<script>Sharect.init()</script>
Table of contents
- Demo
- Quick Start
- Browser Support
- Documentation
- Usage
- Adding more social icons
- Upgrade to 2.0
- Contributing
Quick Start
Install (choose one)
npm install sharect- Download from Github
- CDN
<script src="https://unpkg.com/[email protected]/dist/sharect.js"></script>
Initialize
Sharect.init();
Browser Support
Documentation
The complete API is composed by 3 methods:
.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
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). Note that PAGE_URL and TEXT_SELECTION are required placeholders that will be replaced by the library.
Example
Sharect.appendCustomShareButtons([{
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 478.165 478.165"><path d="M478.165 232.946c0 128.567-105.057 232.966-234.679 232.966-41.102 0-79.814-10.599-113.445-28.969L0 478.165l42.437-125.04c-21.438-35.065-33.77-76.207-33.77-120.159C8.667 104.34 113.763 0 243.485 0c129.623 0 234.68 104.34 234.68 232.946zM243.485 37.098c-108.802 0-197.422 87.803-197.422 195.868 0 42.915 13.986 82.603 37.576 114.879l-24.586 72.542 75.849-23.968c31.121 20.481 68.457 32.296 108.583 32.296 108.723 0 197.323-87.843 197.323-195.908 0-107.886-88.6-195.709-197.323-195.709zM361.931 286.62c-1.395-2.331-5.22-3.746-10.898-6.814-5.917-2.849-34.089-16.497-39.508-18.37-5.16-1.913-8.986-2.849-12.811 2.829-4.005 5.638-14.903 18.629-18.23 22.354-3.546 3.785-6.854 4.264-12.552 1.435-5.618-2.809-24.267-8.866-46.203-28.391-17.055-15.042-28.67-33.711-31.997-39.508-3.427-5.758-.398-8.826 2.471-11.635 2.69-2.59 5.778-6.734 8.627-10.041 2.969-3.287 3.905-5.638 5.798-9.424 1.913-3.905.936-7.192-.478-10.141-1.415-2.849-13.01-30.881-17.752-42.337-4.841-11.416-9.543-9.523-12.871-9.523-3.467 0-7.212-.478-11.117-.478-3.785 0-10.041 1.395-15.381 7.192-5.2 5.658-20.123 19.465-20.123 47.597 0 28.052 20.601 55.308 23.55 59.053 2.869 3.785 39.747 63.197 98.303 86.07 58.476 22.872 58.476 15.321 69.115 14.365 10.38-.956 34.069-13.867 38.811-27.096 4.66-13.45 4.66-24.766 3.246-27.137z"/></svg>',
url: 'https://api.whatsapp.com/send?text=TEXT_SELECTION%20PAGE_URL'
}]).init()
Result
.init
Required. Initialize the library.
Usage
Smallest example
<script src="https://unpkg.com/[email protected]/dist/sharect.min.js"></script>
<script>
Sharect.init();
</script>
Complete core API
<script src="https://unpkg.com/[email protected]/dist/sharect.min.js"></script>
<script>
Sharect.config({
facebook: true,
twitter: true,
twitterUsername: 'estevanmaito',
backgroundColor: '#C53364',
iconColor: '#fff',
selectableElements: ['p']
}).init();
</script>
Adding more social icons
You can find a list of social share options in this project, and below are some common social networks so you can save time or use it as reference.
Whatsapp
{
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 478.165 478.165"><path d="M478.165 232.946c0 128.567-105.057 232.966-234.679 232.966-41.102 0-79.814-10.599-113.445-28.969L0 478.165l42.437-125.04c-21.438-35.065-33.77-76.207-33.77-120.159C8.667 104.34 113.763 0 243.485 0c129.623 0 234.68 104.34 234.68 232.946zM243.485 37.098c-108.802 0-197.422 87.803-197.422 195.868 0 42.915 13.986 82.603 37.576 114.879l-24.586 72.542 75.849-23.968c31.121 20.481 68.457 32.296 108.583 32.296 108.723 0 197.323-87.843 197.323-195.908 0-107.886-88.6-195.709-197.323-195.709zM361.931 286.62c-1.395-2.331-5.22-3.746-10.898-6.814-5.917-2.849-34.089-16.497-39.508-18.37-5.16-1.913-8.986-2.849-12.811 2.829-4.005 5.638-14.903 18.629-18.23 22.354-3.546 3.785-6.854 4.264-12.552 1.435-5.618-2.809-24.267-8.866-46.203-28.391-17.055-15.042-28.67-33.711-31.997-39.508-3.427-5.758-.398-8.826 2.471-11.635 2.69-2.59 5.778-6.734 8.627-10.041 2.969-3.287 3.905-5.638 5.798-9.424 1.913-3.905.936-7.192-.478-10.141-1.415-2.849-13.01-30.881-17.752-42.337-4.841-11.416-9.543-9.523-12.871-9.523-3.467 0-7.212-.478-11.117-.478-3.785 0-10.041 1.395-15.381 7.192-5.2 5.658-20.123 19.465-20.123 47.597 0 28.052 20.601 55.308 23.55 59.053 2.869 3.785 39.747 63.197 98.303 86.07 58.476 22.872 58.476 15.321 69.115 14.365 10.38-.956 34.069-13.867 38.811-27.096 4.66-13.45 4.66-24.766 3.246-27.137z"/></svg>',
url: 'https://api.whatsapp.com/send?text=TEXT_SELECTION%20PAGE_URL'
}
Reddit
{
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M133.333 300c0 18.41 14.924 33.333 33.333 33.333S200 318.41 200 300s-14.924-33.333-33.333-33.333S133.333 281.59 133.333 300zm200 0c0 18.41 14.924 33.333 33.333 33.333S400 318.41 400 300s-14.924-33.333-33.333-33.333S333.333 281.59 333.333 300zm1.621 71.238c8.585-6.763 21.029-5.288 27.796 3.298 6.765 8.587 5.287 21.03-3.3 27.796-23.905 18.832-60.324 31.001-92.783 31.001s-68.879-12.169-92.783-31.001c-8.586-6.766-10.062-19.209-3.298-27.796 6.765-8.584 19.209-10.061 27.794-3.298 13.762 10.843 41.001 22.512 68.287 22.512s54.524-11.669 68.287-22.512zm198.379-137.905c0-36.819-29.849-66.667-66.667-66.667-25.06 0-46.871 13.839-58.256 34.282-34.268-18.747-76.019-30.857-121.501-33.65l39.782-89.336 76.142 21.979c6.852 19.449 25.376 33.393 47.166 33.393 27.614 0 50-22.386 50-50s-22.386-50-50-50c-19.042 0-35.595 10.647-44.038 26.309l-84.848-24.491c-9.49-2.739-19.551 1.938-23.567 10.964l-54.048 121.368c-44.342 3.123-85.032 15.116-118.56 33.456-11.388-20.443-33.211-34.273-58.272-34.273C29.848 166.667 0 196.515 0 233.333c0 27.246 16.355 50.653 39.777 60.991-4.203 12.514-6.444 25.575-6.444 39.009C33.333 425.381 137.8 500 266.667 500 395.532 500 500 425.381 500 333.333c0-13.434-2.239-26.491-6.44-39.003 23.42-10.339 39.773-33.75 39.773-60.997zM450 64.583c10.355 0 18.75 8.395 18.75 18.75s-8.395 18.75-18.75 18.75-18.75-8.395-18.75-18.75 8.394-18.75 18.75-18.75zM33.333 233.333c0-18.38 14.953-33.333 33.333-33.333 13.285 0 24.777 7.814 30.128 19.087-17.42 13.211-31.857 28.449-42.534 45.174-12.252-4.931-20.927-16.932-20.927-30.928zm233.334 227.084c-107.005 0-193.75-56.897-193.75-127.084 0-70.186 86.745-127.083 193.75-127.083s193.75 56.897 193.75 127.083c0 70.187-86.746 127.084-193.75 127.084zm212.406-196.156c-10.677-16.725-25.113-31.964-42.534-45.175C441.89 207.814 453.381 200 466.667 200c18.38 0 33.333 14.953 33.333 33.333 0 13.996-8.675 25.997-20.927 30.928z"/></svg>',
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.
Contributing
Please, read the CONTRIBUTING.md.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].