Share Social

by Roberto Apasajja

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="sharesocial">
  <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?u=urlnya','z','resizable,height=260,width=370'); return false;"><span class="fa fa-facebook"></span></a><br>
  <a href="#" onClick="window.open('https://twitter.com/share?url=urlnya&text=Home+&hashtags=','z','resizable,height=260,width=370'); return false;"><span class="fa fa-twitter"></span></a><br>
  <a href="#" onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=urlnya','z','resizable,height=260,width=370'); return false;"><span class="fa fa-linkedin"></span></a>
</div>

CSS

html * {transition: 1s}

#sharesocial {
  position:fixed;
  left:0;
  top:20%;
}

span.fa {
  color:#fff;
  width:3em;
  height:3em;
  line-height: 3em;
  font-size:1em;
  text-align:center;
}
span.fa:hover {
  opacity:0.4
}

.fa-facebook {
  background: #3b5998;
}
.fa-twitter {
  background: #55acee;
}
.fa-linkedin {
  background: #007bb5
}
.fa-google-plus {
  background: #dd4b39;
}
.fa-pinterest {
  background: #cb2027
}