自定义百度分享

WindCoder

发布于 2018-09-20 15:59:53

3960

发布于 2018-09-20 15:59:53

文章被收录于专栏：WindCoder

网上教程太多，具体步骤不再一一叙述，仅提几个注意点，最后会提供源码下载，应该会很容易看懂。

演示页面仅提供自定义一个分享组件的演示效果，下载源码中包含两个分享组件的源码。

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、自定义图片与样式

<a>标签中的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,属性，数值不唯一，不然容易出现点击一次后再回来点击时分享按钮图片变小等未知问题。

参考资料

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

自定义百度分享

自定义百度分享

1、一个分享组件一个Div

2、自定义图片与样式

参考资料

相关下载

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐