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

Vocabulist: bookmarklet to help with learning languages

If you want to learn a language it is a good idea to start reading a book in your preferred foreign language, reaching for the dictionary for any unknown words. This way you will increase your grammar and vocabulary in a natural manner whilst getting the hand of colloquial expressions. However reaching for the dictionary and searching for words is time consuming and gets in the way of reading the text. The vocabulist bookmarket found on the Ejectamenta website lets you have instant translations merely by hovering over unknown words. This works for just about any website (except those using iframes, like ebay!). The software tool optionally speaks the translated words as well. Just drag the bookmarklet to your browser bookmarklet bar to get started, then click on the bookmark button to activate the tool, next find a book (for instance an online Spanish version of Don Quixote) and start reading in your new language.