Responsive social sharing toolbar

The social tool bar featured on this site came from this excellent blog post. I really liked the social bar so I added it to the ejectamenta site. I have created some files to make it easy to install (click the links to download) responsive-share-bar.js and responsive-share-bar.css , and some 32×32 pixel image icons shareicons.zip. Save these files somewhere on your webserver and remember the path. Add this code in the head section of you

<link rel="stylesheet" type="text/css" href="http://www.yourwebsitename.com/path/to/file/responsive-share-bar.css"/>

Then add the reference to the javascript file just before the tag.

<script async type="text/javascript" src=""http://www.yourwebsitename.com/path/to/file/responsive-share-bar.js"></script>

Then copy the following html code to the body section of your webpage

<div id="share-wrapper">
    <ul class="share-inner-wrp">
        <!-- Facebook -->
        <li class="facebook button-wrap"><a href="#">Facebook</a></li>
        
        <!-- Twitter -->
        <li class="twitter button-wrap"><a href="#">Tweet</a></li>
        
        <!-- linkedin -->
		<li class="linkedin button-wrap"><a href="#">Linkedin</a></li>
        
        <!-- reddit -->
		<li class="reddit button-wrap"><a href="#">Reddit</a></li>
   
        <!-- Digg -->
        <li class="digg button-wrap"><a href="#">Digg it</a></li>
        
        <!-- Stumbleupon -->
        <li class="stumbleupon button-wrap"><a href="#">Stumbleupon</a></li>
      
         <!-- Delicious -->
        <li class="delicious button-wrap"><a href="#">Delicious</a></li>
        
        <!-- Google -->
        <li class="google button-wrap"><a href="#">Google+</a></li>
        
        <!-- Email -->
        <li class="email button-wrap"><a href="#">Email</a></li>
    </ul>
</div>

For the linkedin summary field I get this from the meta-description tag on the page, so your page should have something like the following on it. If it is longer than 256 chars, linkedin say that they will truncate the string and use ellipses.

<meta name='description' content='How to install a responsive toolbar for your website that works well on desktop and mobile websites'>

That’s it, you should now have a good looking, slide out, and responsive social toolbar for your website, just like you see on the left of this page, please share if you like my site.

All The code was webpage formatted using the CodeToHTML converter