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