css - 如何像这个示例 URL 创建 Sharebar？

Question

我必须创建一个类似于此网站的社交分享侧边栏。你能建议如何实现吗？使用 Jquery 或任何东西？

引用。此页，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)