Social share buttons using Font Awesome

Social share icon buttons (G+, Facebook, Twitter, LinkedIn, Pinterest, SU); jQuery plugin + responsive styles

by Juan Muñoz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="post">
    <p>Default style:</p>
    <div class="example hidden-counter"></div>
    <div class="example hidden-counter horizontal"></div>
    
    <p>Image sharing:</p>
    <div class="example image">
        <img src="http://www.adweek.com/files/uploads/iStock-Unfinished-Business-6.jpg" width="500" />
    </div>
    
    <p>Share counter top:</p>
    <div class="example counter-top"></div>
    <div class="example counter-top horizontal"></div>
    
    <p>Share counter bottom:</p>
    <div class="example counter-bottom"></div>
    <div class="example counter-bottom horizontal"></div>    
</div>

SCSS

@mixin common-share-button() {
  color: white;

  a {
    color: inherit;
    display: block;
    width: 100%;
    outline: 0;
  }

  .counter {
    font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-seriff;
    line-height: 1em;
    padding: 2px 0px 1px 0px;
    &:empty {
      display: none;
    }
  }
}

@mixin default-share-button($background) {
  @include common-share-button();
  background: $background;

  &:hover {
    background: lighten($background, 7%);
    .counter {
      background: darken($background, 3%);
    }
  }

  .counter {
    background: darken($background, 10%);
    &:hover {
      background: darken($background, 3%);
    }
  }
}

@mixin image-share-button($hover-background) {
  @include common-share-button();
  $background: gray;
  background: $background;
  opacity: 0.5;

  &:hover {
    opacity: 1;
    background: $hover-background;
    .counter {
      background: darken($hover-background, 10%);
    }
  }

  .counter {
    background: darken($background, 10%);
    &:hover {
      background: darken($hover-background, 10%);
    }
  }
}

.share {
  .button {
    font-size: 24px;
    line-height: 1em;
    text-align: center;
    width: 40px;

    i.fa {
      padding: 6px 5px;
    }
    &.twitter {
      @include default-share-button(#5EA9DD);
    }
    &.google-plus {
      @include default-share-button(#CD3C2A);
    }
    &.pinterest {
      @include default-share-button(#BC071B);
    }
    &.facebook {
      @include default-share-button(#4966B6);
    }
    &.linkedin {
      @include default-share-button(#1783BC);
    }
    &.stumbleupon {
      @include default-share-button(#EA4B24);
    } 
  }

  &.image {
    .button {
      &.twitter {
        @include image-share-button(#5EA9DD);
      }
      &.google-plus {
        @include image-share-button(#CD3C2A);
      }
      &.pinterest {
        @include image-share-button(#BC071B);
      }
      &.facebook {
        @include image-share-button(#4966B6);
      }
      &.linkedin {
 ...

JavaScript

$(function () {
  var knownButtons = ['google-plus', 'twitter', 'pinterest', 'facebook', 'stumbleupon', 'linkedin'];

  /**
   * jQuery plugin - create share buttons
   *
   * @param {Object} [options]
   * @param {string[]} [options.buttons] - list of share buttons to be shown
   * @param {string} [options.url] - shared URL (by default current)
   * @param {string} [options.media] - shared image (optionally used by Pinterest)
   * @param {string|boolean} [options.counter=none] - type of display for share counter (top|bottom|none)
   * @param {string} [options.className] - CSS class for the root DOM element
   */
  $.fn.sharify = function (options) {
    var settings = $.extend({
      buttons: knownButtons.slice(),
      url: document.location.origin + document.location.pathname,
      media: null,
      counter: false,
      className: ''
    }, options);

    settings.buttons.contains = function (item) {
      return this.indexOf(item) > -1;
    };

    if (settings.counter && settings.counter !== 'none' && settings.counter !== 'bottom') {
      settings.counter = 'top';
    }
    else if (!settings.counter) {
      settings.counter = 'none';
    }

    return this.each(function () {
      var $share = $('<div/>', {class: $.trim(['share', 'counter-' + settings.counter, settings.className].join(' '), settings.className)});
      $.each(settings.buttons, function (index, name) {
        if (knownButtons.indexOf(name) > -1) {
          $share.append(createButton(name, settings));
        }
      });

      enableShareClick($share, settings);
      if (settings.counter !== 'none') {
        setShareCount($share, settings);
      }
      $(this).append($share);
    });
  };

  function createButton(name, settings) {
    var $button = $('<div/>', {'class': ['button', name].join(' ')});
    switch (settings.counter) {
      case 'top':
        $button.append(
          $('<div/>', {'class': 'counter'})).append(
          $('<a/>', {'href': '#'}).append(
           ...