The social sharing buttons that arenβt shabby.
Version 3.1 is out π
See Likely in action on its homepage.
Likely supports following social networks and messengers:
facebook
β Facebooklinkedin
β LinkedInodnoklassniki
β OK (Odnoklassniki)pinterest
β Pinterestreddit
β Reddittelegram
β Telegramtwitter
β Twitterviber
β Vibervkontakte
β VKwhatsapp
β WhatsAppDownload the last release and move likely.js
and
likely.css
to the desired directory.
Or use npm or Bower:
$ 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
Link the files likely.css
and likely.js
from the compiled sources. Minified .min.
versions also can be used for this.
If downloaded directly:
<!-- Head -->
<link href="https://github.com/NikolayRys/Likely/blob/master/path/to/likely.css" rel="stylesheet">
<!-- End of body -->
<script src="https://github.com/NikolayRys/Likely/raw/master/path/to/likely.js" type="text/javascript"></script>
If installed with npm:
<!-- Head -->
<link href="https://github.com/NikolayRys/Likely/blob/master/node_modules/ilyabirman-likely/release/likely.css"
rel="stylesheet">
<!-- End of body -->
<script src="https://github.com/NikolayRys/Likely/raw/master/node_modules/ilyabirman-likely/release/likely.js"
type="text/javascript"></script>
Then, create a div
with the class likely
and list necessary social networks:
<div class="likely">
<div class="facebook">Share</div>
<div class="twitter">Tweet</div>
<div class="vkontakte">Share</div>
<div class="pinterest">Pin</div>
<div class="odnoklassniki">Like</div>
<div class="telegram">Send</div>
<div class="linkedin">Share</div>
<div class="whatsapp">Send</div>
<div class="viber">Send</div>
<div class="reddit">Share</div>
</div>
If you need several Likely widgets on the page, just create another div
with the class likely
and list the social networks in it.
Likely can be used as a CommonJS module, so you can use it within webpack or browserify build systems.
First, install Likely using npm:
$ npm install ilyabirman-likely --save
Then, use it as CommonJS module somewhere in your program:
var likely = require('ilyabirman-likely');
// Finds all the widgets in the DOM and initializes them
likely.initiate();
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.
<div class="likely" data-url="https://github.com/ilyabirman/Likely" data-title="My page">
<!-- List of services -->
</div>
In 2020 most social networks rely on what is called Open Graph Protocol 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.
<div class="facebook" data-quote="Best website ever!" data-hashtag="#puppies">Share</div>
Facebook Open Graph protocol documentation
<div class="linkedin">Post</div>
Linkedin Open Graph protocol documentation.
<div class="odnoklassniki" data-imageurl="http://i.imgur.com/zunNbfY.jpg">Like</div>
OK Open Graph protocol documentation.
<div class="pinterest" data-media="https://placekitten.com/200/400">Pin</div>
Pinterest Open Graph protocol documentation.
<div class="reddit">Submit</div>
Reddit counter is calculated as a sum score of the 5 most up-voted posts for a given link, across all sub-reddits.
Reddit Open Graph protocol documentation.
<div class="telegram" data-title="Check this link above!">Send</div>
Telegram Open Graph protocol documentation.
<div class="xcom" data-via="ilyabirman" data-hashtags="kittens,puppies">Xeet</div>
<div class="twitter" data-via="ilyabirman" data-hashtags="kittens,puppies">Tweet</div>
My page: https://google.com/ via @ilyabirman
Twitter Open Graph protocol documentation.
<div class="viber">Send</div>
β 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
<div class="vkontakte" data-image="https://placekitten.com/200/400" data-comment="Check this out">Share</div>
VK Open Graph protocol documentation (switch to Russian language, English docs are incomplete).
<div class="whatsapp">Send</div>
Whatsapp Open Graph protocol documentation.
If you need to dynamically change the widget's configuration, you can re-initialize it:
// 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});
Counters are enabled by default, but there are two ways to disable them:
data-counters
attribute on the upper likely
div with "no"
value to disable all counters.data-counter
attribute of the specific services.
Likely won't do an API request for those services and just display the given value instead.From version 4 Likely uses Shadow Dom, but attributes role
and aria-label
on top-level
<div class="likely">
<div class="facebook" role="link" aria-label="Share on Facebook">Share</div>
<div class="twitter" role="link" aria-label="Tweet on Twitter">Tweet</div>
<!-- The same for each services -->
</div>
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
<div class="likely likely-dark-theme">
<!-- List of services -->
</div>
Additionally, if your website is responsive to users' color theme preferences, having .likely-color-theme-based
will result in conditional switch between the themes.
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.
Please use the Github commit style. Before pushing make sure the tests are green and the linter does not complain.
npm test
npm run-script check-codestyle
Also, please, add your own tests if you are submitting a feature.