Skip to main content

Create a Cool jQuery Socialize Sharing Tool

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.


(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 = ''+title+'%20'+url;
    var facebook = ''+url
    var digg = ''+url+'&title='+title;
    var stumbleupon = ''+url+'&title='+title;
    var buzz = ''+url+'&title='+title+'&srcURL='+host;
    var delicious  = ''+url+'&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"><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.
    $('#socializethis').css({opacity: .7}); 
    // hover.
      $(this).animate({height:'35px', width:'260px', opacity: 1}, 300);
      $('#socializethis img').css('display', 'inline');   
      $(this).animate({ opacity: .7}, 300);
    // Click minimize
    $('#socializethis #minimize').click( function() { 
      $.cookie('minshare', '1');  
    if($.cookie('minshare') == 1){
    function minshare(){
      $('#socializethis').animate({height:'15px', width: '40px', opacity: .7}, 300); 
      $('#socializethis img').css('display', 'none');
      return false;


<title>This will be sent to the social sites</title>
<script type="text/javascript" src=""></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" />


  border:solid 1px #666;
  border-width: 1px 0 0 1px;
  padding:2px 5px;
  /* 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{
  margin:3px 2px 2px 2px; 
#socializethis span{ 
  margin:2px 3px; 
  text-shadow: 1px 1px 1px #FFF;

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad