百度分享插件的使用
效果图
代码结构
百度分享代码可以分为三个部分：HTML、_bd_share_config（具体配置）和js加载。代码如下：
<div class="bdsharebuttonbox" data-tag="share_1">
<!-- 此处添加展示按钮 -->
</div><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">
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href="#" class="bds_linkedin" data-cmd="bds_linkedin" title="分享到bds_linkedin"></a>
<a href="#" class="bds_more" data-cmd="more"></a>
</div>自定义设置
配置如下：
<script>
window._bd_share_config = {
common : {
//此处放置通用设置
},
share : [
//此处放置分享按钮设置
],
slide : [
//此处放置浮窗分享设置
],
image : [
//此处放置图片分享设置
],
selectShare : [
//此处放置划词分享设置
]
}
</script>通用设置
通用设置将作用于所有分享类型，可将通用设置放于此处，如分享内容、分享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 | int | 1 ｜ 2 ｜ 3 | 下拉浮层中分享按钮的列数 |
bdMiniList | array | [‘qzone’,’tsina’,…] | 自定义下拉浮层中的分享按钮类型和排列顺序。 |
onBeforeClick | function | function(cmd,config){} | 在用户点击分享按钮时执行代码，更改配置。 cmd为分享目标id，config为当前设置，返回值为更新后的设置。 |
onAfterClick | function | function(cmd){} | 在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。 |
bdPopupOffsetLeft | int | 正｜负数 | 下拉浮层的y偏移量 |
bdPopupOffsetTop | int | 正｜负数 | 下拉浮层的x偏移量 |
分享按钮设置
分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。
<script>
window._bd_share_config = {
share : [{
"tag" : "share_1",
"bdSize" : 32,
...
},{
"tag" : "share_2",
"bdSize" : 16,
...
}]
}
</script>分享按钮配置项解析：
配置项名称 | 值类型 | 格式和取值 | 描述 |
|---|---|---|---|
tag | string | 与data-tag一致 | 表示该配置只会应用于data-tag值一致的分享按钮。 如果不设置tag，该配置将应用于所有分享按钮。 |
bdSize | int | 16｜24｜32 | 分享按钮的尺寸 |
bdCustomStyle | string | 样式文件地址 | 自定义样式，引入样式文件 |
浮窗分享设置
浮窗分享设置的值为数组或对象，值为数组时可在页面显示多个分享浮窗。
<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 | int | 分享浮窗与可是区域顶部的距离(px) |
图片分享设置
图片分享设置的值为数组或对象，值为数组时可对图片应用不同的设置。
<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>图片分享设置项解析：
配置项名称 | 值类型 | 格式和取值 | 描述 |
|---|---|---|---|
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对应表 |
划词分享设置
<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>完整示例代码
<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>
</div><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 | 名称 | ID |
|---|---|---|---|
印象笔记 | evernotecn | 网易热 | h163 |
一键分享 | mshare | QQ空间 | qzone |
新浪微博 | tsina | 人人网 | renren |
腾讯微博 | tqq | 百度相册 | bdxc |
开心网 | kaixin001 | 腾讯朋友 | tqf |
百度贴吧 | tieba | 豆瓣网 | douban |
百度新首页 | bdhome | QQ好友 | sqq |
和讯微博 | thx | 百度云收藏 | bdysc |
美丽说 | meilishuo | 蘑菇街 | mogujie |
点点网 | diandian | 花瓣 | huaban |
堆糖 | duitang | 和讯 | hx |
飞信 | fx | 有道云笔记 | youdao |
麦库记事 | sdo | 轻笔记 | qingbiji |
人民微博 | people | 新华微博 | xinhua |
邮件分享 | 我的搜狐 | isohu | |
摇篮空间 | yaolan | 若邻网 | wealink |
天涯社区 | ty | fbook | |
twi | |||
复制网址 | copy | 打印 | |
百度中心 | ibaidu | 微信 | weixin |
股吧 | iguba |
我项目中使用的代码
<div class="bdsharebuttonbox">
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href="#" class="bds_linkedin" data-cmd="bds_linkedin" title="分享到bds_linkedin"></a>
<a href="#" class="bds_more" data-cmd="more"></a>
</div><script>
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "0",
"bdSize": "24"
},
"share": {
"bdSize": 24 //分享尺寸
}
};
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>