一键分享（微信、QQ空间、微博等等）

使用的是bsshare

一、选择样式

进入官网地址：http://www.bshare.cn/

选择了想要的样式，然后点免费获取分享代码按钮

二、获取代码

页面会跳转，再进一步选择字体大小和图标样式

基本上到这里就完事了，不过如果样式要求不仅仅是这样的，可以自己添加样式来修改，比如：

<div class="bshare-custom share-dialog">
    <div class="share-title">分享到...<span id="shareClose"><i class="layui-icon layui-icon-close"></i> </span></div>
    <div class="bsPromo bsPromo2"></div>
    <a title="分享到微信" class="bshare-weixin" href="javascript:void(0);">微信</a>
    <a title="分享到QQ空间" class="bshare-qzone">QQ空间</a>
    <a title="分享到新浪微博" class="bshare-sinaminiblog">新浪微博</a>
    <a title="分享到腾讯微博" class="bshare-qqmb">腾讯微博</a>
    <span class="BSHARE_COUNT bshare-share-count" style="display: none"></span>
</div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>

.share-dialog {
  position: absolute;
  top: 70px;
  left: -20px;
  display: none;
  width: 120px;
  height: 150px;
  padding: 10px;
  text-align: left;
  border: 1px solid #e1e1e1;
  background: #fff;
  z-index: 999;
  .share-title {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    span {
      float: right;
      &:hover {
        cursor: pointer;
      }
    }
  }
  a {
    margin: 6px;
    display: inline-block;
    width: calc(100% - 14px);
    font-size: 14px;
    color: #999999 !important;
    text-align: left;
  }
}

参考资料

bshare