<div id="example3">
<div id="shareme" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)" data-title="share this page"></div>
</div>
<script>
$('#shareme').sharrre({
share: {
googlePlus: true,
facebook: true,
twitter: true,
digg: true,
delicious: true
},
enableTracking: true,
buttons: {
googlePlus: {size: 'tall', annotation:'bubble'},
facebook: {layout: 'box_count'},
twitter: {count: 'vertical'},
digg: {type: 'DiggMedium'},
delicious: {size: 'tall'}
},
hover: function(api, options){
$(api.element).find('.buttons').show();
},
hide: function(api, options){
$(api.element).find('.buttons').hide();
}
});
</script>
<style type="text/css">
#example3{
float:left;
margin:63px 33% 0 33%;
}
#shareme .box{
float:left;
margin:5% 8% 0 8%;
width:100%;
}
#shareme .box a{
color:#404040;
text-shadow: 0 1px 1px rgba(167,167,167,.4);
}
#shareme .box a:hover{
text-decoration:none;
}
#shareme .count {
font-weight:bold;
font-size:50px;
float:left;
border-right:2px solid #57b8d1;
line-height:40px;
padding-right:10px
}
#shareme .share {
float:left;
margin-left:10px;
font-size:20px;
width:82px;
}
#shareme .buttons {
position: absolute;
width:294px;
background-color:#fff;
border: 1px solid rgba(0,0,0,.2);
padding:10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
#shareme .button {
float:left;
max-width:50px;
margin:0 10px 0 0;
}
#shareme .facebook {
margin:0 4px 0 0;
}
</style>