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;
}
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • 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()

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.