likes
comments
collection
share

百度分享插件的使用

作者站长头像
站长
· 阅读数 294
原文链接：百度分享插件的使用

效果图

百度分享插件的使用

代码结构

百度分享代码可以分为三个部分：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>

通用设置项解析：

配置项名称值类型格式和取值描述
bdTextstring自定义分享的内容
bdDescstring自定义分享的摘要
bdUrlstring自定义分享的Url地址
bdPicstring自定义分享的图片
bdSignstringon ｜ off ｜ normal是否进行回流统计。'on': 默认值，使用正常方式挂载回流签名（#[数字签名]）'off': 关闭数字签名，不统计回流量 'normal': 使用&符号连接数字签名，不破坏原始url中的#锚点。
bdMiniint1 ｜ 2 ｜ 3下拉浮层中分享按钮的列数
bdMiniListarray['qzone','tsina',...]自定义下拉浮层中的分享按钮类型和排列顺序。
onBeforeClickfunctionfunction(cmd,config){}在用户点击分享按钮时执行代码，更改配置。 cmd为分享目标id，config为当前设置，返回值为更新后的设置。
onAfterClickfunctionfunction(cmd){}在用户点击分享按钮后执行代码，cmd为分享目标id。可用于统计等。
bdPopupOffsetLeftint正｜负数下拉浮层的y偏移量
bdPopupOffsetTopint正｜负数下拉浮层的x偏移量

分享按钮设置

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

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

分享按钮配置项解析：

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

浮窗分享设置

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

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

浮窗分享设置项解析：

配置项名称值类型格式和取值描述
bdImgstring0｜1｜2｜3｜4｜5｜6｜7｜8分享浮窗图标的颜色。
bdPosstringleft｜right分享浮窗的位置
bdTopint 分享浮窗与可是区域顶部的距离(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>

图片分享设置项解析：

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

划词分享设置

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

图片分享设置项解析：

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

引入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
一键分享mshareQQ空间qzone
新浪微博tsina人人网renren
腾讯微博tqq百度相册bdxc
开心网kaixin001腾讯朋友tqf
百度贴吧tieba豆瓣网douban
百度新首页bdhomeQQ好友sqq
和讯微博thx百度云收藏bdysc
美丽说meilishuo蘑菇街mogujie
点点网diandian花瓣huaban
堆糖duitang和讯hx
飞信fx有道云笔记youdao
麦库记事sdo轻笔记qingbiji
人民微博people新华微博xinhua
邮件分享mail我的搜狐isohu
摇篮空间yaolan若邻网wealink
天涯社区tyFacebookfbook
Twittertwilinkedinlinkedin
复制网址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>