2013-02-05 13:25:43 +04:00
# 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
2013-04-23 11:47:35 +04:00
Use [interactive builder ](http://sapegin.github.io/social-likes/ ) to generate the code.
Or install via [Bower ](http://bower.io/ ): `$ bower install social-likes` .
2013-02-05 13:25:43 +04:00
## Advanced configuration
2013-08-22 18:02:31 +04:00
### Layout
2013-08-26 13:15:30 +04:00
#### Default
2013-08-22 18:02:31 +04:00
2013-08-26 13:15:30 +04:00
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.
2013-08-22 18:02:31 +04:00
```
< ul class = "social-likes social-likes_notext" >
< li class = "facebook" title = "Share link on Facebook" > < / li >
...
< / ul >
```
2013-08-26 13:15:30 +04:00
2013-02-05 13:25:43 +04:00
### Options
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`
2013-02-05 16:32:38 +04:00
HTML code for LiveJournal button. By default < A > tag with link to current page.
2013-02-05 13:25:43 +04:00
`counters`
Disables “likes” counters when “no”. Default: “yes”.
`single-title`
Share button title for “single button” mode. Default: “Share”.
Examples:
```html
< ul class = "social-likes" data-url = "http://landscapists.info/" data-title = "Landscapists of Russia" >
…
< / ul >
```
```html
< ul class = "social-likes social-likes_single" data-single-title = "This is Sharing!" >
…
< / ul >
```
### 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">` :
```html
< li class = "twitter" data-via = "sapegin" data-related = "Landscapists" > Twitter< / li >
```
2013-04-23 11:23:27 +04:00
#### Pinterest
2013-02-05 13:25:43 +04:00
2013-02-05 16:26:24 +04:00
You should specify an image URL via data-media attribute on `<li class="pinterest">` :
2013-02-05 13:25:43 +04:00
```html
2013-02-05 16:26:24 +04:00
< li class = "pinterest" data-media = "http://example.com/image/url.jpg" > Pinterest< / li >
2013-02-05 13:25:43 +04:00
```
2013-09-12 12:23:57 +04:00
### Manual initialization
Could be useful on dynamic (Ajax) websites.
```html
< ul id = "share" >
< li class = "facebook" > Facebook< / li >
...
< / ul >
```
```javascript
$('#share').socialLikes();
```
2013-08-08 11:00:53 +04:00
### Events
#### `counter.social-likes`
Triggers for every non-zero counter.
```javascript
$('.social-likes').on('counter.social-likes', function(event, service, number) {
// service: facebook, twitter, etc.
});
```
2013-02-05 13:25:43 +04:00
2013-02-05 16:26:24 +04:00
### Experimental Google+ counter
Place `googleplusonecount.php` somewhere on your server. And change buttons HTML like this:
2013-02-05 13:25:43 +04:00
```html
2013-02-05 16:26:24 +04:00
< li class = "plusone" data-counter = "http://example.com/path/to/googleplusonecount.php?url={url}&callback=?" > Google+< / li >
2013-02-05 13:25:43 +04:00
```
### Adding your own button
2013-06-20 14:53:19 +04:00
You can find some custom buttons in `contrib` folder.
2013-02-05 13:25:43 +04:00
Define `socialLikesButtons` hash:
```javascript
var socialLikesButtons = {
surfingbird: {
popupUrl: 'http://surfingbird.ru/share?url={url}',
pupupWidth: 650,
popupHeight: 500
}
};
```
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 in like any other button:
```html
< li class = "surfingbird" > Surf< / li >
```
2013-08-08 11:07:09 +04:00
See sources (`src` folder) for available options and class names and `contrib` folder for custom buttons examples.
2013-02-05 13:25:43 +04:00
### Title, description and image for Facebok and Twitter
You can add they using [Facebook Open Graph ](http://davidwalsh.name/facebook-meta-tags ) and [Twitter Card ](https://dev.twitter.com/docs/cards ):
```html
< 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" >
```
2013-09-09 12:22:43 +04:00
`og:url` , `og:title` , `og:description` , `og:image` [should ](http://vk.com/dev/widget_like ) also work for Vkontakte.
2013-09-09 12:22:17 +04:00
2013-04-23 11:23:27 +04:00
### 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. ).
2013-02-05 16:49:27 +04:00
## Release History
2013-08-26 13:15:30 +04:00
### 2013-08-26 v2.0.12
* Icons only mode (by [@albburtsev ](https://github.com/albburtsev )).
2013-08-08 11:07:09 +04:00
### 2013-08-08 v2.0.11
* `counter.social-likes` event (#32).
2013-07-02 23:31:08 +04:00
### 2013-06-20 v2.0.10
2013-06-20 15:16:08 +04:00
* Prevent layout breaking without labels (#31).
2013-04-23 11:23:27 +04:00
### 2013-04-23 v2.0.8
* New Odnoklassniki API.
* Improved manual initialization.
* Compress CSS with CSSO.
2013-02-05 16:49:27 +04:00
### 2013-02-05 v2.0.7
2013-08-26 13:15:30 +04:00
* `data-title` and `data-url` attributes (by [@jalkoby ](https://github.com/jalkoby] ).
* Pinterest button (mostly by [@jalkoby ](https://github.com/jalkoby] ).
2013-02-05 16:49:27 +04:00
* Code button removed.
2013-02-05 13:25:43 +04:00
---
## License
The MIT License, see the included `License.md` file.