button share konsep db

by dafin defandaky

HTML

<script src="https://apis.google.com/js/plusone.js"></script>
<ul class="post-social">
  <li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>
  </li>
  <li class="twitter">
      <span class="social zocial-twitter"></span>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips"></a>
  </li>
  <li class="googleplus">
        <span class="social zocial-googleplus"></span>
    <g:plusone size="medium"></g:plusone>
  </li>
</ul>
<div id="fb-root"></div>

CSS

@import url(http://weloveiconfonts.com/api/?family=zocial);
    /* zocial */
    [class*="zocial-"]:before {
      font: 23px/24px 'zocial', sans-serif;
      color: white;
      line-height: 2.2em;
    }

    .post-social .facebook {
      background: #3B5998;
    }
    .post-social .twitter {
      background: #4099FF;
    }
    .post-social .googleplus {
      background: #db5a3c;
    }
    .post-social .social {
      float: left;
    }
    .post-social .zocial-facebook {
      margin: 0 15px;
    }
    .post-social .zocial-twitter {
      margin: 0 25px;
    }
    .post-social .zocial-googleplus {
      margin: 0 25px;
    }
    .post-social li {
      min-width: 180px;
      width: 190px;
      height: 50px;
      cursor: pointer;
      list-style: none;
      text-align: left;
      float: left;
    }
    .post-social li:hover [class*="zocial-"]:before {
      opacity: 0.5;
      text-align: right;
    }
    .post-social li:hover iframe {
      opacity: 1;
    }
    .post-social li iframe {
      margin-top: 15px !important;
      opacity: 0;
      transition: all .3s ease-in-out;
    }
    .post-social li .fb_ltr {
      margin: 30px 20px !important;
    }

JavaScript

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));