JavaScript
Article

Create a Cool jQuery Socialize Sharing Tool

By Sam Deering

socialkize-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! :-)

Demo
Download

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+'&title='+title;
    var stumbleupon = 'http://stumbleupon.com/submit?url='+url+'&title='+title;
    var buzz = 'http://www.google.com/reader/link?url='+url+'&title='+title+'&srcURL='+host;
    var delicious  = 'http://del.icio.us/post?url='+url+'&title='+title;
 
    var tbar = '
Share
'; tbar += 'Share on Twitter'; tbar += 'Share on facebook'; tbar += 'Share on Digg'; tbar += 'Share on Stumbleupon'; tbar += 'Share on Delicious'; tbar += 'Share on Buzz'; tbar += '
'; // 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




 
 

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;
}
  • Mark Adesina

    Hello,
    I found this tutorial very useful.. thanks

  • http://Www.chipplanet.webs.com Gerald

    Wow the tutoriol is nice,i realy thank u guys.

  • praveen

    excellent like it..:)

  • test

    Can you please share the code to post image on Twitter? Thanks in advance

  • Pingback: Year End Roundup: 30 Must Read jQuery Tutorials | WHSR()

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.