Tweak readme and contributing guidelines.
parent
fce0d4ce23
commit
061536c3e2
|
@ -6,7 +6,7 @@ I love pull requests. And following this simple guidelines will make your pull r
|
||||||
## Submitting pull requests
|
## Submitting pull requests
|
||||||
|
|
||||||
1. Create a new branch, please don’t work in master directly.
|
1. Create a new branch, please don’t work in master directly.
|
||||||
2. Add failing tests (if there’re any tests in project) for the change you want to make. Run tests (usually `grunt` or `npm test`) to see the tests fail.
|
2. Add failing tests (if there’re any tests in project) for the change you want to make. Run tests (see below) to see the tests fail.
|
||||||
3. Hack on.
|
3. Hack on.
|
||||||
4. Run tests to see if the tests pass. Repeat steps 2–4 until done.
|
4. Run tests to see if the tests pass. Repeat steps 2–4 until done.
|
||||||
5. Update the documentation to reflect any changes.
|
5. Update the documentation to reflect any changes.
|
||||||
|
@ -60,13 +60,14 @@ function foo(bar, fum) {
|
||||||
- Feel free to [ask me](http://sapegin.me/contacts) anything you need.
|
- Feel free to [ask me](http://sapegin.me/contacts) anything you need.
|
||||||
|
|
||||||
|
|
||||||
## How to build / test
|
## Building and running tests
|
||||||
|
|
||||||
`cd` to `src` folder first.
|
`cd` to `src` folder first.
|
||||||
|
|
||||||
Install dependencies:
|
Install dependencies:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
npm install grunt-cli -g
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -76,7 +77,7 @@ Hack on:
|
||||||
grunt watch
|
grunt watch
|
||||||
```
|
```
|
||||||
|
|
||||||
Build:
|
Build / run tests:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
grunt
|
grunt
|
||||||
|
|
99
Readme.md
99
Readme.md
|
@ -3,13 +3,13 @@
|
||||||
[![Bower version](https://badge.fury.io/bo/social-likes.png)](http://badge.fury.io/bo/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/)
|
[![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
|
||||||
|
|
||||||
Beautiful “like” buttons with counters for popular social networks: Facebook, Twitter, LiveJournal, etc. Uses jQuery.
|
Beautiful share buttons with counters for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte, etc. Uses jQuery.
|
||||||
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Easy to install.
|
- Easy to install.
|
||||||
- Beautiful and all in one style.
|
- Beautiful and all in one style (with three different skins).
|
||||||
- Won’t explode your page’s layout.
|
- Won’t explode your page’s layout.
|
||||||
|
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@ Use [interactive builder](http://sapegin.github.io/social-likes/) to generate th
|
||||||
|
|
||||||
Or install via [Bower](http://bower.io/): `$ bower install social-likes`.
|
Or install via [Bower](http://bower.io/): `$ bower install social-likes`.
|
||||||
|
|
||||||
|
|
||||||
## Advanced configuration
|
## Advanced configuration
|
||||||
|
|
||||||
### Layout
|
### Layout
|
||||||
|
@ -28,10 +29,10 @@ Or install via [Bower](http://bower.io/): `$ bower install social-likes`.
|
||||||
All buttons in a row.
|
All buttons in a row.
|
||||||
|
|
||||||
```
|
```
|
||||||
<ul class="social-likes">
|
<div class="social-likes">
|
||||||
<li class="facebook" title="Share link on Facebook">Facebook</li>
|
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Vertical
|
#### Vertical
|
||||||
|
@ -39,10 +40,10 @@ All buttons in a row.
|
||||||
All buttons in a column.
|
All buttons in a column.
|
||||||
|
|
||||||
```
|
```
|
||||||
<ul class="social-likes social-likes_vertical">
|
<div class="social-likes social-likes_vertical">
|
||||||
<li class="facebook" title="Share link on Facebook">Facebook</li>
|
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Single button
|
#### Single button
|
||||||
|
@ -50,10 +51,10 @@ All buttons in a column.
|
||||||
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.
|
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!">
|
<div class="social-likes social-likes_single" data-single-title="Share me!">
|
||||||
<li class="facebook" title="Share link on Facebook">Facebook</li>
|
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Icons only
|
#### Icons only
|
||||||
|
@ -61,10 +62,10 @@ One button with a counter (summ of all the networks). Opens popup with like butt
|
||||||
If you want to remove button titles add `social-likes_notext` class to make it looks better.
|
If you want to remove button titles add `social-likes_notext` class to make it looks better.
|
||||||
|
|
||||||
```
|
```
|
||||||
<ul class="social-likes social-likes_notext">
|
<div class="social-likes social-likes_notext">
|
||||||
<li class="facebook" title="Share link on Facebook"></li>
|
<div class="facebook" title="Share link on Facebook"></div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
@ -72,10 +73,6 @@ If you want to remove button titles add `social-likes_notext` class to make it l
|
||||||
|
|
||||||
Options define via HTML data attributes or JavaScript parameters object.
|
Options define via HTML data attributes or JavaScript parameters object.
|
||||||
|
|
||||||
`service`
|
|
||||||
|
|
||||||
Setup service from data instead of class name. From class name by default.
|
|
||||||
|
|
||||||
`url`
|
`url`
|
||||||
|
|
||||||
URL of shareable page. Current page by default.
|
URL of shareable page. Current page by default.
|
||||||
|
@ -103,15 +100,15 @@ Share button title for “single button” mode. Default: “Share”.
|
||||||
Examples:
|
Examples:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<ul class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
|
<div class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
|
||||||
…
|
…
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<ul class="social-likes social-likes_single" data-single-title="This is Sharing!">
|
<div class="social-likes social-likes_single" data-single-title="This is Sharing!">
|
||||||
…
|
…
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
@ -123,22 +120,23 @@ $('.social-likes').socialLikes({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Services specific options
|
### Services specific options
|
||||||
|
|
||||||
#### Twitter
|
#### Twitter
|
||||||
|
|
||||||
You can specify `via` (site’s Twitter) and `related` (any other Twitter you want to advertise) values for `<li class="twitter">`:
|
You can specify `via` (site’s or your own Twitter) and `related` (any other Twitter you want to advertise) values for `<div class="twitter">`:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<li class="twitter" data-via="sapegin" data-related="Landscapists">Twitter</li>
|
<div class="twitter" data-via="sapegin" data-related="Landscapists">Twitter</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Pinterest
|
#### Pinterest
|
||||||
|
|
||||||
You should specify an image URL via data-media attribute on `<li class="pinterest">`:
|
You should specify an image URL via data-media attribute on `<div class="pinterest">`:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<li class="pinterest" data-media="http://example.com/image/url.jpg">Pinterest</li>
|
<div class="pinterest" data-media="http://example.com/image/url.jpg">Pinterest</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Manual initialization
|
### Manual initialization
|
||||||
|
@ -146,25 +144,26 @@ You should specify an image URL via data-media attribute on `<li class="pinteres
|
||||||
Could be useful on dynamic (AJAX) websites.
|
Could be useful on dynamic (AJAX) websites.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<ul id="share">
|
<div id="share">
|
||||||
<li class="facebook">Facebook</li>
|
<div class="facebook">Facebook</div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
$('#share').socialLikes();
|
$('#share').socialLikes();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Dynamic URL changing
|
### Dynamic URL changing
|
||||||
|
|
||||||
You can dynamically replace URL, title and Pinterest image without reinitialization.
|
You can dynamically replace URL, title and Pinterest image without reinitialization.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<ul id="share2" class="social-likes" data-url="http://example.com/" data-title="My example">
|
<div id="share2" class="social-likes" data-url="http://example.com/" data-title="My example">
|
||||||
<li class="facebook">Facebook</li>
|
<div class="facebook">Facebook</div>
|
||||||
...
|
...
|
||||||
</ul>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -177,9 +176,10 @@ $('#share2').socialLikes({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Refreshing counters
|
### Refreshing counters
|
||||||
|
|
||||||
By default counters for any uniqe URL requested only once. You can force new request with `forceUpdate` option:
|
By default counters for any unique URL requested only once. You can force new request with `forceUpdate` option:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
$('#share2').socialLikes({
|
$('#share2').socialLikes({
|
||||||
|
@ -230,11 +230,12 @@ $('.social-likes').on('popup_closed.social-likes', function(event, service) {
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Adding your own button
|
### Adding your own button
|
||||||
|
|
||||||
You can find some custom buttons in `contrib` folder.
|
You can find some custom buttons in `contrib` folder.
|
||||||
|
|
||||||
Define `socialLikesButtons` hash:
|
Define `socialLikesButtons` object:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var socialLikesButtons = {
|
var socialLikesButtons = {
|
||||||
|
@ -246,7 +247,7 @@ var socialLikesButtons = {
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
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
|
```javascript
|
||||||
var socialLikesButtons = {
|
var socialLikesButtons = {
|
||||||
|
@ -255,7 +256,7 @@ var socialLikesButtons = {
|
||||||
searchUrl: 'https://twitter.com/search?src=typd&q={url}'
|
searchUrl: 'https://twitter.com/search?src=typd&q={url}'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Add some CSS:
|
Add some CSS:
|
||||||
|
|
||||||
|
@ -270,15 +271,23 @@ Add some CSS:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
And use in like any other button:
|
And use it like any other button:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<li class="surfingbird">Surf</li>
|
<div class="surfingbird">Surf</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
See sources (`src` folder) for available options and class names and `contrib` folder for custom buttons examples.
|
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
|
### 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 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)).
|
||||||
|
@ -296,7 +305,7 @@ You can add additional Twitter data using [Twitter Card](https://dev.twitter.com
|
||||||
<meta name="twitter:creator" content="@sapegin">
|
<meta name="twitter:creator" content="@sapegin">
|
||||||
```
|
```
|
||||||
|
|
||||||
If you’re experincing 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).
|
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 use Social Likes with Wordpress, etc.
|
### How to use Social Likes with Wordpress, etc.
|
||||||
|
@ -304,17 +313,11 @@ If you’re experincing any problems with meta data try [Open Graph Debugger](ht
|
||||||
See [wiki](https://github.com/sapegin/social-likes/wiki/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.).
|
||||||
|
|
||||||
|
|
||||||
## Troubleshooting and FAQ
|
## Troubleshooting
|
||||||
|
|
||||||
### 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.
|
|
||||||
|
|
||||||
### Counters don’t work
|
### Counters don’t work
|
||||||
|
|
||||||
In most cases if you don’t see counters it’s because social networks APIs return zeroes. You could check API requests results in Network tab in your browser’s developer tools:
|
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:
|
||||||
|
|
||||||
![](http://cl.ly/image/013x2M01021N/Image%202014-03-06%20at%205.33.14%20%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%20%D0%BF%D0%BE%D0%BB%D1%83%D0%B4%D0%BD%D1%8F.png)
|
![](http://cl.ly/image/013x2M01021N/Image%202014-03-06%20at%205.33.14%20%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%20%D0%BF%D0%BE%D0%BB%D1%83%D0%B4%D0%BD%D1%8F.png)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue