1 | # Social Likes Next
|
2 |
|
3 | [![Build Status](https://travis-ci.org/sapegin/social-likes-next.svg)](https://travis-ci.org/sapegin/social-likes-next)
|
4 | [![npm](https://img.shields.io/npm/v/social-likes-next.svg)](https://www.npmjs.com/package/social-likes-next)
|
5 |
|
6 | Beautiful share buttons for social networks: Facebook, Twitter, Google+, Pinterest, Telegram, LinkedIn, Vkontakte and Odnoklassniki.
|
7 |
|
8 | [![](http://wow.sapegin.me/3S0e0B1j372d/social-likes-next.png)<br>**See the demo!**](http://social-likes-next.js.org/)
|
9 |
|
10 | ## Features
|
11 |
|
12 | - Easy to install.
|
13 | - Beautiful and all in one style (with three different skins).
|
14 | - Won’t explode your page’s layout.
|
15 |
|
16 | This is a modern version of the [Social Likes for jQuery](https://github.com/sapegin/social-likes). Main distinctions:
|
17 |
|
18 | - No jQuery dependency.
|
19 | - No counters.
|
20 | - No single button mode.
|
21 | - SVG icons.
|
22 | - Supports IE11+.
|
23 |
|
24 | ## Installation and configuration
|
25 |
|
26 | ### Installation from npm
|
27 |
|
28 | It’s recommended to install the `social-likes-next` from npm:
|
29 |
|
30 | ```bash
|
31 | npm install --save social-likes-next
|
32 | ```
|
33 |
|
34 | And use a bundler like Webpack or Browserify:
|
35 |
|
36 | ```javascript
|
37 | // ES6
|
38 | import 'social-likes-next';
|
39 | import 'social-likes-next/lib/social-likes_flat.css'; // Flat skin
|
40 | // import 'social-likes-next/lib/social-likes_light.css'; // Light skin
|
41 | // import 'social-likes-next/lib/social-likes_birman.css'; // Birman skin
|
42 |
|
43 | // ES5
|
44 | require('social-likes-next');
|
45 | require('social-likes-next/lib/social-likes_flat.css'); // Flat skin
|
46 | // require('social-likes-next/lib/social-likes_light.css'); // Light skin
|
47 | // require('social-likes-next/lib/social-likes_birman.css'); // Birman skin
|
48 | ```
|
49 |
|
50 | ### Installation from CDN
|
51 |
|
52 | You can also [use npmcdn](https://npmcdn.com/social-likes-next/):
|
53 |
|
54 | 1. Add a script to your the bottom of your HTML’s `<body>`:
|
55 |
|
56 | ```html
|
57 | <script src="https://npmcdn.com/social-likes-next/dist/social-likes.min.js"></script>
|
58 | ```
|
59 |
|
60 | 2. Add a stylesheet.
|
61 |
|
62 | Choose one of the CSS files:
|
63 |
|
64 | * `social-likes_flat.css`: Flat skin;
|
65 | * `social-likes_light.css`: Light skin;
|
66 | * `social-likes_birman.css`: Birman skin.
|
67 |
|
68 | And add it to your HTML’s `<head>`:
|
69 |
|
70 | ```html
|
71 | <link rel="stylesheet" href="https://npmcdn.com/social-likes-next/dist/social-likes_flat.css">
|
72 | ```
|
73 |
|
74 | ### Adding button to your page
|
75 |
|
76 | Add this HTML where you want to have share buttons:
|
77 |
|
78 | ```html
|
79 | <div class="social-likes">
|
80 | <div data-service="facebook" title="Share link on Facebook">Facebook</div>
|
81 | <div data-service="twitter" title="Share link on Twitter">Twitter</div>
|
82 | <div data-service="plusone" title="Share link on Google+">Google+</div>
|
83 | <!-- <div data-service="pinterest" title="Share link on Pinterest" data-media="image link, required">Pinterest</div> -->
|
84 | <!-- <div data-service="vkontakte" title="Share link on Vkontakte">Vkontakte</div> -->
|
85 | <!-- <div data-service="odnoklassniki" title="Share link on Odnoklassniki">Odnoklassniki</div> -->
|
86 | </div>
|
87 | ```
|
88 |
|
89 | You can modify the labels or remove them.
|
90 |
|
91 | ## Advanced configuration
|
92 |
|
93 | ### Layout
|
94 |
|
95 | #### Default
|
96 |
|
97 | All buttons in a row.
|
98 |
|
99 | ```html
|
100 | <div class="social-likes">
|
101 | <div data-service="facebook" title="Share link on Facebook">Facebook</div>
|
102 | ...
|
103 | </div>
|
104 | ```
|
105 |
|
106 | #### Vertical
|
107 |
|
108 | All buttons in a column.
|
109 |
|
110 | ```html
|
111 | <div class="social-likes social-likes_vertical">
|
112 | <div data-service="facebook" title="Share link on Facebook">Facebook</div>
|
113 | ...
|
114 | </div>
|
115 | ```
|
116 |
|
117 | ### Options
|
118 |
|
119 | `url`
|
120 |
|
121 | URL of a shareable page. Current page by default.
|
122 |
|
123 | `title`
|
124 |
|
125 | Title for Twitter and Vkontakte. Current page’s title by default.
|
126 |
|
127 | Examples:
|
128 |
|
129 | ```html
|
130 | <div class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
|
131 | …
|
132 | </div>
|
133 | ```
|
134 |
|
135 | or:
|
136 |
|
137 | ```html
|
138 | <div class="social-likes">
|
139 | <div data-service="twitter" title="Share link on Twitter" data-title="Landscapists of Russia">Twitter</div>
|
140 | …
|
141 | </div>
|
142 | ```
|
143 |
|
144 | ### Services specific options
|
145 |
|
146 | #### Twitter
|
147 |
|
148 | You can specify `via` (site’s or your own Twitter) and `related` (any other Twitter you want to advertise) on Twitter button:
|
149 |
|
150 | ```html
|
151 | <div data-service="twitter" data-via="sapegin" data-related="Landscapists">Twitter</div>
|
152 | ```
|
153 |
|
154 | #### Pinterest
|
155 |
|
156 | You should specify an image URL via `data-media` attribute on Pinterest button:
|
157 |
|
158 | ```html
|
159 | <div data-service="pinterest" data-media="http://example.com/image/url.jpg">Pinterest</div>
|
160 | ```
|
161 |
|
162 | ### Manual initialization
|
163 |
|
164 | Could be useful on dynamic (AJAX) websites.
|
165 |
|
166 | ```html
|
167 | <div id="share">
|
168 | <div data-service="facebook">Facebook</div>
|
169 | ...
|
170 | </div>
|
171 | ```
|
172 |
|
173 | ```javascript
|
174 | import socialLikes from 'social-likes-next';
|
175 | socialLikes(document.getElementById('share'));
|
176 | ```
|
177 |
|
178 | You can also specify options:
|
179 |
|
180 | ```javascript
|
181 | import socialLikes from 'social-likes-next';
|
182 | socialLikes(document.getElementById('share'), {
|
183 | url: 'http://landscapists.info/',
|
184 | title: 'Landscapists of Russia',
|
185 | });
|
186 | ```
|
187 |
|
188 | ### Dynamic URL changing
|
189 |
|
190 | You can dynamically replace URL, title and Pinterest image without reinitialization.
|
191 |
|
192 | ```html
|
193 | <div id="share2" class="social-likes" data-url="http://example.com/" data-title="My example">
|
194 | <div data-service="facebook">Facebook</div>
|
195 | ...
|
196 | </div>
|
197 | ```
|
198 |
|
199 | ```javascript
|
200 | socialLikes(document.getElementById('share2'), {
|
201 | url: 'http://github.com/',
|
202 | title: 'GitHub',
|
203 | data: {
|
204 | media: 'http://birdwatcher.ru/i/userpic.jpg' // Image for Pinterest button
|
205 | }
|
206 | });
|
207 | ```
|
208 |
|
209 | ### Adding your own button
|
210 |
|
211 | Define `socialLikesButtons` object:
|
212 |
|
213 | ```javascript
|
214 | var socialLikesButtons = {
|
215 | github: {
|
216 | icon: 'M8 .173C3.58.173...',
|
217 | clickUrl: 'http://github.com/sapegin'
|
218 | }
|
219 | };
|
220 | ```
|
221 |
|
222 | Add some CSS:
|
223 |
|
224 | ```css
|
225 | .social-likes__icon_github {
|
226 | color: #333;
|
227 | }
|
228 | .social-likes__widget_github:hover,
|
229 | .social-likes__widget_github:active,
|
230 | .social-likes__widget_github:focus {
|
231 | background: #333;
|
232 | border-color: #333;
|
233 | }
|
234 | ```
|
235 |
|
236 | And use it like any other button:
|
237 |
|
238 | ```html
|
239 | <div data-service="github">GitHub</div>
|
240 | ```
|
241 |
|
242 | See sources (`src` folder) for available options and class names and `contrib` folder for custom buttons examples.
|
243 |
|
244 |
|
245 | ## FAQ
|
246 |
|
247 | ### Likes or shares?
|
248 |
|
249 | 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.
|
250 |
|
251 | ¹ 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.
|
252 |
|
253 | ### Why there’s no counters?
|
254 |
|
255 | Twitter counter API [was disabled by Twitter](https://blog.twitter.com/2015/hard-decisions-for-a-sustainable-platform) in November 2015, they’ve also removed the counter from their native share button.
|
256 |
|
257 | I believe that all other major social networks will follow Twitter and remove counters from their share buttons in the future.
|
258 |
|
259 | Counters (as well as native share buttons) make your site slower because every counter adds an extra HTTP request to a new host. Social Likes Next doesn’t add any additional HTTP requests if you bundle its scripts and styles with your site’s JavaScript and CSS.
|
260 |
|
261 | ### Why only IE11+ is supported?
|
262 |
|
263 | Microsoft don’t support older versions of Internet Explorer [since January 2016](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support) so it’s a great opportunity for us, developers, to do the same.
|
264 |
|
265 | ### How to change title, description and image?
|
266 |
|
267 | 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)).
|
268 |
|
269 | You can add additional Twitter data using [Twitter Card](https://dev.twitter.com/docs/cards). You have to [approve](https://dev.twitter.com/docs/cards/validation/validator) every type of Twitter Card.
|
270 |
|
271 | ```html
|
272 | <meta property="og:type" content="article">
|
273 | <meta property="og:url" content="{page_url}">
|
274 | <meta property="og:title" content="{title}">
|
275 | <meta property="og:description" content="{description}">
|
276 | <meta property="og:image" content="{image_url}">
|
277 | <meta name="twitter:card" content="summary">
|
278 | <meta name="twitter:site" content="@SiteTwitter">
|
279 | <meta name="twitter:creator" content="@sapegin">
|
280 | ```
|
281 |
|
282 | See also [Facebook’s sharing tips](https://developers.facebook.com/docs/sharing/best-practices).
|
283 |
|
284 | 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).
|
285 |
|
286 | ## Troubleshooting
|
287 |
|
288 | ### The buttons don’t work, displayed without design or don’t displayed at all
|
289 |
|
290 | First look at your [browser’s console](http://wickedlysmart.com/hfjsconsole/).
|
291 |
|
292 | If you don’t see any errors check the following:
|
293 |
|
294 | 1. `social-likes.js` is included and the path is correct.
|
295 |
|
296 | 2. `social-likes_flat.css` or `social-likes_light.css` or `social-likes_birman.css` is included in the <head> of your page and the path is correct.
|
297 |
|
298 | So you need your page to look like this:
|
299 |
|
300 | ```html
|
301 | <!DOCTYPE html>
|
302 | <html>
|
303 | <head>
|
304 | <meta charset="utf-8">
|
305 | <title>Welcome to my site!</title>
|
306 | <link href="social-likes_birman.css" rel="stylesheet">
|
307 | ...
|
308 | <script src="social-likes.js"></script>
|
309 | ...
|
310 | ```
|
311 |
|
312 | ## Release History
|
313 |
|
314 | The changelog can be found on the [Releases page](https://github.com/sapegin/social-likes-next/releases).
|
315 |
|
316 | ## Contributing
|
317 |
|
318 | Everyone is welcome to contribute. Please take a moment to review the [contributing guidelines](Contributing.md).
|
319 |
|
320 | ## Author
|
321 |
|
322 | * [Artem Sapegin](http://sapegin.me/)
|
323 |
|
324 |
|
325 | ---
|
326 |
|
327 | ## License
|
328 |
|
329 | The MIT License, see the included [license.md](license.md) file.
|