Update README URLs based on HTTP redirects
ReadmeCritic
parent
68aa955af2
commit
568175aff2
460
Readme.md
460
Readme.md
|
|
@ -1,187 +1,401 @@
|
|||
# Bower components builder for Grunt
|
||||
|
||||
[](https://travis-ci.org/sapegin/grunt-bower-concat)
|
||||
# Social Likes
|
||||
|
||||
[](http://badge.fury.io/bo/social-likes)
|
||||
[](http://gruntjs.com/)
|
||||
|
||||
Automatic concatenation of installed [Bower](https://github.com/bower/bower) components (JS and/or CSS) in the right order.
|
||||
Beautiful share buttons with counters for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte, etc. Uses jQuery.
|
||||
|
||||
[](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
|
||||
## Installation and configuration
|
||||
|
||||
This plugin requires Grunt 0.4.
|
||||
Use [interactive builder](http://sapegin.github.io/social-likes/) to generate the code.
|
||||
|
||||
```
|
||||
$ npm install grunt-bower-concat --save-dev
|
||||
Or install via [Bower](http://bower.io/): `$ bower install social-likes`.
|
||||
|
||||
|
||||
## Advanced configuration
|
||||
|
||||
### Layout
|
||||
|
||||
#### Default
|
||||
|
||||
All buttons in a row.
|
||||
|
||||
```html
|
||||
<div class="social-likes">
|
||||
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Vertical
|
||||
|
||||
## Configuration
|
||||
All buttons in a column.
|
||||
|
||||
Add somewhere in your `Gruntfile.js`:
|
||||
|
||||
```javascript
|
||||
grunt.loadNpmTasks('grunt-bower-concat');
|
||||
```html
|
||||
<div class="social-likes social-likes_vertical">
|
||||
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
Inside your `Gruntfile.js` file add a section named `bower_concat`. See Parameters section below for details.
|
||||
#### 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
|
||||
<div class="social-likes social-likes_single" data-single-title="Share me!">
|
||||
<div class="facebook" title="Share link on Facebook">Facebook</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Icons only
|
||||
|
||||
If you want to remove button titles add `social-likes_notext` class to make it looks better.
|
||||
|
||||
```html
|
||||
<div class="social-likes social-likes_notext">
|
||||
<div class="facebook" title="Share link on Facebook"></div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
### Options
|
||||
|
||||
#### separator
|
||||
Options define via HTML data attributes or JavaScript parameters object.
|
||||
|
||||
Type: `String` Default: `grunt.util.linefeed`
|
||||
`url`
|
||||
|
||||
Concatenated files will be joined on this string. If you're post-processing concatenated JavaScript files with a minifier, you may need to use a semicolon ';\n' as the separator. Separator is only applied to concatenated JS files.
|
||||
URL of shareable page. Current page by default.
|
||||
|
||||
`options: { separator : ';' }`
|
||||
`title`
|
||||
|
||||
### Parameters
|
||||
Title for Twitter, Vkontakte and LiveJournal. Current page’s title by default.
|
||||
|
||||
`html`
|
||||
|
||||
#### dest
|
||||
HTML code for LiveJournal button. By default <A> tag with link to current page.
|
||||
|
||||
Type: `String`, optional (at least one of [`dest`, `cssDest`] must exist).
|
||||
`counters`
|
||||
|
||||
Name of JS file where result of concatenation will be saved.
|
||||
Disables “likes” counters when “no”. Default: “yes”.
|
||||
|
||||
#### cssDest
|
||||
`zeroes`
|
||||
|
||||
Type: `String`, optional (at least one of [`dest`, `cssDest`] must exist).
|
||||
Show counters even when number is `0`. Default: “no”.
|
||||
|
||||
Name of CSS file where result of concatenation will be saved.
|
||||
`single-title`
|
||||
|
||||
#### exclude
|
||||
Share button title for “single button” mode. Default: “Share”.
|
||||
|
||||
Type: `String|Array`, optional.
|
||||
Examples:
|
||||
|
||||
List of components you want to exclude.
|
||||
```html
|
||||
<div class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
|
||||
…
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="social-likes social-likes_single" data-single-title="This is Sharing!">
|
||||
…
|
||||
</div>
|
||||
```
|
||||
|
||||
```js
|
||||
exclude: [
|
||||
'jquery',
|
||||
'modernizr'
|
||||
]
|
||||
$('.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!'
|
||||
});
|
||||
```
|
||||
|
||||
#### include
|
||||
|
||||
Type: `String|Array`, optional.
|
||||
### Services specific options
|
||||
|
||||
By default bower-concat will include all installed in project components. Using `include` option you can manually specify which components should be included.
|
||||
#### Twitter
|
||||
|
||||
```js
|
||||
include: [
|
||||
'underscore',
|
||||
'backbone'
|
||||
]
|
||||
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
|
||||
<div class="twitter" data-via="sapegin" data-related="Landscapists">Twitter</div>
|
||||
```
|
||||
|
||||
#### dependencies
|
||||
#### Pinterest
|
||||
|
||||
Type: `Object`, optional.
|
||||
You should specify an image URL via data-media attribute on `<div class="pinterest">`:
|
||||
|
||||
Unfortunately not all Bower components list their dependencies. If components concatenate in the wrong order, use this option to manually specify dependencies for those components.
|
||||
|
||||
```js
|
||||
dependencies: {
|
||||
'underscore': 'jquery',
|
||||
'mygallery': ['jquery', 'fotorama']
|
||||
}
|
||||
```html
|
||||
<div class="pinterest" data-media="http://example.com/image/url.jpg">Pinterest</div>
|
||||
```
|
||||
|
||||
#### mainFiles
|
||||
### Manual initialization
|
||||
|
||||
Type: `Object`, optional.
|
||||
Could be useful on dynamic (AJAX) websites.
|
||||
|
||||
Some Bower components don’t list their main files or (more likely) don’t have `bower.json` file at all. In this case `bower-concat` will try to guess main file but sometimes it can’t or choose wrong one. You could explicitly define main files for that components.
|
||||
|
||||
```js
|
||||
mainFiles: {
|
||||
'svg.js': 'dist/svg.js',
|
||||
'mygallery': ['src/base.js', 'src/gallery.js', 'src/style.css']
|
||||
}
|
||||
```html
|
||||
<div id="share">
|
||||
<div class="facebook">Facebook</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
#### callback
|
||||
|
||||
Type: `Function`, optional.
|
||||
|
||||
This function will be called for every Bower component and allows you to change main files chosen by `bower-concat`.
|
||||
|
||||
```js
|
||||
callback: function(mainFiles, component) {
|
||||
return _.map(mainFiles, function(filepath) {
|
||||
// Use minified files if available
|
||||
var min = filepath.replace(/\.js$/, '.min.js');
|
||||
return grunt.file.exists(min) ? min : filepath;
|
||||
});
|
||||
}
|
||||
```javascript
|
||||
$('#share').socialLikes();
|
||||
```
|
||||
|
||||
#### process
|
||||
|
||||
Type: `Function`, optional.
|
||||
### Dynamic URL changing
|
||||
|
||||
This function will be called for every Bower component and allows you to change the contents of every file.
|
||||
You can dynamically replace URL, title and Pinterest image without reinitialization.
|
||||
|
||||
```js
|
||||
process: function(src) {
|
||||
// wrap each library in a self executing function with "use strict"
|
||||
return "\n" +
|
||||
";(function( window, jQuery, angular, undefined ){ \n 'use strict';\n\n" +
|
||||
src +
|
||||
"\n\n}( window, jQuery, angular ));";
|
||||
}
|
||||
```html
|
||||
<div id="share2" class="social-likes" data-url="http://example.com/" data-title="My example">
|
||||
<div class="facebook">Facebook</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
#### bowerOptions
|
||||
|
||||
Type: `Object`, optional.
|
||||
|
||||
Bower specific options that will be passed in during the `bower.commands` calls.
|
||||
|
||||
```js
|
||||
bowerOptions: {
|
||||
relative: false
|
||||
}
|
||||
```
|
||||
#### includeDev
|
||||
|
||||
Type: `Boolean`, default: `false`.
|
||||
|
||||
Include `devDependencies` along with regular `dependencies`.
|
||||
|
||||
|
||||
### Config Example
|
||||
|
||||
``` javascript
|
||||
bower_concat: {
|
||||
all: {
|
||||
dest: 'build/_bower.js',
|
||||
cssDest: 'build/_bower.css',
|
||||
exclude: [
|
||||
'jquery',
|
||||
'modernizr'
|
||||
],
|
||||
dependencies: {
|
||||
'underscore': 'jquery',
|
||||
'backbone': 'underscore',
|
||||
'jquery-mousewheel': 'jquery'
|
||||
},
|
||||
bowerOptions: {
|
||||
relative: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```javascript
|
||||
$('#share2').socialLikes({
|
||||
url: 'https://github.com/',
|
||||
title: 'GitHub',
|
||||
data: {
|
||||
media: 'http://birdwatcher.ru/i/userpic.jpg' // Image for Pinterest button
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Changelog
|
||||
|
||||
### 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
|
||||
<div class="surfingbird">Surf</div>
|
||||
```
|
||||
|
||||
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
|
||||
<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">
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
```
|
||||
|
||||
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 <head> of your page and the path is correct.
|
||||
|
||||
So you need your page to look like this:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Welcome to my site!</title>
|
||||
<link href="social-likes_birman.css" rel="stylesheet">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="social-likes.js"></script>
|
||||
...
|
||||
```
|
||||
|
||||
### Counters don’t work
|
||||
|
||||
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 in the [Changelog.md](Changelog.md) file.
|
||||
|
||||
## 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.
|
||||
The MIT License, see the included [license.md](license.md) file.
|
||||
|
|
|
|||
Loading…
Reference in New Issue