百度分享2.0使用教程

时间 2019-11-14

标签百度分享 2.0 使用教程繁體版

原文原文链接

参考：http://share.baidu.com/code/advancehtml

添加普通页面分享:web

<div class="bdsharebuttonbox" data-tag="share_1">
<!--其中class="bdsharebuttonbox不能够改动，若是只有一个分享的话data-tag能够删除掉，它用于设置多组分享按钮-->
<!--下面的每一个a标签除了data-cmd须要正确设置之外，其余均可以自定义，可添加，可删除，可对换，其中data-cmd的值在http://share.baidu.com/code/advance#toid能够找到，data-cmd用于指定是哪种分享-->
    <a class="bds_tqq" data-cmd="tqq"></a>
    <a class="bds_tsina" data-cmd="tsina"></a>
    <a class="bds_qzone" data-cmd="qzone"></a>
    <a class="bds_sqq" data-cmd="sqq"></a>
    <a class="bds_tqf" data-cmd="tqf"></a>
    <a class="bds_kaixin001" data-cmd="kaixin001"></a>
    <a class="bds_renren" data-cmd="renren"></a>
    <a class="bds_copy" data-cmd="copy"></a> <!--copy会复制标题和连接，因此页面要设置好title-->
</div>
<script>
    //通用分享设置，更详细的设置能够查看http://share.baidu.com/code/advance#config-common
    window._bd_share_config = {
        common : {        
            bdText : '我是通用分享设置',
            bdDesc : '我是通用分享设置',
            bdComment : '我是通用分享设置,会出如今发送给QQ好友里',
            bdUrl : 'http://www.baidu.com/',
            bdPic : 'http://share.baidu.com/static/base/img/logo.gif',
            bdSize : 16 //按钮大小16/24/32
        },
        share:{ //普通页面分享按钮必须有这个属性，可放空，也能够设置属性覆盖上面common的属性值。下面会给出设置多组分享按钮如何使用这个share
        //bdCustomStyle:"自定义样式"，可以使用自定义样式来设置分享按钮所使用的图标
        }
    }
    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>

设置多组分享:api

<div class="bdsharebuttonbox" data-tag="share_1">
<!--data-tag用于设置多组分享-->
<!--下面的每一个a标签除了data-cmd须要正确设置之外，其余均可以自定义，可添加，可删除，可对换其中data-cmd的值在http://share.baidu.com/code/advance#toid能够找到，data-cmd用于指定是哪种分享-->
    <a class="bds_tqq" data-cmd="tqq"></a>
    <a class="bds_tsina" data-cmd="tsina"></a>
    <a class="bds_qzone" data-cmd="qzone"></a>
    <a class="bds_sqq" data-cmd="sqq"></a>
    <a class="bds_tqf" data-cmd="tqf"></a>
    <a class="bds_kaixin001" data-cmd="kaixin001"></a>
    <a class="bds_renren" data-cmd="renren"></a>
    <a class="bds_copy" data-cmd="copy"></a> <!--copy会复制标题和连接，因此页面要设置好title-->
</div>
<div class="bdsharebuttonbox" data-tag="share_2">
<!--data-tag设置第二组分享-->
<!--下面的每一个a标签除了data-cmd须要正确设置之外，其余均可以自定义，可添加，可删除，可对换其中data-cmd的值在http://share.baidu.com/code/advance#toid能够找到，data-cmd用于指定是哪种分享-->
    <a class="bds_tqq" data-cmd="tqq"></a>
    <a class="bds_tsina" data-cmd="tsina"></a>
    <a class="bds_qzone" data-cmd="qzone"></a>
    <a class="bds_sqq" data-cmd="sqq"></a>
    <a class="bds_tqf" data-cmd="tqf"></a>
    <a class="bds_kaixin001" data-cmd="kaixin001"></a>
    <a class="bds_renren" data-cmd="renren"></a>
    <a class="bds_copy" data-cmd="copy"></a> <!--copy会复制标题和连接，因此页面要设置好title-->
</div>
<script>
    window._bd_share_config = {
        common : {        
            bdText : '多组分享设置bdText',
            bdDesc : '多组分享设置bdDesc',
            bdComment : '多组分享设置bdComment',
            bdUrl : 'http://www.baidu.com/',
            bdPic : 'http://share.baidu.com/static/base/img/logo.gif',
            bdSize : 16 //按钮大小16/24/32
        },
        share:[ //多组分享使用数组,每个分享对应一个对象
            {
                tag: 'share_1', //这个设置与上面div的data-tag标签的值一致
                bdText : '多组分享设置bdText share_1',
                bdUrl : 'http://www.baidu.com/',
                bdSize : 32
            },
            {
                tag: 'share_2',
                bdUrl : 'http://www.google.com/'
                //bdSize没有设置，调用common的设置。
            }
        ]
    }
    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>

浮窗分享:数组

浮窗分享不须要设置任何html代码。app

<script>
    window._bd_share_config = {
        common : {        
            bdText : '多组分享设置bdText',
            bdDesc : '多组分享设置bdDesc',
            bdComment : '多组分享设置bdComment',
            bdUrl : 'http://www.baidu.com/',
            bdPic : 'http://share.baidu.com/static/base/img/logo.gif',
            bdSize : 16,        //按钮大小16/24/32
            bdMini : 1,             //设置浮窗按钮的列数，值为1|2|3
            bdMiniList : ['tqq', 'tsina', 'qzone', 'sqq', 'tqf', 'kaixin001', 'renren', 'copy']    //设置按钮顺序，根据分享id设置，与普通分享的data-cms同样，http://share.baidu.com/code/advance#toid
        },
        slide : {         //slide的设置与share属性相似, 多个浮窗一样使用数组
            bdImg : 2,         //颜色0｜1｜2｜3｜4｜5｜6｜7｜8    
            bdPos : 'left',     //位置left|right，浮在左边仍是右边
            bdTop : 240      //距窗口顶部的距离，单位是px
        }    
    }
    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>

图片分享:ide

若是不是对页面全部的图片都设置分享，那么须要添加data-tag到须要分享的图片上google

<img src="http://share.baidu.com/static/web/img/imagesharepreview.jpg" data-tag="imgshare_1" />
<script>
    window._bd_share_config = {
        common : {        
            bdText : '多组分享设置bdText',
            bdDesc : '多组分享设置bdDesc',
            bdComment : '多组分享设置bdComment',
            bdUrl : 'http://www.baidu.com/',
            bdPic : 'http://share.baidu.com/static/base/img/logo.gif'
        },
        image : {         //image的设置与share属性相似, 多个设置使用数组
            tag : 'imgshare_1',
            viewPos : 'top',         //值为top|bottom
            viewList : ['tqq', 'tsina', 'qzone', 'sqq', 'tqf', 'kaixin001', 'renren', 'copy'],
            viewSize : 16             //16|24|32
            //viewColor : 'black',    //底色 white|black
            //viewType : 'list',         //分享样式 list|collection
        }    
    }
    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>

划词分享:spa

划词分享(须要划至少5个字才会有分享出现)，若是只对部分文字设置这个功能，须要在配置里设置bdContainerClass这个属性，而且在对应的文字外层加一个class属性，好比如今这段字，就加了一个叫textshare的class，而且在下面的代码设置里，加了一bdContainerClass: 'textshare'这一属性。因此对这段字随便划词就会有分享按钮了。code

<p> class="textshare">划词分享，若是只对部分文字设置这个功能，须要在配置里设置bdContainerClass这个属性，而且在对应的文字外层加一个class属性，好比如今这段字，就加了一个叫textshare的class，而且在下面的代码设置里（查看源码），加了一bdContainerClass: 'textshare'这一属性。因此对这段字随便划词就会有分享按钮了。</p>
<script>
    //通用分享设置，更详细的设置能够查看http://share.baidu.com/code/advance#config-common
    window._bd_share_config = {
        common : {        
            bdText : '多组分享设置bdText',
            bdDesc : '多组分享设置bdDesc',
            bdComment : '多组分享设置bdComment',
            bdUrl : 'http://www.baidu.com/',
            bdPic : 'http://share.baidu.com/static/base/img/logo.gif'
        },
        selectShare : {
            bdSelectMiniList : ['tqq', 'tsina', 'qzone', 'sqq', 'tqf', 'kaixin001', 'renren', 'copy'],
            bdContainerClass : 'textshare'
        }    
    }
    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>