Do you want to use the share bar that Mashable is using? If so download this script.
http://skin.zoosper.com/skin/global/js/share.mini.js
How to use this?
I am using addthis for share tracking, so you need to register at addthis.com. then use the following code.
<div id="sharebox" class=""> <div class="cfshare"> <script type="text/javascript"> jQuery(document).ready(function(){ if(jQuery('div#sharebox').length > 0) { jQuery('#sharebox').cfShare({ addthisId : 'codefight', animate : false //or true, bgColor : '#fff', fromPosition : 'original', //or 'top' marginFixed : '0 7px 4px -572px', pageWidth : 980, shareClients : ['facebook','facebooksend','twitter', 'googleplusone', 'linkedin', 'addthis'], shareLeft : -84, sharePadding : 5, shareWidth : 70, startTop : 70, topPadding : 0 }); } }) </script> </div> </div>
NOTES:
- addthisId: Addthis.com ID Goes Here If You Want To Track Page Shares.
- animate : Do you want to animate your share bar? Default is true.
- bgColor : Set your color for share background. default is '#fff'
- fromPosition: 'original', or 'top'. Do you want to float to left from top or from the original place you inserted code.
- marginFixed : Margin for floating sharebar when animation is set to false. You may need to adjust value of left margin.
- pageWidth : Website page wrapper width.
- shareClients: 'facebook', 'facebooksend', 'twitter', 'googleplusone', 'linkedin', 'addthis'. You can select your choice and change the position as you like.
- shareLeft : Left position from the place you inserted this code.
- sharePadding : Padding for sharebar. Default is 5px.
- shareWidth : Width of the sharebar for floating menu.
- startTop : Top-margin when page load [normally height of header]
- topPadding : Top padding for the sharebox.