Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.share {
width: 32px;
height: 144px;
padding: 5px;
margin: 0;
color: #444;
border-radius: 0 8px 8px 0;
border: 1px solid #ccc;
border-left-width: 0;
box-shadow: 0px 0px 10px #ccc;
position: fixed;
top: calc(50% - 75px);
left: 0px;
z-index: 295;
}
.share.expanded {
width: 64px;
}
.share.expanded ul.share-other, .share.expanded .share-less {
display: block;
}
.share.expanded .share-more {
display: none;
}
.share ul {
padding: 0;
margin: 0;
display: block;
float: left;
}
.share ul.share-other {
display: none;
}
.share ul li {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 16px;
font-size: 22px;
text-align: center;
display: block;
list-style-type: none;
cursor: pointer;
transition: all .25s linear;
z-index: 310;
}
.share ul li:hover {
background: #aaa;
}
.share ul li a {
color: #aaa;
}
.share ul li.share-fb:hover {
background: #3b5999;
}
.share ul li.share-fb a {
color: #3b5999;
}
.share ul li.share-tw:hover {
background: #55acee;
}
.share ul li.share-tw a {
color: #55acee;
}
.share ul li.share-inst:hover {
background: #ff00b3;
}
.share ul li.share-inst a {
color: #ff00b3;
}
.share ul li.share-pi:hover {
background: #cc2127;
}
.share ul li.share-pi a {
color: #cc2127;
}
.share ul li.share-re:hover {
background: #336699;
}
.share ul li.share-re a {
color: #336699;
}
.share ul li.share-tu:hover {
background: #35465c;
}
.share ul li.share-tu a {
color: #35465c;
}
.share ul li.share-in:hover {
background: #007bb6;
}
.share ul li.share-in a {
color: #007bb6;
}
.share ul li a {
display: block;
}
.share ul li a:hover {
color: white;
}
.share .share-more, .share .share-less {
width: 32px;
height: 16px;
line-height: 16px;
color: #555;
font-family: sans-serif;
font-size: 9px;
text-decoration: none;
text-align: center;
display: block;
}
.share .share-less {
display: none;
}
body {
font-family: sans-serif;
}
[data-tooltip] {
position: relative;
}
[data-tooltip]:before, [data-tooltip]:after {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s linear, visibility 0.2s linear, transform 0.2s linear;
transform: translate3d(0, 0, 0);
position: absolute;
bottom: 50%;
left: 100%;
pointer-events: none;
}
[data-tooltip]:before {
content: "";
margin: 0 0 0 -12px;
background: transparent;
border: 6px solid transparent;
border-right-color: #ccc;
top: calc(50% - 6px);
z-index: 1001;
}
[data-tooltip]:after {
content: attr(data-tooltip);
height: 30px;
line-height: 30px;
padding: 0 8px;
margin: 0 0 -16px 0;
color: #444;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
transform: translateX(12px);
}
</style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<aside class="share" ng-app="app" ng-controller="ShareCtrl">
<ul>
<li class="share-fb"><a href="#" data-tooltip="{{shares.facebook | shortNumber}}"><i class="fa fa-facebook"></i></a></li>
<li class="share-tw"><a href="#" data-tooltip="{{shares.twitter | shortNumber}}"><i class="fa fa-twitter"></i></a></li>
<li class="share-inst"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="share-pi"><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
<ul class="share-other">
<li class="share-in"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="share-re"><a href="#"><i class="fa fa-reddit"></i></a></li>
<li class="share-tu"><a href="#"><i class="fa fa-tumblr"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
<a href="#" class="share-more">more</a>
<a href="#" class="share-less">less</a>
</aside><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(".share-more").click(function(){
$(this).parent().addClass("expanded");
});
$(".share-less").click(function(){
$(this).parent().removeClass("expanded");
});
angular.module("app", ["app.directives", "app.filters"]);
function ShareCtrl($scope) {
var url = "https://codepen.io";
$scope.shares = {
facebook: 1234,
twitter: 5678,
stumbleupon: 0
};
$.getJSON("https://graph.facebook.com/" + url, function(data) {
$scope.shares.facebook = data.shares;
});
$.getJSON("https://cdn.api.twitter.com/1/urls/count.json?url=" + url + '&callback=?', function(data) {
$scope.shares.twitter = data.count;
});
};
angular.module("app.directives", []);
angular.module("app.filters", [])
.filter("shortNumber", function () {
return function (value) {
if (value >= 1000000) {
return Math.round(value/1000000) + "M";
}
if (value >= 1000) {
return Math.round(value/1000) + "K";
}
return value;
};
});
</script>
</body>
</html>
