一鍵分享代碼

時間  2019-11-22
標籤 一鍵 分享 代碼 简体版
原文   原文鏈接

 

 　文章出處：http://share.baidu.com/code/advancejavascript

 

1、概述

百度分享代碼已升級到2.0，本頁將介紹新版百度分享的安裝配置方法，請點擊左側列表查看相關章節。html

2、代碼結構

分享代碼能夠分爲三個部分：HTML、設置和js加載，示例以下：java

代碼結構以下：api

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

3、按鈕標籤

按鈕標籤代碼數組

<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結構。app

HTML結構能夠放在body的任意位置，可複製多份。dom

class＝"bdsharebuttonbox" 部分爲dom選擇器，請勿改動。ide

data-tag屬性爲分享按鈕標識，用於實現同一頁面中多分享按鈕不一樣配置，詳見設置部分。工具

data-cmd屬性爲分享目標標識，取值請參見：分享媒體id對應表。此外值爲more時點擊展示更多彈窗，值爲count時展示分享數。

HTML代碼中其餘部分都可自定義。

4、自定義設置

設置部分結構以下，如不須要某項功能，刪除相應的配置項便可。

設置：

<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 自定義劃詞分享的激活區域

5、引入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>以前。

6、完整示例代碼

完整代碼以下，請根據自身狀況修改。

完整示例代碼

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

7、分享媒體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

8、工具

檢測分享代碼版本

	//打開已安裝分享代碼的頁面，在控制檯中執行：
	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')

注意：

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

 

例子：

<table>
<tr>
<td width="230">
<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1480901225002">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a>
<a class="bds_more" data-cmd="more">更多</a>
<a class="bds_count" data-cmd="count" title="累計分享0次">0</a>
</div>
<script>
window._bd_share_config =
{
"common": {
"bdSnsKey": {},
"bdText": "分享顯示的摘要",
"bdUrl": "文章的地址",
"bdDesc": "",
"bdPic": "顯示的圖片",
"bdMini": "2",
"bdMiniList": false,
"bdStyle": "0",
"bdSize": "16"
},
"share": {},
"image": {
"viewList": ["weixin", "qzone", "tsina", "tqq", "renren"],
"viewText": "分享到：", "viewSize": "16"
},
"selectShare":
{
"bdContainerClass": "fulltext_body1",
"bdSelectMiniList": ["weixin", "qzone", "tsina", "tqq", "renren"]
}
};
with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
</td>

</tr> </table>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程