Social Likes

Try the all new Social Likes Next: no jQuery, no counters, Retina, IE11+, improved skins.

Beautiful share buttons with counters for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte, etc. Uses jQuery.

See demo

Features

• Easy to install.
• Beautiful and all in one style (with three different skins).
• Won’t explode your page’s layout.

Installation and configuration

Use interactive builder to generate the code.

Or install via npm: npm install --save social-likes.

Advanced configuration

Layout

Default

All buttons in a row.

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

Vertical

All buttons in a column.

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

Single button

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

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

Icons only

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

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

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.

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

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

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

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

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

<div id="share">
    <div class="facebook">Facebook</div>
    ...
</div>

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

<div id="share2" class="social-likes" data-url="http://example.com/" data-title="My example">
    <div class="facebook">Facebook</div>
    ...
</div>

$('#share2').socialLikes({
    url: 'https://github.com/',
    title: 'GitHub',
    data: {
        media: 'http://birdwatcher.ru/i/userpic.jpg'  // Image for Pinterest button
    }
});

$('#share2').socialLikes({
    forceUpdate: true
});

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

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

$('.social-likes').on('popup_opened.social-likes', function(event, service, win) {
    // win is popup window handler (window.open())
});

$('.social-likes').on('popup_closed.social-likes', function(event, service) {
    // Request new counters
    $(event.currentTarget).socialLikes({forceUpdate: true});

    // Or just increase the number
    var counter = $(event.currentTarget).find('.social-likes__counter_' + service);
    counter.text(+(counter.text()||0)+1).removeClass('social-likes__counter_empty');
});

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

var socialLikesButtons = {
    livejournal: {
        click: function(e) {
            // this.widget.data('something')
        }
    }
};

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

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

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

You can add additional Twitter data using Twitter Card. You have to approve every type of 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 experiencing any problems with meta data try Open Graph Debugger and Twitter Card Validator.

How to fix Twitter counter

Twitter counter API was disabled by Twitter but you can replace it with OpenShareCount. It’s free but you have to register your site there.

1. Create account at OpenShareCount.

2. Add this script before you include social-likes.js:

<script>
var socialLikesButtons = {
  twitter: {
    counterUrl: 'https://opensharecount.com/count.json?url={url}&callback=?',
    convertNumber: function(data) {
      return data.count;
    }
  }
};
</script>

How to use Social Likes with Wordpress, etc.

See wiki.

How to track activity with Google Analytics

You can track how many people click on each social button on your site with Google Analytics (or other analytics service). Note that you can track clicks only, not real shares.

$(document).on('popup_opened.social-likes', function(event, service) {
    ga('send', 'social', service, 'share', location.href);
});

Troubleshooting

The buttons don’t work, displayed without design or don’t displayed at all

First look at your browser’s console. If you see an error “Uncaught ReferenceError: jQuery is not defined”:

Then you need to include jQuery into your page. Make sure you use version at least 1.7 (and lower than 2.0 if you need to support IE8) and you include jQuery before social-likes.js. The easiest way to do it is to use Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

If you don’t see any error check the following:

1. social-likes.js is included after jQuery and the path is correct.

2. social-likes_flat.css or social-likes_classic.css or social-likes_birman.css is included in of your page and the path is correct.

So you need your page to look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Welcome to my site!</title>
    <link href="social-likes_birman.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="social-likes.js"></script>
    ...

Counters don’t work

Twitter counter was disabled in 3.0.15.

In most cases if you don’t see counters it’s because social networks APIs return zeros. You could check API requests results in Network tab in your browser’s developer tools:

Double check that you use canonical URLs (without extra parameters such as utm_source). You can change URL via data-url option.

If you have more than one Social Likes blocks on a page with different URLs, Google+ counter will work only for the first block. Google+ counter also won’t work when you refresh counters with forceUpdate option or change URL dynamically.

If your site have internationalized domain name (e.g. президент.рф) make sure you convert it to Punycode (e.g. xn--d1abbgf6aiiy.xn--p1ai).

If you’re sure that it’s a bug please file an issue and provide a link to a page with non-working counter.

Release History

The changelog can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Author

• Artem Sapegin

License

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