百度分享插件的相关参数

一、概述

百度分享代码已升级到2.0，本页将介绍新版百度分享的安装配置方法

二、代码结构

分享代码可以分为三个部分：HTML、设置和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" 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>

说明：

只有普通页面分享需要按钮标签。划词分享、图片分享无需添加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	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 分享按钮设置

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

分享按钮设置

<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	样式文件地址	自定义样式，引入样式文件

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	int		分享浮窗与可是区域顶部的距离(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>

图片分享设置项解析：

配置项名称	值类型	格式和取值	描述
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 划词分享设置

划词分享设置

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

图片分享设置项解析：

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

五、引入javascript

加载js

<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
邮件分享	mail
我的搜狐	isohu
摇篮空间	yaolan
若邻网	wealink
天涯社区	ty
Facebook	fbook
Twitter	twi
linkedin	linkedin
复制网址	copy
打印	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')

注意：

您在使用自定义属性，请您将自定义内容里面涉及到英文单引号(’)进行(’)转义，以免出现问题

<!DOCTYPE html>
<html>
<head><title>分享Share</title><meta charset="utf-8" />
</head>
<body>
<div class="bdsharebuttonbox" data-tag="share_1"><a class="bds_tsina" data-cmd="tsina"></a><a class="bds_sqq" data-cmd="sqq"></a><a class="bds_qzone" data-cmd="qzone"></a><a class="bds_weixin" data-cmd="weixin"></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: 'Custom share content',bdDesc: 'Custom share summary',bdUrl: 'Custom share URL address',bdPic: 'Custom share pictures'},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>
</body>
</html>

HTML分享内容到QQ，微信，微博等平台,百度分享插件的相关参数相关推荐

HTML5 实现分享功能（QQ 微信微博）
转:http://www.guaichai.com/web/htmlcss/7649.html 今天为大家介绍HTML5如何实现分享功能,有需要的小伙伴参考一下,具体内容如下:这是分享按钮:<b ...
Oauth2.0 QQ微信微博实现第三方登陆
一.写在前面目前对于大多数的App或Web网站都支持有第三方登陆这个功能,用户可使用 QQ/ 微信/ 微博帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户.最近在新项目上刚好用到了,在 ...
访问量分类统计（QQ,微信,微博,网页,网站APP,其他）
刚准备敲键盘,突然想起今天已经星期五了,有点小兴奋,一周又这么愉快的结束,又可以休息了,等等..我好像是来写Java博客的,怎么变成了写日记,好吧,言归正传. 不知道大家有没有遇到过这样的需求:统计一 ...
实现在App端授权qq/微信/微博登录
App端登陆相关的SDK需要在manifest中配置: 打开 manifest.json -> App模块权限配置,勾选 OAuth(登陆鉴权). 打开 manifest.json -> ...
安卓三方登录趟坑,QQ,微信,微博,Twitter,Facebook,Instagram
前言最近给app加入三方登录,由于比较多,所以就用的友盟统一登录,会比一个一个配置方便点正文先说QQ,微信,微博: 国内QQ,微信,微博三方登录其实还行,并没有太多坑,文档也挺完善的. 但是需要 ...
qq分享内容修改 html,微信，qq等渠道h5页面设置分享内容的多种方式
在常见的分享落地业务中,产品经理或者运营同学经常要求分享出去的网页能携带分享图片,页面描述以及页面标题. 那么怎么才能解决部分问题呢,以下有几种解决方案以供参考. 传统方式最传统的方式,无非为设置t ...
Android三方登陆之QQ,微信,微博登录及注意事项
简介在我们的应用中,一般都有三方登录这个功能,对于这个常用的功能,我们一般会有如下处理方式导入三方sdk,按照文档开发使用如ShareSDK类三方组件来实现 ShareSDK 官方Demo: T ...
vue+cordova 实现第三方登录（ QQ 微信微博）之微信登录
概要 1.首先先到各个开放平台申请开发者账号先申请,审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/ 腾讯开放平台 http://open.qq.com/ ...
MVC：用bShare插件分享内容至QQ空间
参考网址:https://blog.csdn.net/u013126379/article/details/52862080 html: <div><img id="img ...

HTML分享内容到QQ，微信，微博等平台,百度分享插件的相关参数