自定义百度分享
网上教程太多，具体步骤不再一一叙述，仅提几个注意点，最后会提供源码下载，应该会很容易看懂。 演示页面仅提供自定义一个分享组件的演示效果，下载源码中包含两个分享组件的源码。
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
“ 分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。”即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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
需要在后面分享按钮设置中引用，如
<script>
window._bd_share_config = {
share : [
//此处放置分享按钮设置
{
"tag" : "share_1",
"bdSize" : 32,
"bdCustomStyle":"style.css",
}
],
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
share中每个tag属性对应Div中data-tag的属性。 **注:**即使自定义，最好也添加"bdSize" : 32,属性，数值不唯一，不然容易出现点击一次后再回来点击时分享按钮图片变小等未知问题。
参考资料
Preview
除特别注明外，本站所有文章均为 Windcoder网 原创，转载请注明出处来自： zi-ding-yi-bai-du-fen-xiang
Loading comments...
Preview
我直接用的插件。。 :!:
回复 @上海seo： 哈哈，那也是极好的
学习了！Thanks~博主。
怎么在自定义分享中加入appkey,比如：分享到微博后，微博中就会显示该分享来自与你的网站，而不是分享按钮。
回复 @IT家园： 这个暂时还没研究= =
悄悄放入收藏夹以后留着用！
回复 @毕业生： 哈哈，欢迎
既然爱，为什么不说出口，有些东西失去了，就再也回不来了。
回复 @感人爱情小故事： OoO,这也行
博主有办法在博客中的图片上（某个角）加一个浮层水印吗？即浏览博客时看到图片上有水印，直接右键复制图片会带上水印，另存图片也会带上水印；但是，通过本站图片url地址下载的话上面是不带水印的。
回复 @wys.me： 这个还真没研究过
貌似ADbLOK会把百度分享的代码屏蔽
回复 @老何： 至少我这的还没被屏蔽