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 code.

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 and “Code” buttons. By default tag with link to current page.

counters

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

prompt

Text for code bubble. Default: “Copy code to clipboard:”.

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>

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>

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.

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

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