Свои красивые социальные кнопки

Какой верстальщик хоть раз не верстал эти кастомные социальные кнопки? Был ли у дизайнера отходняк и мрачное настроение? Или дизайнера только вштырило, и он хотел сделать всё максимально легким и воздушным?

Не важно в каком настроение был дизайнер, на выходе он всё равно выдавал макет, который нужно было сверстать, в том числе эти новые кастомные кнопки социальных сетей, которые красиво вписывались в макет. Хорошо если эти кнопки были просто ссылками на сообщества в соцсетях, в противном случае это были кнопки лайков с кастомным дизайном. И тут, помимо верстки, приходилось прикручивать кусок JavaScript’а, который как минимум подымал окно публикации в соцсети, а как максимум ещё и показывал бы счетчик шар.

После очередного такого макета я решил написать универсальное решение, чтобы в следующий раз не писать всё с нуля.

HTML

<h1>Social Share Buttons + Counters</h1>
<div class="social">
  <div class="social__item">
    <span class="fa fa-facebook" data-count="..." data-social="fb"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-vk" data-count="..." data-social="vk"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-twitter" data-count="..." data-social="tw"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-linkedin" data-count="..." data-social="ln"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-pinterest" data-count="..." data-social="pt"></span>
  </div>
</div>

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

$colors: (
  facebook: #3b5998,
  vk: #45668e,
  twitter: #00aced,
  pinterest: #cb2027,
  linkedin: #007bb6,
  google-plus: #dd4b39
);

body {
  background: #eee;
  color: #333;
  font: normal 16px/1.5 Roboto, sans-serif;
  text-align: center;
}
.social {
  margin: 20px 0 40px;
  text-align: center;
  &__item {
    display: inline-block;
    margin: 10px;
  }
  .fa {
    background: #fff;
    border-radius: 35px;
    color: #818181;
    cursor: pointer;
    display: block;
    font-size: 30px;
    height: 70px;
    line-height: 70px;
    position: relative;
    text-align: center;
    transition: all .2s;
    width: 70px;
    &:after {
      color: #818181;
      content: attr(data-count);
      font-size: 14px;
      left: 0;
      line-height: 20px;
      position: absolute;
      text-align: center;
      top: 100%;
      width: 100%;
    }
  }
  @each $key, $color in $colors {
    .fa-#{$key}:hover {
      box-shadow: 0 0 15px rgba($color, 0.5) inset;
      color: $color;
    }
  }
}

JS

/**
* We want to share this URL, you can change it
*/
var shareUrl = 'https://belyash.github.io';


var SocialShares = {
  fb: {
    url: "https://graph.facebook.com/?id=",
    callback: function (data) {
      console.log("fb", data);
      if (data && data.shares) {
        this.count = data.shares;
      } else {
        this.count = 0;
      }
    },
    share: "https://www.facebook.com/sharer/sharer.php?u="
  },
  vk: {
    url: "https://vk.com/share.php?act=count&url=",
    callback: function (data) {
      // VK.com doesn't support callback parametr for JSONP
      // This callback will never be called
      console.log("vk", data);
    },
    share: "https://vk.com/share.php?url="
  },
  tw: {
    url: "https://cdn.api.twitter.com/1/urls/count.json?url=",
    callback: function (data) {
      console.log("tw", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    share: "https://twitter.com/intent/tweet?url="
  },
  ln: {
    url: "https://www.linkedin.com/countserv/count/share?format=jsonp&url=",
    callback: function (data) {
            console.log("ln", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    share: "https://www.linkedin.com/cws/share?url="
  },
  pt: {
    url: "https://api.pinterest.com/v1/urls/count.json?url=",
    callback: function (data) {
            console.log("pt", data);
      if (data && data.count) {
        this.count = data.count;
      } else {
        this.count = 0;
      }
    },
    // Have some trouble with this
    share: "https://www.pinterest.com/pin/create/bookmarklet/?description=Vasiliy Lazarev&url="
  },
  
};

/**
* VK.com doesn't support callback parameter for JSONP
* VK.com wanna call VK.Share.count()
*/
var VK = VK || {};
VK.Share = VK.Share || {};
VK.Share.count = function (index, count) {
  console.log("vk", count);
  SocialShares.vk.count = count;
}

$(function () {
  $('[data-social]').each(function () {
    var $this = $(this),
      social = $this.data('social'),
      oSocial;

    if (SocialShares.hasOwnProperty(social)) {
      oSocial = SocialShares[social];

      if (oSocial.url) {
        $.getScript(
          oSocial.url + shareUrl + "&callback=SocialShares." + social + ".callback",
          function(data, textStatus, jqxhr) {
            $this.attr("data-count", oSocial.count);
          }
        );
      }
      
      if (oSocial.share) {
        $this.on("click", function () {
          window.open(
            oSocial.share + shareUrl, 
            '', 
            'menubar=no,toolbar=no,resizable=yes' + 
            ',scrollbars=yes' +
            ',height=300,width=600'
          );
            });
      }
    }
  });
});