sharrre

http://sharrre.com/#documentation

by bluetidepro

HTML

<script src="https://raw.github.com/Julienh/Sharrre/master/jquery.sharrre.min.js"></script>
  <div id="twitter" data-url="http://blog.iamzachreed.com/post/22658233826/is-a-college-degree-necessary-to-succeed-in-the" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="Tweet"></div>
  <div id="facebook" data-url="http://blog.iamzachreed.com/post/22658233826/is-a-college-degree-necessary-to-succeed-in-the" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="Like"></div>

CSS

body{margin:55px;}
  .sharrre{
    margin:0 16px 0 0;
    float:left;
  }
  .sharrre .count {
    font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, "Lucida Grande", sans-serif; 
    margin-top:2px;
    margin-left:7px;
    float:right;
    text-decoration:none;
    color:#525b67;
    display:block;
    font-size:13px;
    font-weight:normal;
    line-height:21px;
    height:22px;
    position:relative;
    text-align:center;
    width:auto;
    padding:0 8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    border:1px solid #b2c6cc;
    background: #fbfbfb;
  }
  .sharrre .count:before, .sharrre .count:after {
    content:'';
      display:block;
      position:absolute;
      left:-6px;
    top:5px;
      width:0;
      height:0;
  }
  .sharrre .count:before {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid #b2c6cc; 
  }
  .sharrre .count:after {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; 
    border-right:5px solid #fbfbfb;
    margin:1px 0 0 1px;
  }
  .sharrre .share {
    font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, "Lucida Grande", sans-serif; 
    float:right;
    color:#FFFFFF;
    display:block;
    font-size:12px;
    font-weight:bold;
    height:22px;
    line-height:21px;
    margin-top:0;
    padding:0;
    text-align:center;
    text-decoration:none;
    width:auto;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
  }

#twitter .share, #facebook .share{position:relative;
    text-shadow: 1px 0px 0px #266094; color:#fff; border:1px solid #266094; border-bottom:4px solid #266094; -moz-box-shadow:inset 0 0 0 1px #62baf3, 0 1px 2px 0  rgba(0,0,0,0.2); -webkit-box-shadow:inset 0 0 0 1px #62baf3, 0 1px 2px 0  rgba(0,0,0,0.2); -webkit-background-clip:padding-box; padding-left:34px;...

JavaScript

$(function() {
    $('#twitter').sharrre({
        share: {
            twitter: true
        },
        enableHover: false,
        enableTracking: true,
        buttons: {
            twitter: {
                via: 'bluetidepro',
                related: 'bluetidepro'
            }
        },
        click: function(api, options) {
            api.simulateClick();
            api.openPopup('twitter');
        }
    });
    $('#facebook').sharrre({
        share: {
            facebook: true
        },
        enableHover: false,
        enableTracking: true,
        click: function(api, options) {
            api.simulateClick();
            api.openPopup('facebook');
        }
    });
});