<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>