百度分享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>