http://share.baidu.com/code/advance
一、概述 百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节。
二、代码结构 分享代码可以分为三个部分:HTML、设置和js加载,示例如下:
代码结构如下:
代码语言:javascript代码运行次数:0运行复制
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)];
三、按钮标签 按钮标签代码
代码语言:javascript代码运行次数:0运行复制
说明:只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。
HTML结构可以放在body的任意位置,可复制多份。
class=”bdsharebuttonbox” 部分为dom选择器,请勿改动。
data-tag属性为分享按钮标识,用于实现同一页面中多分享按钮不同配置,详见设置部分。
data-cmd属性为分享目标标识,取值请参见:分享媒体id对应表。此外值为more时点击展现更多弹窗,值为count时展现分享数。
HTML代码中其他部分均可自定义。
四、自定义设置 设置部分结构如下,如不需要某项功能,删除相应的配置项即可。
设置:
代码语言:javascript代码运行次数:0运行复制
window._bd_share_config = {
common : {
//此处放置通用设置
},
share : [
//此处放置分享按钮设置
],
slide : [
//此处放置浮窗分享设置
],
image : [
//此处放置图片分享设置
],
selectShare : [
//此处放置划词分享设置
]
}
4.1 通用设置
通用设置将作用于所有分享类型,可将通用设置放于此处,如分享内容、分享url等。
通用设置
代码语言:javascript代码运行次数:0运行复制
window._bd_share_config = {
common : {
bdText : '',
bdDesc : '',
bdUrl : '',
bdPic : '',
...
}
}
通用设置项解析:
配置项名称
值类型
格式和取值
描述
bdText
string
自定义
分享的内容
bdDesc
string
自定义
分享的摘要
bdUrl
string
自定义
分享的Url地址
bdPic
string
自定义
分享的图片
bdSign
string
on|off|normal
是否进行回流统计。 ‘on’: 默认值,使用正常方式挂载回流签名(#[数字签名]) ‘off’: 关闭数字签名,不统计回流量 ‘normal’: 使用&符号连接数字签名,不破坏原始url中的#锚点
bdMini
int
1|2|3
下拉浮层中分享按钮的列数
bdMiniList
array
[‘qzone’,’tsina’,…]
自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
onBeforeClick
function
function(cmd,config){}
在用户点击分享按钮时执行代码,更改配置。 cmd为分享目标id,config为当前设置,返回值为更新后的设置。
onAfterClick
function
function(cmd){}
在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。
bdPopupOffsetLeft
int
正|负数
下拉浮层的y偏移量
bdPopupOffsetTop
int
正|负数
下拉浮层的x偏移量
4.2 分享按钮设置
分享按钮设置的值为数组或对象,值为数组时可对多个分享按钮应用不同的设置。
分享按钮设置
代码语言:javascript代码运行次数:0运行复制
window._bd_share_config = {
share : [{
"tag" : "share_1",
"bdSize" : 32,
...
},{
"tag" : "share_2",
"bdSize" : 16,
...
}]
}
分享按钮配置项解析:
配置项名称
值类型
格式和取值
描述
tag
string
与data-tag一致
表示该配置只会应用于data-tag值一致的分享按钮。 如果不设置tag,该配置将应用于所有分享按钮。
bdSize
int
16|24|32
分享按钮的尺寸
bdCustomStyle
string
样式文件地址
自定义样式,引入样式文件
4.3 浮窗分享设置
浮窗分享设置的值为数组或对象,值为数组时可在页面显示多个分享浮窗。
浮窗分享设置
代码语言:javascript代码运行次数:0运行复制
window._bd_share_config = {
slide : [{
bdImg : 0,
bdPos : "right",
bdTop : 100
},{
bdImg : 0,
bdPos : "left",
bdTop : 100
}]
}
浮窗分享设置项解析:
配置项名称
值类型
格式和取值
描述
bdImg
string
0|1|2|3|4|5|6|7|8
分享浮窗图标的颜色。
bdPos
string
left|right
分享浮窗的位置
bdTop
int
分享浮窗与可是区域顶部的距离(px)
4.4 图片分享设置
图片分享设置的值为数组或对象,值为数组时可对图片应用不同的设置。
图片分享设置
代码语言:javascript代码运行次数:0运行复制
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']
}]
}
图片分享设置项解析:
配置项名称
值类型
格式和取值
描述
tag
string
与data-tag一致
表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。
viewType
string
list|collection
图片分享按钮样式。
viewPos
string
top|bottom
图片分享展示层的位置。
viewColor
string
black|white
图片分享展示层的背景颜色。
viewSize
int
16|24|32
图片分享展示层的图标大小。
viewList
array
[‘qzone’,’tsina’,…]
自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表
4.5 划词分享设置
划词分享设置
代码语言:javascript代码运行次数:0运行复制
window._bd_share_config = {
selectShare : [{
"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],
"bdContainerClass" : "容器class名"
}]
}
图片分享设置项解析:
配置项名称
值类型
格式和取值
描述
bdSelectMiniList
array
[‘qzone’,’tsina’,…]
自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表
bdContainerClass
string
myclassname
自定义划词分享的激活区域
五、引入javascript 加载js
代码语言:javascript代码运行次数:0运行复制
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)];
说明:
请将代码放于