Social Likes

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

Features

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

Installation and configuration

Use interactive builder to generate the code.

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

Advanced configuration

Layout

Default

All buttons in a row.

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

Vertical

All buttons in a column.

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

Single button

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>

Icons only

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

Options define via HTML data attributes or JavaScript parameters object.

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>

$('.social-likes').socialLikes({
	url: 'https://github.com/sapegin/social-likes/',
	title: 'Beautiful “like” buttons with counters for popular social networks',
	counters: true
});

Services specific options

Twitter

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>

Pinterest

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>

Manual initialization

Could be useful on dynamic (Ajax) websites.

<ul id="share">
	<li class="facebook">Facebook</li>
	...
</ul>

$('#share').socialLikes();

Events

counter.social-likes

Triggers for every counter.

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

ready.social-likes

Triggers after all counters loaded.

$('.social-likes').on('ready.social-likes', function(event, number) {
	// number is total number of shares
});

Adding your own button

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

If you know the social network search page's url, you can make a link to results of searching in this network. There are search urls for Twitter and VKontakte by default.

var socialLikesButtons = {
	twitter: {
		...
		searchUrl: 'https://twitter.com/search?src=typd&q={url}'
	}
};

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.

How to change title, description and image

You can use Open Graph. It works for Facebook, Twitter, Google+, Pinterest and Vkontakte).

You can add additional Twitter data using 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">

If you’re experincing any problems with meta data try Open Graph Debugger and Twitter Card Validator.

How to use Social Likes with Wordpress, etc.

See wiki.

Release History

The changelog can be found in the Changelog.md file.

---

License

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