原文地址：http://share.baidu.com/code/advance#config-slide

一、概述

百度分享代碼已升級到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偏移量

4.2 分享按鈕設置

分享按鈕設置的值為數組或對象，值為數組時可對多個分享按鈕應用不同的設置。

分享按鈕設置

<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對應表

4.5 劃詞分享設置

劃詞分享設置

<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
郵件分享	mail
我的搜狐	isohu
搖籃空間	yaolan
若鄰網	wealink
天涯社區	ty
Facebook	fbook
Twitter	twi
linkedin	linkedin
復制網址	copy
打印	print
百度中心	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')

注意：

您在使用自定義屬性，請您將自定義內容里面涉及到英文單引號(')進行(\')轉義，以免出現問題

總結

以上是生活随笔為你收集整理的Web开发分享qq、微信组件-百度分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。