Social Likes Next
Beautiful share buttons for social networks: Facebook, Twitter, Google+, Pinterest, Telegram, LinkedIn, Vkontakte and Odnoklassniki.
- Easy to install.
- Beautiful and all in one style (with three different skins).
- Won’t explode your page’s layout.
This is a modern version of the Social Likes for jQuery. Main distinctions:
- No jQuery dependency.
- No counters.
- No single button mode.
- SVG icons.
- Supports IE11+.
Installation and configuration
Installation from npm
It’s recommended to install the
social-likes-next from npm:
npm install --save social-likes-next
And use a bundler like Webpack or Browserify:
// ES6;; // Flat skin// import 'social-likes-next/lib/social-likes_light.css'; // Light skin// import 'social-likes-next/lib/social-likes_birman.css'; // Birman skin// ES5;; // Flat skin// require('social-likes-next/lib/social-likes_light.css'); // Light skin// require('social-likes-next/lib/social-likes_birman.css'); // Birman skin
Installation from CDN
You can also use npmcdn:
- Add a script to your the bottom of your HTML’s
- Add a stylesheet.
Choose one of the CSS files:
social-likes_flat.css: Flat skin;
social-likes_light.css: Light skin;
social-likes_birman.css: Birman skin.
And add it to your HTML’s
Adding button to your page
Add this HTML where you want to have share buttons:
Google+<!-- <div data-service="pinterest" title="Share link on Pinterest" data-media="image link, required">Pinterest</div> --><!-- <div data-service="vkontakte" title="Share link on Vkontakte">Vkontakte</div> --><!-- <div data-service="odnoklassniki" title="Share link on Odnoklassniki">Odnoklassniki</div> -->
You can modify the labels or remove them.
All buttons in a row.
All buttons in a column.
URL of a shareable page. Current page by default.
Title for Twitter and Vkontakte. Current page’s title by default.
Services specific options
You can specify
via (site’s or your own Twitter) and
related (any other Twitter you want to advertise) on Twitter button:
You should specify an image URL via
data-media attribute on Pinterest button:
Could be useful on dynamic (AJAX) websites.
You can also specify options:
Dynamic URL changing
You can dynamically replace URL, title and Pinterest image without reinitialization.
Adding your own button
var socialLikesButtons =github:icon: 'M8 .173C3.58.173...'clickUrl: '';
Add some CSS:
And use it like any other button:
See sources (
src folder) for available options and class names and
contrib folder for custom buttons examples.
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.
Why there’s no counters?
Twitter counter API was disabled by Twitter in November 2015, they’ve also removed the counter from their native share button.
I believe that all other major social networks will follow Twitter and remove counters from their share buttons in the future.
Why only IE11+ is supported?
Microsoft don’t support older versions of Internet Explorer since January 2016 so it’s a great opportunity for us, developers, to do the same.
How to change title, description and image?
See also Facebook’s sharing tips.
The buttons don’t work, displayed without design or don’t displayed at all
First look at your browser’s console.
If you don’t see any errors check the following:
social-likes.jsis included and the path is correct.
social-likes_birman.cssis included in the of your page and the path is correct.
So you need your page to look like this:
Welcome to my site!......
The changelog can be found on the Releases page.
Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.
The MIT License, see the included license.md file.