Create a Cool jQuery Socialize Sharing Tool

This is a pretty cool social networking sharing tool which has nice CSS3 effects and hides out of view when you just don’t want to see it anymore! It has a pretty cool sliding effect and the height/width can be adjusted and you can add/remove the icons you want to see/don’t want to see. If you adopt this as your chosen solution please test in IE first, you might need to create a separate IE stylesheet. It works like a beauty in Firefox, Chrome and Safari though! Enjoy! :-)

To make it work you must include jQuery the jQuery Cookie script to remember the minimized state, the share script and a little CSS. It takes the title of the current page and submits that plus the url to your choice of social site.

JQUERY

(function( $ ) {
  $(document).ready(function() { 
    var url = window.location.href;
    var host =  window.location.hostname;
    var title = $('title').text();
    title = escape(title); //clean up unusual characters
 
    var twit = 'http://twitter.com/home?status='+title+'%20'+url;
    var facebook = 'http://www.facebook.com/sharer.php?u='+url
    var digg = 'http://digg.com/submit?phase=2&url='+url+'&amp;title='+title;
    var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&amp;title='+title;
    var buzz = 'http://www.google.com/reader/link?url='+url+'&amp;title='+title+'&amp;srcURL='+host;
    var delicious  = 'http://del.icio.us/post?url='+url+'&amp;title='+title;
 
    var tbar = '<div id="socializethis"><span>Share<br /><a href="#min" id="minimize" title="Minimize"> <img src="/images/minimize.png" /> </a></span><div id="sicons">';
    tbar += '<a href="'+twit+'" id="twit" title="Share on twitter"><img src="/images/twitter.png"  alt="Share on Twitter" width="32" height="32" /></a>';
    tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook"><img src="/images/facebook.png"  alt="Share on facebook" width="32" height="32" /></a>';
    tbar += '<a href="'+digg+'" id="digg" title="Share on Digg"><img src="/images/digg.png"  alt="Share on Digg" width="32" height="32" /></a>';
    tbar += '<a href="'+stumbleupon+'" id="stumbleupon" title="Share on Stumbleupon"><img src="/images/stumbleupon.png"  alt="Share on Stumbleupon" width="32" height="32" /></a>';
    tbar += '<a href="'+delicious+'" id="delicious" title="Share on Del.icio.us"><img src="/images/delicious.png"  alt="Share on Delicious" width="32" height="32" /></a>';
    tbar += '<a href="'+buzz+'" id="buzz" title="Share on Buzz"><img src="/images/google-buzz.png"  alt="Share on Buzz" width="32" height="32" /></a>';
    tbar += '</div></div>';
 
    // Add the share tool bar.
    $('body').append(tbar); 
    $('#socializethis').css({opacity: .7}); 
    // hover.
    $('#socializethis').bind('mouseenter',function(){
      $(this).animate({height:'35px', width:'260px', opacity: 1}, 300);
      $('#socializethis img').css('display', 'inline');   
    });
    //leave
    $('#socializethis').bind('mouseleave',function(){
      $(this).animate({ opacity: .7}, 300);
    });  
    // Click minimize
    $('#socializethis #minimize').click( function() { 
      minshare(); 
      $.cookie('minshare', '1');  
    }); 
 
    if($.cookie('minshare') == 1){
      minshare();
    }  
 
    function minshare(){
      $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); 
      $('#socializethis img').css('display', 'none');
      return false;
    }  
  });
})(jQuery);

HTML

<head>
<title>This will be sent to the social sites</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/share.js"></script> 
<script type="text/javascript" src="path/to/jquery.cookie.js"></script> 
<link rel="stylesheet" href="path/to/style.css" type="text/css" />
</head>

CSS

#socializethis{
  background:#CCC;
  border:solid 1px #666;
  border-width: 1px 0 0 1px;
  height:15px;
  width:260px;
  position:fixed;
  bottom:0;
  right:0;
  padding:2px 5px;
  overflow:hidden; 
  /* CSS3 */
  -webkit-border-top-left-radius: 12px;
  -moz-border-radius-topleft: 12px;
  border-top-left-radius: 12px;
  -moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
  box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
  }
 
#socializethis a{
	float:left; 
  width:32px;
  margin:3px 2px 2px 2px; 
  padding:0; 
}
 
#socializethis span{ 
  float:left; 
  margin:2px 3px; 
  text-shadow: 1px 1px 1px #FFF;
  color:#444;
  font-size:12px;
}