?
? 文章出處：http://share.baidu.com/code/advance
?
一、概述
百度分享代碼已升級到2.0，本頁將介紹新版百度分享的安裝配置方法，請點擊左側列表查看相關章節。
二、代碼結構
分享代碼可以分為三個部分：HTML、設置和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" 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>
說明：
只有普通頁面分享需要按鈕標簽。劃詞分享、圖片分享無需添加HTML結構。
HTML結構可以放在body的任意位置，可復制多份。
class＝"bdsharebuttonbox" 部分為dom選擇器，請勿改動。
data-tag屬性為分享按鈕標識，用于實現同一頁面中多分享按鈕不同配置，詳見設置部分。
data-cmd屬性為分享目標標識，取值請參見：分享媒體id對應表。此外值為more時點擊展現更多彈窗，值為count時展現分享數。
HTML代碼中其他部分均可自定義。
四、自定義設置
設置部分結構如下，如不需要某項功能，刪除相應的配置項即可。
設置：
<script>window._bd_share_config = {common : {//此處放置通用設置},share : [//此處放置分享按鈕設置],slide : [//此處放置浮窗分享設置],image : [//此處放置圖片分享設置],selectShare : [//此處放置劃詞分享設置]}
</script>
4.1 通用設置
通用設置將作用于所有分享類型，可將通用設置放于此處，如分享內容、分享url等。
通用設置
<script>window._bd_share_config = {common : { bdText : '', bdDesc : '', bdUrl : '', bdPic : '', ...}}
</script>
通用設置項解析：
| 配置項名稱 | 值類型 | 格式和取值 | 描述 |
|---|---|---|---|
| bdText | string | 自定義 | 分享的內容 |
| bdDesc | string | 自定義 | 分享的摘要 |
| bdUrl | string | 自定義 | 分享的Url地址 |
| bdPic | string | 自定義 | 分享的圖片 |
| bdSign | string | on｜off｜normal | 是否進行回流統計。 'on': 默認值，使用正常方式掛載回流簽名（#[數字簽名]） 'off': 關閉數字簽名，不統計回流量 'normal': 使用&符號連接數字簽名，不破壞原始url中的#錨點 |
| bdMini | int | 1｜2｜3 | 下拉浮層中分享按鈕的列數 |
| bdMiniList | array | ['qzone','tsina',...] | 自定義下拉浮層中的分享按鈕類型和排列順序。詳見分享媒體id對應表 |
| onBeforeClick | function | function(cmd,config){} | 在用戶點擊分享按鈕時執行代碼，更改配置。 cmd為分享目標id，config為當前設置，返回值為更新后的設置。 |
| onAfterClick | function | function(cmd){} | 在用戶點擊分享按鈕后執行代碼，cmd為分享目標id。可用于統計等。 |
| bdPopupOffsetLeft | int | 正｜負數 | 下拉浮層的y偏移量 |
| bdPopupOffsetTop | int | 正｜負數 | 下拉浮層的x偏移量 |
分享按鈕設置的值為數組或對象，值為數組時可對多個分享按鈕應用不同的設置。
分享按鈕設置
<script>window._bd_share_config = {share : [{"tag" : "share_1","bdSize" : 32,...},{"tag" : "share_2","bdSize" : 16,...}]}
</script>
分享按鈕配置項解析：
| 配置項名稱 | 值類型 | 格式和取值 | 描述 |
|---|---|---|---|
| tag | string | 與data-tag一致 | 表示該配置只會應用于data-tag值一致的分享按鈕。 如果不設置tag，該配置將應用于所有分享按鈕。 |
| bdSize | int | 16｜24｜32 | 分享按鈕的尺寸 |
| bdCustomStyle | string | 樣式文件地址 | 自定義樣式，引入樣式文件 |
4.3 浮窗分享設置
浮窗分享設置的值為數組或對象，值為數組時可在頁面顯示多個分享浮窗。
浮窗分享設置
<script>window._bd_share_config = {slide : [{ bdImg : 0,bdPos : "right",bdTop : 100},{bdImg : 0,bdPos : "left",bdTop : 100}]}
</script>
浮窗分享設置項解析：
| 配置項名稱 | 值類型 | 格式和取值 | 描述 |
|---|---|---|---|
| bdImg | string | 0｜1｜2｜3｜4｜5｜6｜7｜8 | 分享浮窗圖標的顏色。 |
| bdPos | string | left｜right | 分享浮窗的位置 |
| bdTop | int | ? | 分享浮窗與可是區域頂部的距離(px) |
4.4 圖片分享設置
圖片分享設置的值為數組或對象，值為數組時可對圖片應用不同的設置。
圖片分享設置
<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>
圖片分享設置項解析：
| 配置項名稱 | 值類型 | 格式和取值 | 描述 |
|---|---|---|---|
| tag | string | 與data-tag一致 | 表示該配置只會應用于data-tag值一致的圖片。如果不設置tag，該配置將應用于所有圖片。 |
| viewType | string | list｜collection | 圖片分享按鈕樣式。 |
| viewPos | string | top｜bottom | 圖片分享展示層的位置。 |
| viewColor | string | black｜white | 圖片分享展示層的背景顏色。 |
| viewSize | int | 16｜24｜32 | 圖片分享展示層的圖標大小。 |
| viewList | array | ['qzone','tsina',...] | 自定義展示層中的分享按鈕類型和排列順序。詳見分享媒體id對應表 |
?
劃詞分享設置
<script>window._bd_share_config = {selectShare : [{"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],"bdContainerClass" : "容器class名"}]}
</script>
圖片分享設置項解析：
| 配置項名稱 | 值類型 | 格式和取值 | 描述 |
|---|---|---|---|
| bdSelectMiniList | array | ['qzone','tsina',...] | 自定義彈出浮層中的分享按鈕類型和排列順序。詳見分享媒體id對應表 |
| bdContainerClass | string | myclassname | 自定義劃詞分享的激活區域 |
五、引入javascript
加載js
<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>
說明：
請將代碼放于</body>之前。
六、完整示例代碼
完整代碼如下，請根據自身情況修改。
完整示例代碼
<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 |
| 一鍵分享 | mshare |
| QQ空間 | qzone |
| 新浪微博 | tsina |
| 人人網 | renren |
| 騰訊微博 | tqq |
| 百度相冊 | bdxc |
| 開心網 | kaixin001 |
| 騰訊朋友 | tqf |
| 百度貼吧 | tieba |
| 豆瓣網 | douban |
| 百度新首頁 | bdhome |
| QQ好友 | sqq |
| 和訊微博 | thx |
| 百度云收藏 | bdysc |
| 美麗說 | meilishuo |
| 蘑菇街 | mogujie |
| 點點網 | diandian |
| 花瓣 | huaban |
| 堆糖 | duitang |
| 和訊 | hx |
| 飛信 | fx |
| 有道云筆記 | youdao |
| 麥庫記事 | sdo |
| 輕筆記 | qingbiji |
| 人民微博 | people |
| 新華微博 | xinhua |
| 郵件分享 | |
| 我的搜狐 | isohu |
| 搖籃空間 | yaolan |
| 若鄰網 | wealink |
| 天涯社區 | ty |
| fbook | |
| twi | |
| 復制網址 | copy |
| 打印 | |
| 百度中心 | ibaidu |
| 微信 | weixin |
| 股吧 | iguba |
八、工具
檢測分享代碼版本
//打開已安裝分享代碼的頁面，在控制臺中執行：javascript:b=(window.bdShare||window._bd_share_main);alert(b?'\u5F53\u524D\u9875\u9762\u7684\u5206\u4EAB\u4EE3\u7801\u7248\u672C\u4E3A\uFF1A'+(b.version||'1.0'):'\u5F53\u524D\u9875\u9762\u6CA1\u6709\u5B89\u88C5\u5206\u4EAB\u4EE3\u7801\u3002')
