`:

```html

```

### Manual initialization

Could be useful on dynamic (AJAX) websites.

```html

```

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

### Dynamic URL changing

You can dynamically replace URL, title and Pinterest image without reinitialization.

```html

```

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

### Refreshing counters

By default counters for any unique URL requested only once. You can force new request with `forceUpdate` option:

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

### Events

#### `counter.social-likes`

Triggers for every counter.

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

#### `ready.social-likes`

Triggers after all counters loaded.

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

#### `popup_opened.social-likes`

Triggers after popup window opened.

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

#### `popup_closed.social-likes`

Triggers after popup window closed.

```javascript
$('.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');
});
```

### Adding your own button

You can find some custom buttons in `contrib` folder.

Define `socialLikesButtons` object:

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

Or with a custom click handler:

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

Add some CSS:

```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 it like any other button:

```html

```

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

## FAQ

### Likes or shares?

This plugin allows your users to “share” the content of your website. (Un)fortunately¹ real “likes” are possible only when you use original Facebook, Google+, etc. buttons.

¹ I believe that “shares” are much better and valuable than “likes” because they’re more visible in feed and users could add they’re own comments to links they share. “Like” costs nothing.

### How to change title, description and image

You can use [Open Graph](http://ogp.me/). It works for [Facebook](http://davidwalsh.name/facebook-meta-tags), Twitter, [Google+](https://developers.google.com/+/web/snippet/), [Pinterest](http://developers.pinterest.com/rich_pins/) and [Vkontakte](http://vk.com/dev/widget_like)).

You can add additional Twitter data using [Twitter Card](https://dev.twitter.com/cards/overview). You have to [approve](https://dev.twitter.com/docs/cards/validation/validator) every type of Twitter Card.

```html

```

If you’re experiencing any problems with meta data try [Open Graph Debugger](https://developers.facebook.com/tools/debug/) and [Twitter Card Validator](https://dev.twitter.com/docs/cards/validation/validator).

### How to fix Twitter counter

Twitter counter API [was disabled by Twitter](https://github.com/sapegin/social-likes/releases/tag/3.0.15) but you can replace it with [OpenShareCount](http://opensharecount.com/). It’s free but you have to register your site there.

1. [Create account](http://opensharecount.com/) at OpenShareCount.

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

```html

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

```

### How to use Social Likes with Wordpress, etc.

See [wiki](https://github.com/sapegin/social-likes/wiki/How-to-use-Social-Likes-with-Wordpress,-etc.).

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

```javascript
$(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](http://www.wickedlysmart.com/hfjsconsole/). 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:

```html

```

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:

```html

Welcome to my site!



...
```

### Counters don’t work

**Twitter counter was disabled in [3.0.15](https://github.com/sapegin/social-likes/releases/tag/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](#options).

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](https://en.wikipedia.org/wiki/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](https://github.com/sapegin/social-likes/releases).

## Contributing

Everyone is welcome to contribute. Please take a moment to review the [contributing guidelines](Contributing.md).

## Author

* [Artem Sapegin](http://sapegin.me/)

---

## License

The MIT License, see the included [license.md](license.md) file.