Responsive Social Widget

by kompiajaib

HTML

<script src="http://platform.twitter.com/widgets.js"></script>
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Share This:</div>
<div class='fb'>
    <span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>
  </div>
<div class='twitter'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
  </div>
<div class='gplus'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  
  </div>
<div class='linkedin'>
    <script expr:data-url='data:post.url' type='IN/Share'></script>
  </div>
<div class='pinterest'>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='http://2.bp.blogspot.com/-GBohPdcIzF8/U_mMASBohHI/AAAAAAAAde8/ugBc_zbc6Fo/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
</div>
    </div>

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

<script src="//platform.linkedin.com/in.js" type="text/javascript">
  lang: en_US
</script>

CSS

.sharing-post{margin:20px auto;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;}
.entry-social .title-sharing-post{background:none;padding: 4px 5px 4px 0;width:130px;font-size:20px;font-family: 'Trebuchet MS', sans-serif;font-weight:400;text-transform:uppercase;display:none}
.entry-social .fb{padding: 7px 5px 7px 7px;width:130px;}
.entry-social .fb:hover{background-color: #324b81;}
.entry-social .twitter,.entry-social .gplus{padding: 7px 5px 2px 7px;}
.entry-social .twitter:hover{background-color: #01A7dE;}
.entry-social .gplus:hover{background-color: #BA3227;}
.entry-social .linkedin{padding: 7px 5px 0 7px;height:27px;}
.entry-social .linkedin:hover{background-color: #136F9B;}
.entry-social div.pinterest{width:107px;}
.entry-social .pinterest a{padding: 7px 7px 2px 7px}
.entry-social .pinterest a:hover{background-color: #B01C23;}

JavaScript

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();