Social Likes
Try the all new Social Likes Next: no jQuery, no counters, Retina, IE11+, improved skins.
Beautiful share buttons with counters for popular social networks: Facebook, Twitter, Google+, Pinterest, Vkontakte, etc. Uses jQuery.
Features
- Easy to install.
- Beautiful and all in one style (with three different skins).
- Won’t explode your page’s layout.
Installation and configuration
Use interactive builder to generate the code.
Or install via npm: npm install --save social-likes
.
Advanced configuration
Layout
Default
All buttons in a row.
Facebook ...
Vertical
All buttons in a column.
Facebook ...
Single button
One button with a counter (sum of all the networks). Opens popup with like buttons in vertical layout. Use data-single-title
attribute to change button title.
Facebook ...
Icons only
If you want to remove button titles add social-likes_notext
class to make it looks better.
...
Options
Options define via HTML data attributes or JavaScript parameters object.
url
URL of shareable page. Current page by default.
title
Title for Twitter, Vkontakte and LiveJournal. Current page’s title by default.
html
HTML code for LiveJournal button. By default tag with link to current page.
counters
Disables “likes” counters when “no”. Default: “yes”.
zeroes
Show counters even when number is 0
. Default: “no”.
single-title
Share button title for “single button” mode. Default: “Share”.
Examples:
…
…
;
Services specific options
You can specify via
(site’s or your own Twitter) and related
(any other Twitter you want to advertise) values for <div class="twitter">
:
Twitter
You should specify an image URL via data-media attribute on <div class="pinterest">
:
Pinterest
Manual initialization
Could be useful on dynamic (AJAX) websites.
Facebook ...
;
Dynamic URL changing
You can dynamically replace URL, title and Pinterest image without reinitialization.
Facebook ...
;
Refreshing counters
By default counters for any unique URL requested only once. You can force new request with forceUpdate
option:
;
Events
counter.social-likes
Triggers for every counter.
;
ready.social-likes
Triggers after all counters loaded.
;
popup_opened.social-likes
Triggers after popup window opened.
;
popup_closed.social-likes
Triggers after popup window closed.
;
Adding your own button
You can find some custom buttons in contrib
folder.
Define socialLikesButtons
object:
var socialLikesButtons = surfingbird: popupUrl: 'http://surfingbird.ru/share?url={url}' popupWidth: 650 popupHeight: 500 ;
Or with a custom click handler:
var socialLikesButtons = livejournal: { // this.widget.data('something') } ;
Add some CSS:
And use it like any other button:
Surf
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. It works for Facebook, Twitter, Google+, Pinterest and Vkontakte).
You can add additional Twitter data using Twitter Card. You have to approve every type of Twitter Card.
If you’re experiencing any problems with meta data try Open Graph Debugger and Twitter Card Validator.
How to fix Twitter counter
Twitter counter API was disabled by Twitter but you can replace it with OpenShareCount. It’s free but you have to register your site there.
-
Create account at OpenShareCount.
-
Add this script before you include
social-likes.js
:
How to use Social Likes with Wordpress, etc.
See wiki.
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.
;
Troubleshooting
The buttons don’t work, displayed without design or don’t displayed at all
First look at your browser’s console. 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:
If you don’t see any error check the following:
-
social-likes.js
is included after jQuery and the path is correct. -
social-likes_flat.css
orsocial-likes_classic.css
orsocial-likes_birman.css
is included in of your page and the path is correct.
So you need your page to look like this:
Welcome to my site! ...
Counters don’t work
Twitter counter was disabled in 3.0.15.
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.
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 (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 on the Releases page.
Contributing
Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.
Author
License
The MIT License, see the included license.md file.