Likely

Likely is the social sharing buttons that aren’t shabby:

Send
Pin
Send
Pin
Send
Pin
Send
Pin
Send
Pin
Send
Pin

Two themes, three sizes, nine social networks, any button text, retina support.

Version 2.3

Adds WhatsApp button. Earlier 2.2 improved single-page applications support with automatic updates on History API navigation and a method of manual initialisation.


Download zip
or check it out on Github

Setup and usage

Add the following to the <head> of your page:

<script src="/path/to/likely.js"></script>
<link rel="stylesheet" href="/path/to/likely.css">

Put the buttons where needed, in any order, remove the ones you don’t want, label as you like:

<div class="likely">
  <div class="twitter">Tweet</div>
  <div class="facebook">Share</div>
  <div class="linkedin">Link</div>
  <div class="gplus">Plus</div>
  <div class="vkontakte">Share</div>
  <div class="odnoklassniki">Class</div>
  <div class="telegram">Send</div>
  <div class="whatsapp">Send</div>
  <div class="pinterest" data-media="i/pinnable.jpg">Pin</div>
</div>

Options

These classes change the look of the buttons (all the examples are above):

class="likely likely-light"
The theme which looks better on dark or photographic background. If you photo is too light itself, it’s better to stay with the default theme.
class="likely likely-small"
Small buttons.
class="likely likely-big"
Big buttons.

Attributes on the main element:

data-url="..."
A link that should be posted to the social networks. By default it’s the address of the page where Likely is used, so usually you don’t specify it.
data-title="Likely, the social sharing buttons that aren’t shabby"
The link caption that should be posted to the social networks. By default it’s the page’s title.

Attribute on the Twitter element:

data-via="ilyabirmannet"
Which Twitter account to mention in the tweet.

Attribute on the Telegram element:

data-text="Check this out"
Text to send with the link to Telegram.

Attribute on the Pinterest element:

data-media="i/pinnable.jpg"
An image to post to Pinterest.

To make Facebook use a particular image instead of a random one, add this tag inside the <head> :

<meta property="og:image" content="path/to/image" />

Share
Pin

Designed and created by Ilya Birman
Maintained and developed by Ivan Akulov

You should follow me on Twitter, here.