Display Social Share Counts using Socialight.js

Preview:

Description:

Socialight.js is a Vanilla JS plugin used to display share counts from major social networking services. Fully customizable via CSS.

Supported social media:

• Facebook
• Twitter
• Google Plus (plus.php is required)
• Pinterest
• Linkedin
• Buff

How to use it:

Load the Socialight.js at the end of your web page.

<script src="socialight.min.js"></script>

Create a DIV element and use data-url attribute to specify the URL.

<div class="social" data-url="https://cssscript.com/"></div>

The JavaScript.

(function(window, document, undefined) {
  "use strict";
  function SocialightFacade ($element) {
      var socialight = new Socialight({
        container: $element,
        url: $element.getAttribute("data-url")
      });
      socialight.add(new Twitter());
      socialight.add(new Facebook());
      socialight.add(new GooglePlus());
      socialight.add(new LinkedIn());
      socialight.add(new Buffer());
      socialight.add(new Pinterest());
      socialight.draw();
  }
  var el = document.querySelectorAll(".social"), i, len;
  for (i = 0, len = el.length; i < len; i++) {
      SocialightFacade(el[i]);
  }
}(window, document));

The sample CSS to custom the counters and social icons.

.social {
  margin-bottom: 35px;
  text-align: center;
}
.social .shares {
  background-position: center top;
  background-repeat: no-repeat;
  display: inline-block;
  min-width: 60px;
  padding: 32px 16px;
  text-align: center;
}
.share-buffer { background-image: url('img/buffer.png'); }
.share-twitter { background-image: url('img/twitter.png'); }
.share-facebook { background-image: url('img/facebook.png'); }
.share-linkedin { background-image: url('img/linkedin.png'); }
.share-gplus { background-image: url('img/googleplus.png'); }
.share-pinterest { background-image: url('img/pinterest.png'); }

Changelog:

02/16/2016

• Remove unsafe headers