{"_id":"social-likes-next","_rev":"5-4dd725450a48949e2d9cb9c34c35f500","name":"social-likes-next","description":"[![Build Status](https://travis-ci.org/sapegin/social-likes-next.svg)](https://travis-ci.org/sapegin/social-likes-next) [![npm](https://img.shields.io/npm/v/social-likes-next.svg)](https://www.npmjs.com/package/social-likes-next)","dist-tags":{"beta":"1.0.0-rc","latest":"1.1.0"},"versions":{"1.0.0-rc":{"name":"social-likes-next","version":"1.0.0-rc","main":"lib/index.js","files":["lib","dist","contrib"],"homepage":"https://github.com/sapegin/social-likes-next","author":{"name":"Artem Sapegin","url":"http://sapegin.me/"},"repository":{"type":"git","url":"git://github.com/sapegin/social-likes-next.git"},"bugs":{"url":"https://github.com/sapegin/social-likes-next/issues"},"license":"MIT","devDependencies":{"autoprefixer":"~6.3.3","babel-cli":"~6.6.5","babel-core":"~6.7.0","babel-loader":"~6.2.4","babel-preset-es2015":"~6.6.0","cssnano":"~3.5.2","eslint":"~1.9.0","express":"~4.13.4","html-webpack-plugin":"~2.10.0","mkdirp":"~0.5.1","postcss-cli":"~2.5.1","postcss-initial":"~1.5.0","rimraf":"~2.5.2","stylus":"~0.54.0","webpack":"~1.12.14","webpack-dev-middleware":"~1.5.1","webpack-merge":"~0.8.3"},"scripts":{"build":"npm run build:lib && npm run build:umd && npm run build:umd:min && npm run skins && npm run skins:min","build:lib":"babel src --out-dir lib","build:umd":"webpack --config build/webpack.config.umd.js","build:umd:min":"webpack --config build/webpack.config.umd-min.js","clean":"rimraf lib dist","start":"node build/webpack-dev-server.js","lint":"eslint src","prepublish":"npm run test && npm run clean && npm run build","test":"npm run lint","skins":"mkdirp lib && stylus skins --out lib && postcss --use autoprefixer --use postcss-initial -d lib lib/*.css","skins:min":"mkdirp dist && stylus skins --out dist && postcss --use autoprefixer --use postcss-initial --use cssnano -d dist dist/*.css","skins:watch":"stylus skins --out lib --watch"},"gitHead":"8b0140f1ac7703360af00738b498e5069fd8c2b0","description":"Beautiful share buttons for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte and Odnoklassniki.","_id":"social-likes-next@1.0.0-rc","_shasum":"1192adbfe1f5984161a166f964ff1701e0b48221","_from":".","_npmVersion":"3.6.0","_nodeVersion":"5.7.0","_npmUser":{"name":"sapegin","email":"artem@sapegin.ru"},"maintainers":[{"name":"sapegin","email":"artem@sapegin.ru"}],"dist":{"shasum":"1192adbfe1f5984161a166f964ff1701e0b48221","tarball":"https://registry.npmjs.org/social-likes-next/-/social-likes-next-1.0.0-rc.tgz","integrity":"sha512-ycMTJ3SRbiWQpS4Kfj8Tn15o0o7HV/beAweaV/6JtBAQjDaMGPT3bX4gRHyoRGKaIVL0FkwztIFKsvbD2qcCfQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQhut1lYLpC1KXJTBJ9QyBYNktaCHp9iJ6witTb0BowAiEAjTt3CZgAJezyrnzUgFvxs7lpfkR8EBghpnNAY5iTrXU="}]},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/social-likes-next-1.0.0-rc.tgz_1457647356163_0.9577079673763365"}},"1.0.0":{"name":"social-likes-next","version":"1.0.0","main":"lib/index.js","files":["lib","dist","contrib"],"homepage":"https://github.com/sapegin/social-likes-next","author":{"name":"Artem Sapegin","url":"http://sapegin.me/"},"repository":{"type":"git","url":"git://github.com/sapegin/social-likes-next.git"},"bugs":{"url":"https://github.com/sapegin/social-likes-next/issues"},"license":"MIT","dependencies":{"deepmerge":"~0.2.10"},"devDependencies":{"autoprefixer":"~6.3.3","ava":"~0.13.0","babel-cli":"~6.6.5","babel-core":"~6.7.2","babel-eslint":"~5.0.0","babel-loader":"~6.2.4","babel-preset-es2015":"~6.6.0","babel-register":"~6.7.2","cpy-cli":"~1.0.0","cssnano":"~3.5.2","domino":"~1.0.23","eslint":"~1.10.3","eslint-config-tamia":"~1.2.0","fledermaus":"~4.1.2","gh-pages":"~0.11.0","html-webpack-plugin":"~2.10.0","mkdirp":"~0.5.1","npm-run-all":"~1.5.3","postcss-cli":"~2.5.1","postcss-initial":"~1.5.0","rimraf":"~2.5.2","stylus":"~0.54.2","tamia":"~2.0.3","webpack":"~1.12.14","webpack-dev-server":"~1.14.1","webpack-merge":"~0.8.3"},"scripts":{"test":"npm-run-all -p lint test:ava","test:ava":"ava","test:watch":"ava --watch","start":"webpack-dev-server --port 8506 --host 0.0.0.0 --config build/webpack.config.development.js --content-base lib","prepublish":"npm-run-all test clean build","postpublish":"npm run gh-pages","lint":"eslint src test","build":"npm-run-all build:* build:*:* skins skins:min","build:lib":"babel src --out-dir lib","build:umd":"webpack --config build/webpack.config.umd.js","build:umd:min":"webpack --config build/webpack.config.umd-min.js","clean":"rimraf lib dist","skins":"mkdirp lib && stylus skins --out lib && postcss --use autoprefixer --use postcss-initial -d lib lib/*.css","skins:min":"mkdirp dist && stylus skins --out dist && postcss --use autoprefixer --use postcss-initial --use cssnano --replace dist/*.css","skins:watch":"stylus skins --out lib --watch","gh-pages":"npm-run-all gh-pages:*","gh-pages:copy":"cpy 'dist/*.min.js' gh-pages/public","gh-pages:styles":"stylus gh-pages --out gh-pages/public && postcss --use autoprefixer --use postcss-initial --use cssnano --use $(pwd)/gh-pages/fixstyles.js --replace gh-pages/public/*.css","gh-pages:build":"babel-node gh-pages","gh-pages:publish":"gh-pages -d gh-pages/public"},"ava":{"files":["test/*.spec.js"],"source":["src/**/*.js"],"require":["babel-register","./test/avasetup"],"babel":"inherit"},"gitHead":"56365da6254e5b5e67aacf94eb0babeea160cbab","description":"Beautiful share buttons for social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte and Odnoklassniki.","_id":"social-likes-next@1.0.0","_shasum":"5e847f88a0a06982abbf444f91606d55279876e1","_from":".","_npmVersion":"3.8.2","_nodeVersion":"5.7.1","_npmUser":{"name":"sapegin","email":"artem@sapegin.ru"},"dist":{"shasum":"5e847f88a0a06982abbf444f91606d55279876e1","tarball":"https://registry.npmjs.org/social-likes-next/-/social-likes-next-1.0.0.tgz","integrity":"sha512-ceqfu3F3w2WCu6CYkcLm8a++hpq1FY6uaBi3OIW56zS+ou+P+OpFR56AZmxuMYl4Sg5KqTdeIp8zVmVxXn4nsw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEipW/FMsEvi3Kq3cV2npDdNfTQNjHRrI+jXYwLYP9mgAiEAp3ZXwnCAfTPkvu6vbnH67cI2je37vQaIjf4LC3dwA6Y="}]},"maintainers":[{"name":"sapegin","email":"artem@sapegin.ru"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/social-likes-next-1.0.0.tgz_1459932421533_0.036450645653530955"}},"1.1.0":{"name":"social-likes-next","version":"1.1.0","main":"lib/index.js","files":["lib","dist","contrib"],"homepage":"https://github.com/sapegin/social-likes-next","author":{"name":"Artem Sapegin","url":"http://sapegin.me/"},"repository":{"type":"git","url":"git://github.com/sapegin/social-likes-next.git"},"bugs":{"url":"https://github.com/sapegin/social-likes-next/issues"},"license":"MIT","engines":{"node":">=0.12.0"},"dependencies":{"deepmerge":"~0.2.10"},"devDependencies":{"autoprefixer":"~6.3.3","ava":"~0.13.0","babel-cli":"~6.6.5","babel-core":"~6.7.2","babel-eslint":"~5.0.0","babel-loader":"~6.2.4","babel-preset-es2015":"~6.6.0","babel-register":"~6.7.2","cpy-cli":"~1.0.0","cssnano":"~3.5.2","domino":"~1.0.23","eslint":"~1.10.3","eslint-config-tamia":"~1.2.0","fledermaus":"~4.1.2","gh-pages":"~0.11.0","html-webpack-plugin":"~2.10.0","mkdirp":"~0.5.1","npm-run-all":"~1.5.3","postcss-cli":"~2.5.1","postcss-initial":"~1.5.0","rimraf":"~2.5.2","stylus":"~0.54.2","tamia":"~2.0.3","webpack":"~1.12.14","webpack-dev-server":"~1.14.1","webpack-merge":"~0.8.3"},"scripts":{"test":"npm-run-all -p lint test:ava","test:ava":"ava","test:watch":"ava --watch","start":"webpack-dev-server --port 8506 --host 0.0.0.0 --config build/webpack.config.development.js --content-base lib","prepublish":"npm-run-all test clean build","postpublish":"npm run gh-pages","lint":"eslint src test","build":"npm-run-all build:* build:*:* skins skins:min","build:lib":"babel src --out-dir lib","build:umd":"webpack --config build/webpack.config.umd.js","build:umd:min":"webpack --config build/webpack.config.umd-min.js","clean":"rimraf lib dist","skins":"mkdirp lib && stylus skins --out lib && postcss --use autoprefixer --use postcss-initial -d lib lib/*.css","skins:min":"mkdirp dist && stylus skins --out dist && postcss --use autoprefixer --use postcss-initial --use cssnano --replace dist/*.css","skins:watch":"stylus skins --out lib --watch","gh-pages":"npm-run-all gh-pages:*","gh-pages:copy":"cpy 'dist/*.min.js' gh-pages/public","gh-pages:styles":"stylus gh-pages --out gh-pages/public && postcss --use autoprefixer --use postcss-initial --use cssnano --use $(pwd)/gh-pages/fixstyles.js --replace gh-pages/public/*.css","gh-pages:build":"babel-node gh-pages","gh-pages:publish":"gh-pages -d gh-pages/public"},"ava":{"files":["test/*.spec.js"],"source":["src/**/*.js"],"require":["babel-register","./test/avasetup"],"babel":"inherit"},"gitHead":"2efcad5cea5426811e291f8740c28f51ed546ca8","description":"[![Build Status](https://travis-ci.org/sapegin/social-likes-next.svg)](https://travis-ci.org/sapegin/social-likes-next) [![npm](https://img.shields.io/npm/v/social-likes-next.svg)](https://www.npmjs.com/package/social-likes-next)","_id":"social-likes-next@1.1.0","_shasum":"4a5edd40f78e71854b9e2328ce28ef85d949782f","_from":".","_npmVersion":"3.6.0","_nodeVersion":"5.7.0","_npmUser":{"name":"sapegin","email":"artem@sapegin.ru"},"maintainers":[{"name":"sapegin","email":"artem@sapegin.ru"}],"dist":{"shasum":"4a5edd40f78e71854b9e2328ce28ef85d949782f","tarball":"https://registry.npmjs.org/social-likes-next/-/social-likes-next-1.1.0.tgz","integrity":"sha512-v2tta2ctNNePApiQ4Xf344jc4gxhpw2RoxQKnndp1smKFJoTg35yu1weKLeZh/zk117DS6vZq0d7eDBv1CLk8g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2LZpFmMVYOAGiJ/SiwOKwYdSiXrVbGHzHXAS9A3G9QAiBi3JnvitLqkLqyzBCCIAO7Q810QZCkKUU0NdrPjZKyJw=="}]},"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/social-likes-next-1.1.0.tgz_1463514960729_0.04476051009260118"}}},"readme":"# Social Likes Next\n\n[![Build Status](https://travis-ci.org/sapegin/social-likes-next.svg)](https://travis-ci.org/sapegin/social-likes-next)\n[![npm](https://img.shields.io/npm/v/social-likes-next.svg)](https://www.npmjs.com/package/social-likes-next)\n\nBeautiful share buttons for social networks: Facebook, Twitter, Google+, Pinterest, Telegram, LinkedIn, Vkontakte and Odnoklassniki.\n\n[![](http://wow.sapegin.me/3S0e0B1j372d/social-likes-next.png)<br>**See the demo!**](http://social-likes-next.js.org/)\n\n## Features\n\n- Easy to install.\n- Beautiful and all in one style (with three different skins).\n- Won’t explode your page’s layout.\n\nThis is a modern version of the [Social Likes for jQuery](https://github.com/sapegin/social-likes). Main distinctions:\n\n- No jQuery dependency.\n- No counters.\n- No single button mode.\n- SVG icons.\n- Supports IE11+.\n\n## Installation and configuration\n\n### Installation from npm\n\nIt’s recommended to install the `social-likes-next` from npm:\n\n```bash\nnpm install --save social-likes-next\n```\n\nAnd use a bundler like Webpack or Browserify:\n\n```javascript\n// ES6\nimport 'social-likes-next';\nimport 'social-likes-next/lib/social-likes_flat.css';  // Flat skin\n// import 'social-likes-next/lib/social-likes_light.css';  // Light skin\n// import 'social-likes-next/lib/social-likes_birman.css';  // Birman skin\n\n// ES5\nrequire('social-likes-next');\nrequire('social-likes-next/lib/social-likes_flat.css');  // Flat skin\n// require('social-likes-next/lib/social-likes_light.css');  // Light skin\n// require('social-likes-next/lib/social-likes_birman.css');  // Birman skin\n```\n\n### Installation from CDN\n\nYou can also [use npmcdn](https://npmcdn.com/social-likes-next/):\n\n1. Add a script to your the bottom of your HTML’s `<body>`:\n\n```html\n<script src=\"https://npmcdn.com/social-likes-next/dist/social-likes.min.js\"></script>\n```\n\n2. Add a stylesheet.\n\nChoose one of the CSS files:\n\n* `social-likes_flat.css`: Flat skin;\n* `social-likes_light.css`: Light skin;\n* `social-likes_birman.css`: Birman skin.\n\nAnd add it to your HTML’s `<head>`:\n\n```html\n<link rel=\"stylesheet\" href=\"https://npmcdn.com/social-likes-next/dist/social-likes_flat.css\">\n```\n\n### Adding button to your page\n\nAdd this HTML where you want to have share buttons:\n\n```html\n<div class=\"social-likes\">\n\t<div data-service=\"facebook\" title=\"Share link on Facebook\">Facebook</div>\n\t<div data-service=\"twitter\" title=\"Share link on Twitter\">Twitter</div>\n\t<div data-service=\"plusone\" title=\"Share link on Google+\">Google+</div>\n\t<!-- <div data-service=\"pinterest\" title=\"Share link on Pinterest\" data-media=\"image link, required\">Pinterest</div> -->\n\t<!-- <div data-service=\"vkontakte\" title=\"Share link on Vkontakte\">Vkontakte</div> -->\n\t<!-- <div data-service=\"odnoklassniki\" title=\"Share link on Odnoklassniki\">Odnoklassniki</div> -->\n</div>\n```\n\nYou can modify the labels or remove them.\n\n## Advanced configuration\n\n### Layout\n\n#### Default\n\nAll buttons in a row.\n\n```html\n<div class=\"social-likes\">\n\t<div data-service=\"facebook\" title=\"Share link on Facebook\">Facebook</div>\n\t...\n</div>\n```\n\n#### Vertical\n\nAll buttons in a column.\n\n```html\n<div class=\"social-likes social-likes_vertical\">\n\t<div data-service=\"facebook\" title=\"Share link on Facebook\">Facebook</div>\n\t...\n</div>\n```\n\n### Options\n\n`url`\n\nURL of a shareable page. Current page by default.\n\n`title`\n\nTitle for Twitter and Vkontakte. Current page’s title by default.\n\nExamples:\n\n```html\n<div class=\"social-likes\" data-url=\"http://landscapists.info/\" data-title=\"Landscapists of Russia\">\n\t…\n</div>\n```\n\nor:\n\n```html\n<div class=\"social-likes\">\n\t<div data-service=\"twitter\" title=\"Share link on Twitter\" data-title=\"Landscapists of Russia\">Twitter</div>\n\t…\n</div>\n```\n\n### Services specific options\n\n#### Twitter\n\nYou can specify `via` (site’s or your own Twitter) and `related` (any other Twitter you want to advertise) on Twitter button:\n\n```html\n<div data-service=\"twitter\" data-via=\"sapegin\" data-related=\"Landscapists\">Twitter</div>\n```\n\n#### Pinterest\n\nYou should specify an image URL via `data-media` attribute on Pinterest button:\n\n```html\n<div data-service=\"pinterest\" data-media=\"http://example.com/image/url.jpg\">Pinterest</div>\n```\n\n### Manual initialization\n\nCould be useful on dynamic (AJAX) websites.\n\n```html\n<div id=\"share\">\n\t<div data-service=\"facebook\">Facebook</div>\n\t...\n</div>\n```\n\n```javascript\nimport socialLikes from 'social-likes-next';\nsocialLikes(document.getElementById('share'));\n```\n\nYou can also specify options:\n\n```javascript\nimport socialLikes from 'social-likes-next';\nsocialLikes(document.getElementById('share'), {\n\turl: 'http://landscapists.info/',\n\ttitle: 'Landscapists of Russia',\n});\n```\n\n### Dynamic URL changing\n\nYou can dynamically replace URL, title and Pinterest image without reinitialization.\n\n```html\n<div id=\"share2\" class=\"social-likes\" data-url=\"http://example.com/\" data-title=\"My example\">\n\t<div data-service=\"facebook\">Facebook</div>\n\t...\n</div>\n```\n\n```javascript\nsocialLikes(document.getElementById('share2'), {\n\turl: 'http://github.com/',\n\ttitle: 'GitHub',\n\tdata: {\n\t\tmedia: 'http://birdwatcher.ru/i/userpic.jpg'  // Image for Pinterest button\n\t}\n});\n```\n\n### Adding your own button\n\nDefine `socialLikesButtons` object:\n\n```javascript\nvar socialLikesButtons = {\n\tgithub: {\n\t\ticon: 'M8 .173C3.58.173...',\n\t\tclickUrl: 'http://github.com/sapegin'\n\t}\n};\n```\n\nAdd some CSS:\n\n```css\n.social-likes__icon_github {\n\tcolor: #333;\n}\n.social-likes__widget_github:hover,\n.social-likes__widget_github:active,\n.social-likes__widget_github:focus {\n\tbackground: #333;\n\tborder-color: #333;\n}\n```\n\nAnd use it like any other button:\n\n```html\n<div data-service=\"github\">GitHub</div>\n```\n\nSee sources (`src` folder) for available options and class names and `contrib` folder for custom buttons examples.\n\n\n## FAQ\n\n### Likes or shares?\n\nThis 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.\n\n¹ 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.\n\n### Why there’s no counters?\n\nTwitter 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.\n\nI believe that all other major social networks will follow Twitter and remove counters from their share buttons in the future.\n\nCounters (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.\n\n### Why only IE11+ is supported?\n\nMicrosoft 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.\n\n### How to change title, description and image?\n\nYou 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)).\n\nYou 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.\n\n```html\n<meta property=\"og:type\" content=\"article\">\n<meta property=\"og:url\" content=\"{page_url}\">\n<meta property=\"og:title\" content=\"{title}\">\n<meta property=\"og:description\" content=\"{description}\">\n<meta property=\"og:image\" content=\"{image_url}\">\n<meta name=\"twitter:card\" content=\"summary\">\n<meta name=\"twitter:site\" content=\"@SiteTwitter\">\n<meta name=\"twitter:creator\" content=\"@sapegin\">\n```\n\nSee also [Facebook’s sharing tips](https://developers.facebook.com/docs/sharing/best-practices).\n\nIf 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).\n\n## Troubleshooting\n\n### The buttons don’t work, displayed without design or don’t displayed at all\n\nFirst look at your [browser’s console](http://wickedlysmart.com/hfjsconsole/).\n\nIf you don’t see any errors check the following:\n\n1. `social-likes.js` is included and the path is correct.\n\n2. `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.\n\nSo you need your page to look like this:\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset=\"utf-8\">\n\t<title>Welcome to my site!</title>\n\t<link href=\"social-likes_birman.css\" rel=\"stylesheet\">\n\t...\n\t<script src=\"social-likes.js\"></script>\n\t...\n```\n\n## Release History\n\nThe changelog can be found on the [Releases page](https://github.com/sapegin/social-likes-next/releases).\n\n## Contributing\n\nEveryone is welcome to contribute. Please take a moment to review the [contributing guidelines](Contributing.md).\n\n## Author\n\n* [Artem Sapegin](http://sapegin.me/)\n\n\n---\n\n## License\n\nThe MIT License, see the included [license.md](license.md) file.\n","maintainers":[{"name":"sapegin","email":"artem@sapegin.ru"}],"time":{"modified":"2022-06-26T21:50:15.279Z","created":"2016-03-10T22:02:38.520Z","1.0.0-rc":"2016-03-10T22:02:38.520Z","1.0.0":"2016-04-06T08:47:03.725Z","1.1.0":"2016-05-17T19:56:03.854Z"},"homepage":"https://github.com/sapegin/social-likes-next","repository":{"type":"git","url":"git://github.com/sapegin/social-likes-next.git"},"author":{"name":"Artem Sapegin","url":"http://sapegin.me/"},"bugs":{"url":"https://github.com/sapegin/social-likes-next/issues"},"license":"MIT","readmeFilename":"Readme.md"}