jQuery Plugin For Easily Configurable Social Buttons - socialShare.js

socialShare.js is a jQuery plugin to create fully configurable social buttons with counters for sharing your website over 5 major social networking sites: Facebook, Google Plus, Twitter, LinkedIn and Pinterest. The plugin uses Donreach's Social Share Count API to get/display counts of all the social sites.

How to use it:

1. Include the Font Awesome 4 for social icons (OPTIONAL).

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. Build the Html structure for the social share buttons with counters.

<div class="social-share">
  <div class="group facebook-share">
    <div class="count facebook-count"></div>
    <i class="fa fa-caret-down"></i>
    <button class="fb"><i class="fa fa-facebook"></i> facebook</button>
  </div>
  <div class="group gplus-share">
    <div class="count gplus-count"></div>
    <i class="fa fa-caret-down"></i>
    <button class="gp"><i class="fa fa-google-plus"></i> google-plus</button>
  </div>
  <div class="group linkedin-share">
    <div class="count linkedin-count"></div>
    <i class="fa fa-caret-down"></i>
    <button class="linkedin"><i class="fa fa-linkedin"></i> linkedin</button>
  </div>
  <div class="group twitter-share">
    <div class="count twitter-count"></div>
    <i class="fa fa-caret-down"></i>
    <button class="twitter"><i class="fa fa-twitter"></i> twitter</button>
  </div>
  <div class="group pinterest-share">
    <div class="count pinterest-count"></div>
    <i class="fa fa-caret-down"></i>
    <button class="pinterest"><i class="fa fa-pinterest"></i> pinterest</button>
  </div>
</div>

3. The primary CSS to style the social buttons & counters

.social-share {
  color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -400px;
  top: 50%;
  margin-top: -90px;
}

.social-share .group {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0 5px;
}

.social-share button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
  cursor: inherit;
  border: 0;
  color: #ffffff;
  width: 150px;
  outline: 0;
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}

.fb { background-color: #306199; }

.fb:hover { background-color: #244872; }

.count {
  background-color: #fff;
  color: #565656;
  border-radius: 2px;
  margin-bottom: 10px;
  text-align: center;
  padding: 10px;
  height: 40px;
}

.fa-caret-down {
  position: absolute;
  margin-top: -22px;
  text-align: center;
  right: 10px;
  font-size: 28px;
}

.gp { background-color: #e93f2e; }

.gp:hover { background-color: #ce2616; }

.linkedin { background-color: #007bb6; }

.linkedin:hover { background-color: #005983; }

.twitter { background-color: #26c4f1; }

.twitter:hover { background-color: #0eaad6; }

.pinterest { background-color: #b81621; }

.pinterest:hover { background-color: #8a1119; }

4. Include jQuery library and the jQuery socialShare.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="src/jquery.socialshare.js"></script>

5. Initialize the plugin.

$('.social-share').socialShare({
  // OPTIONS HERE
);

6. All the default plugin options.

$('.social-share').socialShare({

// The URL you wish to share
url            : window.location.href,

// Can be set to be shared as description on twitter
description    : $('meta[name=description]').attr("content"),

// The title you wish to share
title          : $('title').text(),

// Enable/disable social networking services
twitter        : true,
facebook       : true,
pinterest      : true,
linkedIn       : true,
gPlus          : true,

// URL of the image that will be shared with the links
image          : null,

// To convert count numbers into words
toWord         : true,

// String containing the via value for twitter sharing
twitterVia     : null,

// Comma separated values to be shared as hashtags in a single string
twitterHashTags: null

);

Change logs:

2015-11-26

• Fixed anyorigin.com not responding

2015-08-23

• IE compatibility issue solved

2015-06-10

• counts fixed

2015-05-29

• enhancement : option to bypass the fetch for count added

2015-05-27

• bugs fixed.

About author:

Author: Ritesh Kumar

Website: http://rkritesh.in/socialShare.js

---

This awesome jQuery plugin is developed by ritz078. For more Advanced Usages, please check the demo page or visit the official website.