Custom Share Icons (with count)

Custom Share Icons (with count).markdown

Custom Share Icons (with count)

The 1st-party sharing icons that are currently being provided are absolute garbage to work with. This pen tries to solve that by utilizing some simple AJAX calls that don't require the use of an API (see the note about Google+).

Since we aren't utilizing any API keys we don't need to worry about limits on requests - yay!

A Pen by Gray Gilmore on CodePen.

License.

index.html

<h1>Custom Share Count Icons (+ share ability)</h1>

<!-- 
  Make sure to replace {URL} with your own (and remove the curly brackets!)
-->

<a href="//www.facebook.com/sharer.php?u={URL}" class="facebook">Facebook (<span class="share-count"></span>)</a>

<a href="//twitter.com/share?url={URL}" class="twitter">Twitter (<span class="share-count"></span>)</a>

<a href="//pinterest.com/pin/create/button/?url={URL}&media={MEDIA}&description={DESCRIPTION}" class="pinterest">Pinterest (<span class="share-count"></span>)</a>

<a href="//plus.google.com/share?url={URL}" class="google-plus">Google +1</a>

<p>Unfortunately, Google+ requires an API Key so we won't be including a share count for it.</p>

script.js

var permalink = 'http://codepen.io';

var getTwitterCount = function () {
  $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url='+permalink+'&callback=?', function(data){
    var twitterShares = data.count;
    $('.twitter .share-count').text(twitterShares);
  });
};

getTwitterCount();


var getFacebookCount = function () {
  $.getJSON('http://graph.facebook.com/?ids='+permalink+'&callback=?', function(data){
    var facebookShares = data[permalink].shares;
    $('.facebook .share-count').text(facebookShares);
  });
};

getFacebookCount();


var getPinterestCount = function () {
  $.getJSON('http://api.pinterest.com/v1/urls/count.json?url=' + permalink + '&callback=?', function(data) {
    var pinterestShares = data.count;
    $('.pinterest .share-count').text(pinterestShares);
  });
};

getPinterestCount();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

body {
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-size: 14px;
}

@font-face {
  font-family: 'social-icons';
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/70/social-icons.eot');
  src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/70/social-icons.eot?#iefix') format('embedded-opentype'),
      url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/70/social-icons.woff') format('woff'),
      url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/70/social-icons.ttf') format('truetype'),
      url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/70/social-icons.svg#social-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

a {
  padding: 0 17px 0 50px;
  line-height: 40px;
  color: white;
  text-decoration: none;
  @include inline-block;
  margin-right: 3px;
  position: relative;

  &:before {
    font-family: 'social-icons';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
  }
}

.facebook {
	background: darken(#3b5998, 15%);
	&:before {
	  content: "\e600";
    background: #3b5998;
	}
}
.twitter {
	background: darken(#00aced, 15%);
	&:before {
    	background: #00aced;
	  content: "\e601";
	}
}
.pinterest {
	background: darken(#cb2027,15%);
	&:before {
    	background: #cb2027;
	  content: "\e602";
	}
}
.google-plus {
	background: darken(#dd4b39,15%);
	&:before {
    	background: #dd4b39;
	  content: "\e603";
	}
}