乐趣区

关于前端:百度分享插件的使用

jiezi

原文链接：百度分享插件的应用

效果图

代码构造

百度分享代码能够分为三个局部：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

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

<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

我我的项目中应用的代码 

<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>
退出移动版