Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NikolayRys/Likely
The social sharing buttons that aren’t shabby
https://github.com/NikolayRys/Likely
Last synced: 4 months ago
JSON representation
The social sharing buttons that aren’t shabby
- Host: GitHub
- URL: https://github.com/NikolayRys/Likely
- Owner: NikolayRys
- License: isc
- Created: 2015-10-06T23:21:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-27T21:17:06.000Z (7 months ago)
- Last Synced: 2024-08-11T11:15:17.148Z (4 months ago)
- Language: JavaScript
- Size: 3.75 MB
- Stars: 397
- Watchers: 19
- Forks: 61
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The social sharing buttons that aren’t shabby.
Version [3.1](https://github.com/NikolayRys/Likely/releases/tag/v3.1.0) is out 🎉
## Take a look
See Likely in action on its [homepage](http://ilyabirman.net/projects/likely/).
[](http://ilyabirman.net/projects/likely/)
[More on choosing a theme](#light--dark-theme)
Likely supports following social networks and messengers:
* `facebook` – Facebook
* `linkedin` – LinkedIn
* `odnoklassniki` – OK (Odnoklassniki)
* `pinterest` – Pinterest
* `reddit` – Reddit
* `telegram` – Telegram
* `twitter` – Twitter
* `viber` – Viber
* `vkontakte` – VK
* `whatsapp` – WhatsApp
## Get
[Download the last release](https://github.com/NikolayRys/Likely/releases/download/v3.0.0/ilyabirman-likely-3.0.0.zip) and move `likely.js` and
`likely.css` to the desired directory.
Or use npm or Bower:
```sh
$ npm install ilyabirman-likely --save
```
Also you can use Likely from CDN:
https://unpkg.com/ilyabirman-likely@2/release/likely.min.css
https://unpkg.com/ilyabirman-likely@2/release/likely.min.js
or
https://unpkg.com/ilyabirman-likely@2/release/likely.css
https://unpkg.com/ilyabirman-likely@2/release/likely.js
## Setup
Link the files `likely.css` and `likely.js` from the compiled sources. Minified `.min.` versions also can be used for this.
If downloaded directly:
```html
```
If installed with npm:
```html
```
Then, create a `div` with the class `likely` and list necessary social networks:
```html
Share
Tweet
Share
Pin
Like
Send
Share
Send
Send
Share
```
If you need several Likely widgets on the page, just create another `div` with the class `likely` and list the social networks in it.
### Using as a CommonJS module
Likely can be used as a CommonJS module, so you can use it within webpack or browserify build systems.
First, install Likely using npm:
```sh
$ npm install ilyabirman-likely --save
```
Then, use it as CommonJS module somewhere in your program:
```js
var likely = require('ilyabirman-likely');
// Finds all the widgets in the DOM and initializes them
likely.initiate();
```
## Service options
You can configure Likely by specifying `data-*` attributes on a button group with the `likely` class or on the button of a specific service.
Top-level options are passed down to all the services. They can also be overridden on an individual service tag.
* `data-url` – URL to share and load counters for, defaults to the current page URL. ⚠ Specify the full URL with the protocol – like in `https://ilyabirman.com` – because some social networks don’t recognize the partial one.
* `data-title` – Text that will be added to the shared URL. Defaults to the page title.
```html
```
In 2020 most social networks rely on what is called [Open Graph Protocol](https://ogp.me/) to extract the information about shared links.
Below there is more information regarding how individual services support it,
but it's highly recommended to set up the proper tags for your page, to work in conjunction with Likely.
## Services
### Facebook
```html
Share
```
* **url** - url to share.
* **hashtag** - a single word with hash(#) symbol, which is included in the post.
* **counter** - if provided, blocks the API call and instead shows the given value in the like counter
[Facebook Open Graph protocol documentation](https://developers.facebook.com/docs/sharing/webmasters)
### Linkedin
```html
Post
```
* **url** - url to share.
[Linkedin Open Graph protocol documentation](https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin).
### OK (Odnoklassniki)
```html
Like
```
* **url** - url to share.
* **title** - text which is used as a title of created post.
* **imageurl** - url to a picture which is used as a thumbnail for the post.
* **counter** - if provided, blocks the API call and simply shows given value instead.
[OK Open Graph protocol documentation](https://apiok.ru/en/ext/like).
### Pinterest
```html
Pin
```
* **url** - url to share.
* **title** - text which is used as a comment to created pin.
* **media** - URL of an image that overrides the image in the Pin Create form.
If not provided, Pinterest will try to find image at the given webpage.
Use the this attribute to provide a better-quality version of the image if you have one.
* **counter** - if provided, blocks the API call and simply shows given value instead.
[Pinterest Open Graph protocol documentation](https://developers.pinterest.com/docs/rich-pins/overview/).
### Reddit
```html
Submit
```
Reddit counter is calculated as a sum score of the 5 most up-voted posts for a given link, across all sub-reddits.
* **url** - url to share.
* **title** - title of the post, defaults to the page title.
* **counter** - if provided, blocks the API call and simply shows given value instead.
[Reddit Open Graph protocol documentation](https://github.com/reddit-archive/reddit/blob/master/r2/r2/lib/media.py#L725).
### Telegram
```html
Send
```
* **url** - url to share.
* **title** - text that appears after the link in the shared message, defaults to the page title.
[Telegram Open Graph protocol documentation](https://stackoverflow.com/questions/30160294).
### X and Twitter
```html
Xeet
Tweet
```
* **url** - url to share.
* **title** - comment that appears before the shared url.
* **via** - indicates a specific user a source of the information.
Adds a clickable username to the tweet, like so: `My page: https://google.com/ via @ilyabirman`
* **hashtags** - a comma-separated list of hashtags added to the tweet. Omit a preceding “#” from each hashtag.
[Twitter Open Graph protocol documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started).
### Viber
```html
Send
```
* **url** - url to share.
* **title** - text that appears on a separate line after the shared url.
⚠ Viber share messages are not editable in the client application,
so if you don't want the title to appear, please set empty `data-title=""` attribute on the Viber button.
⚠ Viber button works only if the user has Viber installed on their device.
[Viber Open Graph protocol documentation](https://stackoverflow.com/questions/34941283)
### VK
```html
Share
```
* **url** - url to share.
* **title** - text used as the preview header
* **image** - url for image used as the preview thumbnail
* **comment** - default post text that the user can edit.
* **counter** - if provided, blocks the API call and simply shows given value instead.
[VK Open Graph protocol documentation](https://vk.com/dev/widget_share) (switch to Russian language, English docs are incomplete).
### Whatsapp
```html
Send
```
* **url** - url to share
* **title** - text that precedes the link in the shared message, defaults to the page title.
[Whatsapp Open Graph protocol documentation](https://stackoverflow.com/questions/19778620).
## Additional info
### Reinitialize configuration on change data attributes
If you need to dynamically change the widget's configuration, you can re-initialize it:
```javascript
// Use global object, created by the library
likely.initiate();
// If you need to refresh the counters, pass the corresponding param,
// but be aware that it will issue xhr calls to all the relevant services.
likely.initiate({forceUpdate: true});
```
### How to disable the automatic counters
Counters are enabled by default, but there are two ways to disable them:
* To add `data-counters` attribute on the upper `likely` div with `"no"`value to disable all counters.
* Another option is to supply a custom value for `data-counter` attribute of the specific services.
Likely won't do an API request for those services and just display the given value instead.
### Accessibility
From version 4 Likely uses Shadow Dom, but attributes `role` and `aria-label` on top-level are respected and added to the generated links.
```html
Share
Tweet
```
### Light / dark theme
It's possible to use alternative (dark-mode suitable) styling by adding `likely-dark-theme` (or its old alias `likely-light`) class to the main `div.likely`
```html
```
Additionally, if your website is responsive to users' color theme preferences, having `.likely-color-theme-based` will result in conditional switch between the themes.
### Supported browsers
We support IE 10+, Safari 9+ and the latest versions of Chrome, Firefox and Edge. Likely might work in the older versions too but we don’t maintain the compatibility on purpose.
# Development
Please use the [Github commit style](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53).
Before pushing make sure the tests are green and the linter does not complain.
```bash
npm test
npm run-script check-codestyle
```
Also, please, add your own tests if you are submitting a feature.