相关文章推荐
直爽的毛衣  ·  百度网盘怎么分享链接。-百度经验·  2 年前    · 
直爽的毛衣  ·  华为智慧生活怎么关闭设备和智能按钮振动-百度经验·  2 年前    · 
直爽的毛衣  ·  Windows使用小任务栏按钮如何关闭#校园 ...·  2 年前    · 
直爽的毛衣  ·  百度云的分享链接，如何让它失效？·  2 年前    · 
直爽的毛衣  ·  无障碍按钮怎么关闭-百度经验·  2 年前    · 
小百科  ›  百度分享--分享按钮的实现-阿里云开发者社区
百度分享按钮 string 脚本 软件 阿里
礼貌的哑铃
2 年前
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单 进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
百度分享代码：
<%@ page contentType="text/html;charset=UTF-8"%>
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a><a href="#"
class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#"
class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#"
class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"
class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#"
class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
</div>
<script>
window._bd_share_config = {
"common" : {
"bdSnsKey" : {},
"bdText" : "",
"bdMini" : "2",
"bdMiniList" : false,
"bdPic" : "",
"bdStyle" : "0",
"bdSize" : "24"
},
"share" : {}
};
with (document)
0[(getElementsByTagName('head')[0] || body)
.appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='
+ ~(-new Date() / 36e5)];
</script>
</div>
要注意的是要加上class="bdsharebuttonbox" 属性，class="bds_more" data-cmd="more"这些属性都要加上。
注：只有版本号高于2.0的代码才支持自定义开发，如果您已安装过百度分享，请先 检测版本号 是否符合，再参考此文档，谢谢。

百度分享代码已升级到2.0，本页将介绍新版百度分享的安装配置方法，请点击左侧列表查看相关章节。

二、代码结构

分享代码可以分为三个部分：HTML、设置和js加载，示例如下：

代码结构如下： 

<div class="bdsharebuttonbox" data-tag="share_1">
	<!-- 此处添加展示按钮 -->
<script>
	window._bd_share_config = {
	//此处添加分享具体设置
	//以下为js加载部分
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

三、按钮标签


按钮标签代码


<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="bds_mshare" data-cmd="mshare"></a>
	<a class="bds_qzone" data-cmd="qzone" href="#"></a>
	<a class="bds_tsina" data-cmd="tsina"></a>
	<a class="bds_baidu" data-cmd="baidu"></a>
	<a class="bds_renren" data-cmd="renren"></a>
	<a class="bds_tqq" data-cmd="tqq"></a>
	<a class="bds_more" data-cmd="more">更多</a>
	<a class="bds_count" data-cmd="count"></a>

只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。


HTML结构可以放在body的任意位置，可复制多份。


class＝"bdsharebuttonbox" 部分为dom选择器，请勿改动。


data-tag属性为分享按钮标识，用于实现同一页面中多分享按钮不同配置，详见设置部分。


data-cmd属性为分享目标标识，取值请参见：分享媒体id对应表。此外值为more时点击展现更多弹窗，值为count时展现分享数。


HTML代码中其他部分均可自定义。


四、自定义设置


设置部分结构如下，如不需要某项功能，删除相应的配置项即可。


<script>
	window._bd_share_config = {
		common : {
			//此处放置通用设置
		share : [
			//此处放置分享按钮设置
		slide : [
			//此处放置浮窗分享设置
		image : [
			//此处放置图片分享设置
		selectShare : [
			//此处放置划词分享设置
</script>

4.1 通用设置


通用设置将作用于所有分享类型，可将通用设置放于此处，如分享内容、分享url等。


<script>
	window._bd_share_config = {
		common : {		
			bdText : '',	
			bdDesc : '',	
			bdUrl : '', 	
			bdPic : '',		
</script>

通用设置项解析：

配置项名称
格式和取值
bdText
string
分享的内容
bdDesc
string
分享的摘要
bdUrl
string
分享的Url地址
bdPic
string
分享的图片
bdSign
string
on｜off｜normal
是否进行回流统计。
'on': 默认值，使用正常方式挂载回流签名（#[数字签名]）
'off': 关闭数字签名，不统计回流量
'normal': 使用&符号连接数字签名，不破坏原始url中的#锚点
bdMini
1｜2｜3
下拉浮层中分享按钮的列数
bdMiniList
array
['qzone','tsina',...]
自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
onBeforeClick
function
function(cmd,config){}
在用户点击分享按钮时执行代码，更改配置。
cmd为分享目标id，config为当前设置，返回值为更新后的设置。
onAfterClick
function
function(cmd){}
在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
bdPopupOffsetLeft
下拉浮层的y偏移量
bdPopupOffsetTop
下拉浮层的x偏移量

4.2 分享按钮设置


分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。


分享按钮设置


<script>
	window._bd_share_config = {
		share : [{
			"tag" : "share_1",
			"bdSize" : 32,
			"tag" : "share_2",
			"bdSize" : 16,
</script>

分享按钮配置项解析：

配置项名称
格式和取值
string
与data-tag一致
表示该配置只会应用于data-tag值一致的分享按钮。
如果不设置tag，该配置将应用于所有分享按钮。
bdSize
16｜24｜32
分享按钮的尺寸
bdCustomStyle
string
样式文件地址
自定义样式，引入样式文件

4.3 浮窗分享设置


浮窗分享设置的值为数组或对象，值为数组时可在页面显示多个分享浮窗。


浮窗分享设置


<script>
	window._bd_share_config = {
		slide : [{	   
			bdImg : 0,
			bdPos : "right",
			bdTop : 100
			bdImg : 0,
			bdPos : "left",
			bdTop : 100
</script>

浮窗分享设置项解析：

配置项名称
格式和取值
bdImg
string
0｜1｜2｜3｜4｜5｜6｜7｜8
分享浮窗图标的颜色。
bdPos
string
left｜right
分享浮窗的位置
bdTop
分享浮窗与可是区域顶部的距离(px)

4.4 图片分享设置


图片分享设置的值为数组或对象，值为数组时可对图片应用不同的设置。


图片分享设置


<script>
	window._bd_share_config = {
		image : [{
			"tag" : "img_1",
			viewType : 'list',
			viewPos : 'top',
			viewColor : 'black',
			viewSize : '16',
			viewList : ['qzone','tsina','huaban','tqq','renren']
			"tag" : "img_2",
			viewType : 'list',
			viewPos : 'top',
			viewColor : 'black',
			viewSize : '16',
			viewList : ['qzone','tsina','huaban','tqq','renren']
</script>

图片分享设置项解析：

配置项名称
格式和取值
string
与data-tag一致
表示该配置只会应用于data-tag值一致的图片。如果不设置tag，该配置将应用于所有图片。
viewType
string
list｜collection
图片分享按钮样式。
viewPos
string
top｜bottom
图片分享展示层的位置。
viewColor
string
black｜white
图片分享展示层的背景颜色。
viewSize
16｜24｜32
图片分享展示层的图标大小。
viewList
array
['qzone','tsina',...]
自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表

4.5 划词分享设置


划词分享设置


<script>
	window._bd_share_config = {
		selectShare : [{
			"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
			"bdContainerClass" : "容器class名"
</script>

图片分享设置项解析：

配置项名称
格式和取值
bdSelectMiniList
array
['qzone','tsina',...]
自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
bdContainerClass
string
myclassname
自定义划词分享的激活区域

五、引入javascript


<script>
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

请将代码放于</body>之前。


六、完整示例代码


完整代码如下，请根据自身情况修改。


完整示例代码


<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="bds_mshare" data-cmd="mshare"></a>
	<a class="bds_qzone" data-cmd="qzone" href="#"></a>
	<a class="bds_tsina" data-cmd="tsina"></a>
	<a class="bds_baidu" data-cmd="baidu"></a>
	<a class="bds_renren" data-cmd="renren"></a>
	<a class="bds_tqq" data-cmd="tqq"></a>
	<a class="bds_more" data-cmd="more">更多</a>
	<a class="bds_count" data-cmd="count"></a>
<script>
	window._bd_share_config = {
		common : {
			bdText : '自定义分享内容',	
			bdDesc : '自定义分享摘要',	
			bdUrl : '自定义分享url地址', 	
			bdPic : '自定义分享图片'
		share : [{
			"bdSize" : 16
		slide : [{	   
			bdImg : 0,
			bdPos : "right",
			bdTop : 100
		image : [{
			viewType : 'list',
			viewPos : 'top',
			viewColor : 'black',
			viewSize : '16',
			viewList : ['qzone','tsina','huaban','tqq','renren']
		selectShare : [{
			"bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

七、分享媒体id对应表


分享媒体id对应表

mshare
qzone
tsina
renren
kaixin001
tieba
douban
tsohu
百度新首页
bdhome
百度云收藏
bdysc
meilishuo
mogujie
diandian
huaban
duitang
有道云笔记
youdao
qingbiji
people
xinhua
isohu
yaolan
wealink
Facebook
fbook
Twitter
linkedin
linkedin
print
百度个人中心
ibaidu
weixin
iguba

检测分享代码版本


	//打开已安装分享代码的页面，在控制台中执行：
	javascript:b=(window.bdShare||window._bd_share_main);alert(b?'\u5F53\u524D\u9875\u9762\u7684\u5206\u4EAB\u4EE3\u7801\u7248\u672C\u4E3A\uFF1A'+(b.version||'1.0'):'\u5F53\u524D\u9875\u9762\u6CA1\u6709\u5B89\u88C5\u5206\u4EAB\u4EE3\u7801\u3002')

您在使用自定义属性，请您将自定义内容里面涉及到英文单引号(')进行(\')转义，以免出现问题
 
推荐文章
直爽的毛衣  ·  百度网盘怎么分享链接。-百度经验
2 年前
直爽的毛衣  ·  华为智慧生活怎么关闭设备和智能按钮振动-百度经验
2 年前
直爽的毛衣  ·  Windows使用小任务栏按钮如何关闭#校园分享#-百度经验
2 年前
直爽的毛衣  ·  百度云的分享链接，如何让它失效？
2 年前
直爽的毛衣  ·  无障碍按钮怎么关闭-百度经验
2 年前
Link管理   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南