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安排的某些按钮。

我该如何创建这样的共享栏？

2 个答案: