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

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

效果图

代码构造

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

通用设置项解析：

分享按钮设置

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

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

分享按钮配置项解析：

浮窗分享设置

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

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

浮窗分享设置项解析：

图片分享设置

图片分享设置的值为数组或对象，值为数组时可对图片利用不同的设置。

<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>

图片分享设置项解析：

划词分享设置

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

图片分享设置项解析：

引入 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 对应表

我我的项目中应用的代码

<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>