网上教程太多，具体步骤不再一一叙述，仅提几个注意点，最后会提供源码下载，应该会很容易看懂。 演示页面仅提供自定义一个分享组件的演示效果，下载源码中包含两个分享组件的源码。
1、一个分享组件一个Div
一个分享组件对应一个DIV如：
<!-- 分享组件一 --><div class="bdsharebuttonbox" data-tag="share_1"> <!-- 此处添加展示按钮 --> <a class="bds_qzone" data-cmd="qzone" href="#"></a> <a class="bds_tsina" data-cmd="tsina" href="#"></a> <a class="bds_sqq" data-cmd="sqq" href="#"></a> <a class="bds_tqq" data-cmd="tqq" href="#"></a> <a class="bds_weixin" data-cmd="weixin" href="#"></a> <a class="bds_douban" data-cmd="douban" href="#"></a></div><!-- 分享组件二--><div class="bdsharebuttonbox" data-tag="share_2"> <!-- 此处添加展示按钮 --> <a class="bds_qzone" data-cmd="qzone" href="#"></a> <a class="bds_tsina" data-cmd="tsina" href="#"></a> <a class="bds_sqq" data-cmd="sqq" href="#"></a> <a class="bds_tqq" data-cmd="tqq" href="#"></a> <a class="bds_weixin" data-cmd="weixin" href="#"></a> <a class="bds_douban" data-cmd="douban" href="#"></a></div>“ 分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。”即data-tag=“share_1”中的1。（意味着多个百度分享组件，一般用不到。）
2、自定义图片与样式
标签中的class为后面配置文件中对应的class。 如，css样式文件名为：style.css.
.bds_qzone{float: left;font-size: 12px;padding-left: 17px;line-height: 22px;height: 114px;background: url("fenxiang/tkongjian.png");background-repeat: no-repeat;cursor: pointer;margin: 6px 6px 6px 0;width: 70px;
}需要在后面分享按钮设置中引用，如
<script> window._bd_share_config = { share : [ //此处放置分享按钮设置 { "tag" : "share_1", "bdSize" : 32, "bdCustomStyle":"style.css", } ], }</script>share中每个tag属性对应Div中data-tag的属性。 **注:**即使自定义，最好也添加”bdSize” : 32,属性，数值不唯一，不然容易出现点击一次后再回来点击时分享按钮图片变小等未知问题。
评论