I found this wonderful scrolling Share Box tutorial that sits at the bottom of the page and looks very sleek. It’s jQuery, so it’s more involved than the left-sitting Share Box on this page, but it’s worth it if you like it for the same reasons that I like it. Here’s the original tutorial link, and here’s my example at the Don’t Brake My Art website.

The author’s name is Tony, and he does a great job of walking through the process, but I’d like to add a few things. For the absolutely clueless, you have to create a few documents to store in a folder–beyond the code you’ll add to your .php and .css documents–and you have to download the images. I added a Linkedin icon and found workable code to go with it.

I like this Share Box because 1) it sits on the bottom of the page, 2) it utilizes .png images (which I think are much classier than the iframe boxes on this page, for instance), and 3) it’s just beautiful. In fact, I think I am officially in love with jQuery and plan on diving in and never coming up for air. Now, for a few of my slightly more elementary instructions:

I suggest you follow Tony’s instructions, but I’d like to clarify to the very new at this, that you will create a few files as you go.

After you add the first bit of code to your .html or .php page, you have to create a share.js page and insert his code into it and store it somewhere easy to locate. I have a “js” folder for those kinds of documents, so I added mine there, and then linked to it on my .php page.

<script type=”text/javascript” src=”/js/share.js“></script>

His “jQuery Cookie” link isn’t easy to follow, but create a file called jquery.cookie.js and add the code from this page into it.

Add it to the same folder as your share.js file and make sure the script leads to it:

<script type=”text/javascript” src=”/js/jquery.cookie.js“></script>

I added everything else precisely, plus a few more things.

Following his social icon source, I decided to add the Linkedin button to the share box. Definitely make sure the path leads to the images. I added this in the “var” section of the share.js document:

var facebook = ‘http://www.facebook.com/sharer.php?u=’+url;
var linkedin = ‘http://www.linkedin.com/cws/share?url=’+url;
var digg = ‘http://digg.com/submit?phase=2&url=’+url+’&title=’+title;

And add this to the “tbar” section of the share.js document between facebook and digg:

tbar += ‘<a href=”‘+linkedin+’” id=”linkedin” title=”Share on Linkedin” target=”_blank”><img src=”/images/linkedin-share.png” alt=”Share on linkedin” width=”32″ height=”32″ /></a>’;

Lastly, if you are adding the extra Linkedin icon without replacing another icon, modify the width in the share.js file like so:

$(‘#socializethis’).bind(‘mouseenter’,function(){
$(this).animate({height:’35px’, width:’300px‘, opacity: 1}, 300);
$(‘#socializethis img’).css(‘display’, ‘inline’);
});

That is it! I think it is brilliantly space-saving and creative and am happy to share it here.

You may share this site's content if you link back to the original entry with credit to © Lydia Ann Lee. Merci beaucoup!

Unrelated posts: