Here is a free quirky variation to the standard Social Icons, using a JQuery toggle to reveal each of the respective social buttons.

—–

View Demo

—–

 

How to implement

1. Download the source files above.

2. Upload the css, javascript and image files onto your server.

3. Copy and paste the supplied html to the relevant places in your site. Be sure to update the links in the head and the css to match your file locations if necessary.

4. Paste all of your embed codes in the #facebook, #twitter, #linkedin and #googleplus list tags (comments of where to put them are in the source code). You can download the respective embed codes by following these links (N.B. I recommend you opt for the ‘tall’ buttons for each of the sites, in order to keep consistency):

Facebook: http://developers.facebook.com/docs/reference/plugins/like/
(IMPORTANT: Be sure to use the iframe version of the like button)

Twitter: http://twitter.com/about/resources/tweetbutton

LinkedIn: http://blog.linkedin.com/2010/11/30/linkedin-share/

Google+: http://www.google.com/+1/button/

Test it out and enjoy!