Namby Pamby Magicians

    ilyabirman-likely

    2.6.0 • Public • Published

    Likely logo

    The social sharing buttons that aren’t shabby.

    Version 2.6 is out 🎉

    Take a look

    See Likely in action on its homepage.

    Likely screenshot

    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 repository code and move release/likely.js and release/likely.css to the desired directory (or likely.min.js & likely.min.css if you prefer them optimized).

    Or use npm or Bower:

    $ npm install ilyabirman-likely --save
    $ bower 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> 

    If installed with Bower:

    <!-- Head -->
    <link href="bower_components/Likely/release/likely.css"
          rel="stylesheet">
    <!-- End of body -->
    <script src="bower_components/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 serivces -->
    </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.
    • quote - adds non-editable(but removable) text to the shared link.
    • 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.

    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.

    Twitter

    <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 wan't the title to appear, please set empty data-title="" attribute on the Viber button.

    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. It can be used when you want to save user's traffic and obtain value through some other means, for example through the backend in a centralized manner.

    Accessibility Settings

    To make buttons accessible for keyboard navigation and screen readers add tabindex, role and aria-label attributes:

    <div class="likely">
        <div class="facebook" tabindex="0" role="link" aria-label="Share on Facebook">Share</div>
        <div class="twitter" tabindex="0" role="link" aria-label="Tweet on Twitter">Tweet</div>
        <!-- The same for each services -->
    </div>

    Custom button

    It's possible to add a custom button into Likely's row of buttons. Let's assume that you have a 16x16 pixels image and a link to the service which you want to share to.

    <div class="likely__widget">
        <!-- List of other services -->
        <a class="likely__button" style="color:black" href="https://new.service.share.url">
            <img class="likely__icon" alt="" src="https://url.of/the/image/16x16.png">
            Post
        </a>
    </div>

    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.

    Deprecations

    In version 3.0 the following is going to be changed:

    1. Classes likely-visible and likely-ready will be merged into just likely-ready, so please don't rely on likely-visible to test the presence.
    2. Unrecognized params passed to the services will be ignored.
    3. Old initialization method will be removed.
    4. Likely buttons will be changed from
      to tag.

    As of now, there are deprecation warnings implemented for all the above.

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

    Release

    Release packaging before publishing:

    $ npm run release
    

    Keywords

    none

    Install

    npm i ilyabirman-likely

    DownloadsWeekly Downloads

    2,350

    Version

    2.6.0

    License

    MIT

    Unpacked Size

    216 kB

    Total Files

    9

    Last publish

    Collaborators

    • vitkarpov
    • volter9
    • iamakulov
    • ilyabirman
    • nikolay-rys