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, eight social networks, any button text, retina support.

Version 2.2

Improves single-page applications support with automatic updates on History API navigation and a method of manual initialisation. Adds LinkedIn buttons. Drops half weight.


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