Web笔记··By/蜜汁炒酸奶

自定义百度分享

web
1846 13

网上教程太多，具体步骤不再一一叙述，仅提几个注意点，最后会提供源码下载，应该会很容易看懂。 演示页面仅提供自定义一个分享组件的演示效果，下载源码中包含两个分享组件的源码。

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

“ 分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。”即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

需要在后面分享按钮设置中引用，如

<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

share中每个tag属性对应Div中data-tag的属性。 **注:**即使自定义，最好也添加"bdSize" : 32,属性，数值不唯一，不然容易出现点击一次后再回来点击时分享按钮图片变小等未知问题。

参考资料

百度分享代码官方参考文档

预览
除特别注明外，本站所有文章均为 windcoder 原创，转载请注明出处来自： zi-ding-yi-bai-du-fen-xiang
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0
Loading comments...
13 条评论
  • W
    上海seo2015-06-08 08:00:00

    我直接用的插件。。 :!:

  • W
    电影王国2015-06-05 08:00:00

    学习了！Thanks~博主。

  • W
    IT家园2015-06-02 08:00:00

    怎么在自定义分享中加入appkey,比如：分享到微博后，微博中就会显示该分享来自与你的网站，而不是分享按钮。

  • W
    毕业生2015-05-29 08:00:00

    悄悄放入收藏夹以后留着用！

  • W
    感人爱情小故事2015-05-21 08:00:00

    既然爱，为什么不说出口，有些东西失去了，就再也回不来了。

  • W
    wys.me2015-05-20 08:00:00

    博主有办法在博客中的图片上（某个角）加一个浮层水印吗？即浏览博客时看到图片上有水印，直接右键复制图片会带上水印，另存图片也会带上水印；但是，通过本站图片url地址下载的话上面是不带水印的。

    • W
      蜜汁炒酸奶 2015-05-22 08:00:00

      回复 @wys.me： 这个还真没研究过

  • W
    老何2015-05-20 08:00:00

    貌似ADbLOK会把百度分享的代码屏蔽

    • W
      蜜汁炒酸奶 2015-05-22 08:00:00

      回复 @老何： 至少我这的还没被屏蔽

example
预览