This is the instructions on how to build your own social share toolbar using jQuery and CSS3. The toolbar should be visible at the bottom right corner of your browser. If you hover over the toolbar it will slide up, click the minimize button it will all but disappear, click one of the icons and you will be taken to either the login page or the share page of that social site.

Share toolbar

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.

This is the minimum code that should be in the page head, if you prefer you could add the scripts in your footer as is popular these days to improve page load speed.

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

Share.js should be something like:

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

I may have gone a bit overboard with the opacity etc so feel free to modify it as needed. The icons used are from icon dock.

CSS includes some CSS3 and proprietary properties to get it working with more browsers.

#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;
}

That's all there is to it, feel free to test it out, offer suggestions, and let me know if you make use of it.

Author: Tony Aslett

Oh very cool Tony. One thing

Submitted by Hugo on Thu, 2010-03-18 08:56.

Oh very cool Tony. One thing didn't notice it sitting at the bottom of the viewort initially possibly due to being so close to all those bottom browser toolbar icons that it wasn't apparent there was something new down there - but that's probably just me Smile

Well, sorry to be negative

Submitted by Ed Seedhouse on Thu, 2010-03-18 14:38.

Well, sorry to be negative but I find the darned thing useless and rather annoying. Surely I should be able to make it go away without having to turn JavaScript off. The little "x" minimizes it, but it comes right back on the next message I read. It's no use to me and just gets in the way.

Please make it so I can remove the danged thing. It reminds me of "Mr. Clippy" from MS Office, shudder...

Oh, and the behavior violates my expectations, since clicking on an "x" is supposed to close something, not just minimize it.

Ed all this beating about the

Submitted by Hugo on Thu, 2010-03-18 14:38.

Ed all this beating about the bush, just say what's on your mind! Smile

I think its super bad-ass. I

Submitted by CupidsToejam on Thu, 2010-03-18 14:42.

I think its super bad-ass. I think the only people who will not appreciate this most awesome feature, would be those not engaged in the social media atmosphere. My grandparent are up-to-date with social media and love it!!

I know what Twitter and

Submitted by Verschwindende on Thu, 2010-03-18 14:46.

I know what Twitter and Facebook are but I have no idea what the other things are.

That's all I need, more time eaters. Tongue

That's what Bill Gates

Submitted by Ed Seedhouse on Thu, 2010-03-18 14:49.

That's what Bill Gates thought about "Mr. Clippy", too.

I don't mind it being there by general default as long as I can make it disappear in my own settings.

I've been on Facebook for several years now and don't need any help in putting anything I want up on it. "Mr. Social" is annoying me and it makes it hard to edit a message when the text I'm typing scrolls under it, as it does.

On a site I didn't care about I'd just leave, not to return. But I do care about this site and it won't drive me away. Hmmm...have I detected your nefarious plot to get rid of me? Well your little plans won't stop me, deary (cackle). I will stay around an annoy you until you fix it. Resistance is useless!

I think its super bad-ass. I

Submitted by CupidsToejam on Thu, 2010-03-18 14:53.

I think its super bad-ass. I think the only people who will not appreciate this most awesome feature, would be those not engaged in the social media atmosphere. My grandparent are up-to-date with social media and love it!! I would like to see the drop shadow disappear, or have less shadow. I played around and liked...

-moz-border-radius-topleft: 6px;
-moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.4)
border-color: #4B4B4B;
border-width: 1px 0px 0px 1px;

But thats just me.

Ed Seedhouse wrote: Oh, and

Submitted by Deuce on Thu, 2010-03-18 16:33.

Ed Seedhouse wrote:

Oh, and the behavior violates my expectations, since clicking on an "x" is supposed to close something, not just minimize it.

Agreed. I'm not a fan of it either.

I, too, find it mostly

Submitted by gary.turner on Thu, 2010-03-18 17:17.

I, too, find it mostly annoying; not the icons, the fixed bit that ends up covering other stuff. I also tend to think that when I scroll the page, everything on the page should scroll.

A defined block set in the right column would work as well, without the annoyance factor.

cheers,

gary

Can someone tell CTJ to stop

Submitted by Hugo on Thu, 2010-03-18 17:47.

Can someone tell CTJ to stop repeating himself! and to stop using lingo out of a bad 1970's Blaxplotation movie unless of course it's from Shaft, the coolest dude on the planet.

what

Submitted by CupidsToejam on Thu, 2010-03-18 17:53.

yeah, it wouldnt let me go back and edit the post, so you'll have to put up with it

tha?

Submitted by CupidsToejam on Thu, 2010-03-18 17:54.

yeah, it wouldnt let me go back and edit the post, so you'll have to put up with it

Mofo

Submitted by Hugo on Thu, 2010-03-18 18:26.

!

Thanks for the feedback

Submitted by Tony on Thu, 2010-03-18 21:00.

Negative or positive it is always good to hear others opinions.

I didn't want it to be too 'in your facebook', so to speak and thought having it slide in might create a little interest.

The 'x' was used as I thought using a '-' would not stand out enough unless it was an image and I was too slack/lazy to find or create an image.

If it was created as a drupal module I would have added settings that allowed users to turn it off. I didn't want to make it a drupal module so that anyone could use it and because there are enough social link type modules already for drupal. Really I just wanted to play with a little jQuery. I nearly added a cookie feature that would remember you settings, it wouldn't be hard to do, I was just keeping it as simple as possible.

Changes

Submitted by Tony on Fri, 2010-03-19 06:48.

Members can now turn it off completely in their profile settings. Navigate to 'My account' > 'edit' > 'settings'.
I am also using cookies to remember the minimized state and have added an icon for the minimized link.

Keep the feedback coming.

One thing that ought to be

Submitted by Hugo on Fri, 2010-03-19 07:58.

One thing that ought to be done is to retain state page to page. If I have minimized it and then navigate to another page it's popped back up and I have to minimize again which is a little annoying?

Settings setting not working

Submitted by gary.turner on Fri, 2010-03-19 08:02.

The trouble with minimizing is that should the cursor scrub over the bit left, it pops up in all its glory even if supposedly turned off via settings. Consider clicking the down arrow on the scroll bar.

cheers,

gary

There must be some funky

Submitted by Tony on Fri, 2010-03-19 09:14.

There must be some funky cache happening.
The jquery now writes a cookie when the minimize button is clicked and reads from that each time the page loads.
Works fine for me.
Turning it off via settings should write a js readable line in the source. Unfortunately it seems to be writing the value for everyone together not just the current user.
I'll check whats going on.

Ok I seem to be reading

Submitted by Hugo on Fri, 2010-03-19 09:52.

Ok I seem to be reading something, now navigating to a new page initially briefly shows expanded then slides it off to the right.

Yes that's the cookie. I have

Submitted by Tony on Fri, 2010-03-19 10:44.

Yes that's the cookie.
I have fixed the other turn off in settings issue locally and am just testing before uploading.
I will also speed up the hiding if the minimize cookie is found.

Well speeded up. the very

Submitted by Hugo on Fri, 2010-03-19 13:04.

Well speeded up. the very briefest of flickers only noticeable if ones staring closely.

The "off" setting seems to be

Submitted by gary.turner on Fri, 2010-03-19 19:28.

The "off" setting seems to be working now.

cheers,

gary

Quote: The "off" setting

Submitted by Hugo on Fri, 2010-03-19 20:21.

Quote:

The "off" setting seems to be working now.

Bah Humbug!

I was able to turn it off in

Submitted by Ed Seedhouse on Sat, 2010-03-20 03:01.

I was able to turn it off in my account settings and it's working fine in the sense that it's no longer working at all, if you get my meaning. Thanks for the quick response.

How to.......

Submitted by drbeaven on Wed, 2010-03-24 19:42.

hi,

im currently hosting an ecommerce site which id like to install this navbar into,the ecommerce suite is prestashop,how ever ive tried installing using the example scripts and found it not be working,i changed the neccesary parts of this scripts to coincide with my own directories,there have been reports of 3rd party prestashop modules usng jquery to conflict with the suites jquery,i was hoping someone might have a way to implement this.i am also thinking of installing this into a site created in serif webplus x4 any ideas?

Woops I just noticed the

Submitted by Tony on Wed, 2010-03-24 21:07.

Woops I just noticed the filters were changing part of the first line of the javaScript into a smiley. I have fixed the code above.

Drbeaven, if that was not your problem please send me a link to the site so i can see how it is conflicting.

I stole it for my site. Am I

Submitted by Verschwindende on Wed, 2010-03-24 22:03.

I stole it for my site. Am I allowed to use the images or should I be coming up with my own? Smile

I took the minimize out and just made it shuffle back down when you mouseout.

Solved...

Submitted by drbeaven on Wed, 2010-03-24 22:34.

thanks tony

prob solved,i replaced the code snippet you updated,i also noticed i placed the script in the header before a link slider,so i moved it to the end instead,also changed the jquery link to my commerce version in my directory.

works a treat,one question though,where do i get the minimise image?

cheers

dan
www.theprophotographerstore.co.uk

**** Found the image*****

Hi Verschwindende, The icons

Submitted by Tony on Wed, 2010-03-24 23:03.

Hi Verschwindende,
The icons are from Icon Dock and are under Creative Commons license which you can freely use as long as you link back to icon dock.

drbeaven, glad you sorted it out.

No shadow in ie8

Submitted by drbeaven on Mon, 2010-03-29 15:25.

hi,

i just noticed the drop shadow doesnt show in ie8,ho do i correct this?

dan

It uses CSS3 to provide the

Submitted by Tony on Mon, 2010-03-29 22:06.

It uses CSS3 to provide the box shadow and rounded corners etc. So if a browser doesn't support the feature it will not show it.
Opera displays it with square corners and no shadow, it still looks good, just different.

Actually, Tony Opera 10.51

Submitted by Verschwindende on Mon, 2010-03-29 22:17.

Actually, Tony Opera 10.51 shows it rounded with the shadow. Smile

No 10.51 for Linux

Submitted by gary.turner on Mon, 2010-03-29 22:36.

Opera has not yet seen fit to port v10.51 to Linux. We're still limited to v10.10 — square corners and no shadow.

cheers,

gary

Linux boys, huh - always the

Submitted by Hugo on Tue, 2010-03-30 07:13.

Linux boys, huh - always the poor cousins

Tony the iPhone/Touch doesn't know where the bottom of it's viewport is got this minuscule thing floating around the middle of the screen and when send it packing in disgrace I can't get it back again.

To add the box shadow in IE

Submitted by Tony on Tue, 2010-03-30 23:40.

To add the box shadow in IE add this to your styles:

filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=-3px, OffY=-3px, Color='#CCC'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-3px, OffY=-3px, Color='#CCC')"; /* IE8 */

Thanks to http://css3please.com/

Hugo any suggested fix for the iphone?

I'll have a think about the

Submitted by Hugo on Wed, 2010-03-31 06:36.

I'll have a think about the iPhone, might have to install a copy on a live test site though to be able to play around, which is a minor hindrance.

Nothing shows up on my page:

Submitted by Mad Mind Media on Tue, 2010-05-18 17:25.

This is my site www.madmindmedia.com

I tried adding the share button but nothing appears on my page.

I put the html code in my index.html,

made the share.js page, and fixed the css and still nothing. Does anybody know what i did wrong? Please email