Skip to content

Latest commit

 

History

History
285 lines (223 loc) · 10.4 KB

README.md

File metadata and controls

285 lines (223 loc) · 10.4 KB
Raw

Likely logo

The social sharing buttons that aren’t shabby.

Version 3.1 is out 🎉

Take a look

See Likely in action on its homepage.

Likely screenshot More on choosing a 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 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

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:

<!-- Head -->
<link href="path/to/likely.css" rel="stylesheet">
<!-- End of body -->
<script src="path/to/likely.js" type="text/javascript"></script>

If installed with npm:

<!-- Head -->
<link href="node_modules/ilyabirman-likely/release/likely.css"
      rel="stylesheet">
<!-- End of body -->
<script src="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.

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:

$ 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();

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.
<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.

Services

Facebook

<div class="facebook" data-quote="Best website ever!" data-hashtag="#puppies">Share</div>
  • 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

Linkedin

<div class="linkedin">Post</div>
  • url - url to share.

Linkedin Open Graph protocol documentation.

OK (Odnoklassniki)

<div class="odnoklassniki" data-imageurl="http://i.imgur.com/zunNbfY.jpg">Like</div>
  • 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.

Pinterest

<div class="pinterest" data-media="https://placekitten.com/200/400">Pin</div>
  • 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.

Reddit

<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.

  • 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.

Telegram

<div class="telegram" data-title="Check this link above!">Send</div>
  • 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.

X and Twitter

<div class="xcom" data-via="ilyabirman" data-hashtags="kittens,puppies">Xeet</div>
<div class="twitter" data-via="ilyabirman" data-hashtags="kittens,puppies">Tweet</div>
  • 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.

Viber

<div class="viber">Send</div>
  • 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

VK

<div class="vkontakte" data-image="https://placekitten.com/200/400" data-comment="Check this out">Share</div>
  • 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 (switch to Russian language, English docs are incomplete).

Whatsapp

<div class="whatsapp">Send</div>
  • url - url to share
  • title - text that precedes the link in the shared message, defaults to the page title.

Whatsapp Open Graph protocol documentation.

Additional info

Reinitialize configuration on change data attributes

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});

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.

<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>

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

<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.

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. 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.