2013-12-16 23:49:48 +04:00
# Social Likes
[![Bower version ](https://badge.fury.io/bo/social-likes.png )](http://badge.fury.io/bo/social-likes)
[![Built with Grunt ](https://cdn.gruntjs.com/builtwith.png )](http://gruntjs.com/)
2013-02-05 13:25:43 +04:00
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
2013-11-01 19:00:21 +04:00
Options define via HTML data attributes or JavaScript parameters object.
2013-02-05 13:25:43 +04:00
`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 >
```
2013-11-01 19:00:21 +04:00
```js
$('.social-likes').socialLikes({
url: 'https://github.com/sapegin/social-likes/',
title: 'Beautiful “like” buttons with counters for popular social networks',
2013-12-05 17:08:30 +04:00
counters: true
2013-11-01 19:00:21 +04:00
});
```
2013-02-05 13:25:43 +04:00
### 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
}
};
```
2013-10-04 14:31:55 +04:00
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.
```javascript
var socialLikesButtons = {
twitter: {
...
searchUrl: 'https://twitter.com/search?src=typd& q={url}'
}
};
```
2013-02-05 13:25:43 +04:00
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
2013-11-16 18:36:10 +04:00
### How to change title, description and image
2013-02-05 13:25:43 +04:00
2013-11-16 18:36:10 +04:00
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/docs/cards ).
2013-02-05 13:25:43 +04:00
```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: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-12-24 00:18:55 +04:00
The changelog can be found in the `Changelog.md` file.
2013-02-05 13:25:43 +04:00
---
## License
The MIT License, see the included `License.md` file.