HTML
<body>
<nav>
<ul class="clearfix">
<li>
<ul>
<li><a href="javascript:void(0)" id="shareFB"><span class="fontawesome-facebook"></span></a></li>
<li><a id="shareTwit" href="http://twitter.com/share"><span class="fontawesome-twitter"></span></a></li>
<li><a id="googleLink"><span class="fontawesome-google-plus"></span></a></li>
<li>
<a id="shareLink" href="#">
<span class="fontawesome-linkedin"></span>
</a>
</li>
<li>
<a id="mailLink" href="#">
<span class="fontawesome-envelope"></span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
JAVASCRIPT
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
var url = document.URL;
var message = 'Healthcare for free';
$(document).ready(function () {
FB.init({
appId: '247708942243803'
});
$('#shareFB').click(function (e) {
e.preventDefault();
FB.ui(
{
method: 'share',
name: message,
href: url,
caption: message,
description: message,
message: '',
});
});
});
</script>
<script>
<!--Twitter-->
$('#shareTwit').click(function (event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
//Google Plus
$('#googleLink').click(function () {
$('#googleLink').attr('href', 'https://plus.google.com/share?url=' + url + '');
window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
return false;
});
//linkedIn
$('#shareLink').click(function () {
$('#shareLink').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + message + '&source=' + message + '');
window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;
});
//Email
$('#mailLink').click(function () {
$('#mailLink').attr('href', 'mailto:?body=' + url + '&subject=' + message + '');
});
//Share with friends
$('.ShareWithFreinds').click(function () {
ShowDialog('#DivShareWithFreinds', 'Article Share with Freinds');
});
</script>
CSS
Reset css - http://meyerweb.com/eric/tools/css/reset/
<style type="text/css">
@charset "utf-8";
@import url('css/api.css');
@import url('css/reset.css');
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
a {
text-decoration: none;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
/* ---------- NAVIGATION ---------- */
nav {
float: right;
margin-top: -18px;
position: fixed;
margin-left: -17px;
}
nav ul {
background-color: #505664;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-table;
position: relative;
}
nav ul li {
float: left;
}
nav ul li a {
color: #6daeb0;
display: block;
height: 45px;
line-height: 45px;
text-align: center;
width: 60px;
}
nav ul li a:hover {
color: #fff;
}
nav ul li ul {
background-color: #6daeb0;
margin-top: 20px;
padding: 5px 0;
position: absolute;
}
nav ul li ul:before {
background-color: #6daeb0;
content: "";
display: block;
height: 8px;
left: 26px; /* (nav ul li a { width: 60px; } / 2) - (nav ul li ul:before { width: 8px; } / 2) */
position: absolute;
top: -4px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
z-index: 1000;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
color: #fff;
}
nav ul li ul li a:hover {
background-color: #5d9799;
}
</style>
<body>
<nav>
<ul class="clearfix">
<li>
<ul>
<li><a href="javascript:void(0)" id="shareFB"><span class="fontawesome-facebook"></span></a></li>
<li><a id="shareTwit" href="http://twitter.com/share"><span class="fontawesome-twitter"></span></a></li>
<li><a id="googleLink"><span class="fontawesome-google-plus"></span></a></li>
<li>
<a id="shareLink" href="#">
<span class="fontawesome-linkedin"></span>
</a>
</li>
<li>
<a id="mailLink" href="#">
<span class="fontawesome-envelope"></span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
JAVASCRIPT
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js">
</script>
<script src="https://connect.facebook.net/en_US/all.js">
</script>
<script type="text/javascript">
var url = document.URL;
var message = 'Healthcare for free';
$(document).ready(function () {
FB.init({
appId: '247708942243803'
});
$('#shareFB').click(function (e) {
e.preventDefault();
FB.ui(
{
method: 'share',
name: message,
href: url,
caption: message,
description: message,
message: '',
});
});
});
</script>
<script>
<!--Twitter-->
$('#shareTwit').click(function (event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});
//Google Plus
$('#googleLink').click(function () {
$('#googleLink').attr('href', 'https://plus.google.com/share?url=' + url + '');
window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
return false;
});
$('#shareLink').click(function () {
$('#shareLink').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + message + '&source=' + message + '');
window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;
});
$('#mailLink').click(function () {
$('#mailLink').attr('href', 'mailto:?body=' + url + '&subject=' + message + '');
});
//Share with friends
$('.ShareWithFreinds').click(function () {
ShowDialog('#DivShareWithFreinds', 'Article Share with Freinds');
});
</script>
CSS
Reset css - http://meyerweb.com/eric/tools/css/reset/
<style type="text/css">
@charset "utf-8";
@import url('css/api.css');
@import url('css/reset.css');
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
a {
text-decoration: none;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
/* ---------- NAVIGATION ---------- */
nav {
float: right;
margin-top: -18px;
position: fixed;
margin-left: -17px;
}
nav ul {
background-color: #505664;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-table;
position: relative;
}
nav ul li {
float: left;
}
nav ul li a {
color: #6daeb0;
display: block;
height: 45px;
line-height: 45px;
text-align: center;
width: 60px;
}
nav ul li a:hover {
color: #fff;
}
nav ul li ul {
background-color: #6daeb0;
margin-top: 20px;
padding: 5px 0;
position: absolute;
}
nav ul li ul:before {
background-color: #6daeb0;
content: "";
display: block;
height: 8px;
left: 26px; /* (nav ul li a { width: 60px; } / 2) - (nav ul li ul:before { width: 8px; } / 2) */
position: absolute;
top: -4px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
z-index: 1000;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
color: #fff;
}
nav ul li ul li a:hover {
background-color: #5d9799;
}
</style>

