百度分享2.0使用教程

參考：http://share.baidu.com/code/advance

添加普通頁面分享:

 

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

設置多組分享:

 

 

<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代碼。

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

圖片分享:

若是不是對頁面全部的圖片都設置分享，那麼須要添加data-tag到須要分享的圖片上

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

劃詞分享:

劃詞分享(須要劃至少5個字纔會有分享出現)，若是隻對部分文字設置這個功能，須要在配置裏設置bdContainerClass這個屬性，而且在對應的文字外層加一個class屬性，好比如今這段字，就加了一個叫textshare的class，而且在下面的代碼設置裏，加了一bdContainerClass: 'textshare'這一屬性。因此對這段字隨便劃詞就會有分享按鈕了。

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