如何创建这样的共享栏？

Question

我必须创建类似于本网站的社交分享栏。你能建议它如何实施？使用JQuery或任何东西？

ref。此页面，http://www.chow.com/recipes/25677-beef-kalbi

看看左侧SHARE BAR

Answer 1

他们是专门为通过Gigya。

我认为Gigya会为他们提供的服务收费，但您可以使用免费分享服务获得类似的服务，如AddThis或ShareThis，这两者都提供共享统计信息。从那里只需要将包含他们的“复制&粘贴”代码的<div>固定到页面的左上角，然后对其进行排序。下面是使用代码来自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; } 

加一点点CSS3 transition的效果，甚至一个标签，它开始寻找一个有点更可敬。

观看演示：jsfiddle.net/kUTWc/show（或edit it）

Answer 2

看看这些API对于要处理，然后编写代码来谈谈该API的每个站点，然后该代码链接到你安排一些按钮与CSS。