How do I create Sharebar like this sample URL?

I have to create a social sharing sidebar similar to this website. Can you suggest how it can be implemented? using开发者_如何学运维 Jquery OR anything?

ref. this page, http://www.chow.com/recipes/25677-beef-kalbi

look at the left side SHARE BAR

Their's specifically is via Gigya.

I think Gigya charge for what they offer but you can get something similar using free sharing services such as AddThis or ShareThis, both of which offer sharing stats. From there it's just a matter of fixing a <div> containing their "copy & paste" code to the top left of the page and you're sorted. Here's an example using code from ShareThis:

HTML:

<div id="sharebar">
    <span class="btn st_facebook_vcount" displayText="Facebook"></span>
    <span class="btn st_twitter_vcount" displayText="Tweet"></span>
    <span class="btn st_email_vcount" displayText="Email"></span>
</div>
<script>var switchTo5x=true;</script>
<script src="//w.sharethis.com/button/buttons.js"></script>

CSS:

#sharebar {
    top:10%;
    left:-65px;
    width:66px;
    position:fixed;
    background:#35a731;
    border-radius:10px;
    padding:5px 5px 10px 15px;
}
#sharebar:hover { left:-10px; }
#sharebar .btn { display:block; margin-left:-15px; }
#sharebar:hover .btn { margin-left:0; }

Add a little CSS3 transition for effect and even a label and it starts looking a bit more respectable.

View demo: jsfiddle.net/kUTWc/show (or edit it)

Look at the APIs for each site you want to deal with, then write code to talk to that API, then link that code to some buttons that you arrange with CSS.