# Social Likes [![Bower version](https://badge.fury.io/bo/social-likes.svg)](http://badge.fury.io/bo/social-likes) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/) Beautiful share buttons with counters for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte, etc. Uses jQuery. [![](http://wow.sapegin.me/image/1f1U2S130d3R/social-likes.png)](http://sapegin.github.io/social-likes/) [See demo](http://sapegin.github.io/social-likes/) ## 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](http://sapegin.github.io/social-likes/) to generate the code. Or install via [Bower](http://bower.io/): `$ bower install social-likes`. ## Advanced configuration ### Layout #### Default All buttons in a row. ```html
``` #### Vertical All buttons in a column. ```html ``` #### 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. ```html ``` #### Icons only If you want to remove button titles add `social-likes_notext` class to make it looks better. ```html ``` ### 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. `counters` Disables “likes” counters when “no”. Default: “yes”. `zeroes` Show counters even when number is `0`. Default: “no”. `single-title` Share button title for “single button” mode. Default: “Share”. Examples: ```html ``` ```html ``` ```js $('.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!' }); ``` ### Services specific options #### Twitter You can specify `via` (site’s or your own Twitter) and `related` (any other Twitter you want to advertise) values for `