Beautiful “like” buttons with counters for popular social networks: Facebook, Twitter, LiveJournal, etc. Uses jQuery.

• Easy to install.
• Beautiful and all in one style.
• Won’t explode your page’s layout.

Use interactive builder to generate the code.

Or install via Bower: $ bower install social-likes.

All buttons in a row.

<ul class="social-likes">
	<li class="facebook" title="Share link on Facebook">Facebook</li>
	...
</ul>

All buttons in a column.

<ul class="social-likes social-likes_vertical">
	<li class="facebook" title="Share link on Facebook">Facebook</li>
	...
</ul>

One button with a counter (summ of all the networks). Opens popup with like buttons in vertical layout. Use data-single-title attribute to change button title.

<ul class="social-likes social-likes_single" data-single-title="Share me!">
	<li class="facebook" title="Share link on Facebook">Facebook</li>
	...
</ul>

If you want to remove button titles add social-likes_notext class to make it looks better.

<ul class="social-likes social-likes_notext">
	<li class="facebook" title="Share link on Facebook"></li>
	...
</ul>

Options define via HTML data attributes.

url

URL of shareable page. Current page by default.

title

Title for Twitter, Vkontakte and LiveJournal. Current page’s title by default.

html

HTML code for LiveJournal button. By default tag with link to current page.

counters

Disables “likes” counters when “no”. Default: “yes”.

single-title

Share button title for “single button” mode. Default: “Share”.

Examples:

<ul class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
	…
</ul>

<ul class="social-likes social-likes_single" data-single-title="This is Sharing!">
	…
</ul>

You can specify via (site’s Twitter) and related (any other Twitter you want to advertise) values for <li class="twitter">:

<li class="twitter" data-via="sapegin" data-related="Landscapists">Twitter</li>

You should specify an image URL via data-media attribute on <li class="pinterest">:

<li class="pinterest" data-media="http://example.com/image/url.jpg">Pinterest</li>

Triggers for every non-zero counter.

$('.social-likes').on('counter.social-likes', function(event, service, number) {
	// service: facebook, twitter, etc.
});

Place googleplusonecount.php somewhere on your server. And change buttons HTML like this:

<li class="plusone" data-counter="http://example.com/path/to/googleplusonecount.php?url={url}&amp;callback=?">Google+</li>

You can find some custom buttons in contrib folder.

Define socialLikesButtons hash:

var socialLikesButtons = {
	surfingbird: {
		popupUrl: 'http://surfingbird.ru/share?url={url}',
		pupupWidth: 650,
		popupHeight: 500
	}
};

Add some CSS:

.social-likes__button_surfingbird {
	background: #f2f3f5;
	color: #596e7e;
	border-color: #ced5e2;
	}
.social-likes__icon_surfingbird {
	background: url(http://surfingbird.ru/img/share-icon.png) no-repeat 2px 3px;
	}

And use in like any other button:

<li class="surfingbird">Surf</li>

See sources (src folder) for available options and class names and contrib folder for custom buttons examples.

You can add they using Facebook Open Graph and Twitter Card:

<meta property="og:type" content="article">
<meta property="og:url" content="{page_url}">
<meta property="og:title" content="{title}">
<meta property="og:description" content="{description}">
<meta property="og:image" content="{image_url}">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@SiteTwitter">
<meta name="twitter:creator" content="@sapegin">

See wiki.

• Icons only mode (by @albburtsev).

• counter.social-likes event (#32).

• Prevent layout breaking without labels (#31).

• New Odnoklassniki API.
• Improved manual initialization.
• Compress CSS with CSSO.

• data-title and data-url attributes (by @jalkoby.
• Pinterest button (mostly by @jalkoby.
• Code button removed.

The MIT License, see the included License.md file.