1. 程式人生 > >分享到微信微博空間等第三方平臺的JS代碼

分享到微信微博空間等第三方平臺的JS代碼

name rep renren share menubar 代碼 shu status 簡單

分享功能有利於傳播更多優質的內容,所以在web項目中也是比較常用的。今天就抽空整理下常用的分享平臺的JS代碼。這些代碼可以在對應平臺的官方網站上生成,官網上對分享內容的參數也有詳盡說明。這裏只對常用的幾個參數說明下,案例未做兼容性處理,建議在chrome下預覽。

1.分享到微信,易信

分享到微信,易信比較簡單,貼上分享鏈接的二維碼就可以了。

二維碼生成地址:http://cli.im/ (網上隨便搜的)

2.分享到新浪微博

代碼如下:

var _shareUrl = ‘http://v.t.sina.com.cn/share/share.php?&appkey=895033136‘;     //真實的appkey ,必選參數
    _shareUrl += ‘&url=‘+ encodeURIComponent(_url||document.location);     //參數url設置分享的內容鏈接|默認當前頁location,可選參數
    _shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title);    //參數title設置分享的標題|默認當前頁標題,可選參數
    _shareUrl += ‘&source=‘ + encodeURIComponent(_source||‘‘);
    _shareUrl += ‘&sourceUrl=‘ + encodeURIComponent(_sourceUrl||‘‘);
    _shareUrl += ‘&content=‘ + ‘utf-8‘;   //參數content設置頁面編碼gb2312|utf-8,可選參數
    _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);  //參數pic設置圖片鏈接|默認為空,可選參數
    window.open(_shareUrl,‘_blank‘,‘toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0,‘ + ‘width=‘ + _width + ‘,height=‘ + _height + ‘,top=‘ + (screen.height-_height)/2 + ‘,left=‘ + (screen.width-_width)/2);    

appkey為必填參數。

詳情請參考:http://open.weibo.com/wiki/ShareCode

3.分享到QQ空間

代碼如下:

var _shareUrl = ‘http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?‘;
    _shareUrl += ‘url=‘ + encodeURIComponent(_url||document.location);   //參數url設置分享的內容鏈接|默認當前頁location
    _shareUrl += ‘&showcount=‘ + _showcount||0;      //參數showcount是否顯示分享總數,顯示:‘1‘,不顯示:‘0‘,默認不顯示
    _shareUrl += ‘&desc=‘ + encodeURIComponent(_desc||‘分享的描述‘);    //參數desc設置分享的描述,可選參數
    _shareUrl += ‘&summary=‘ + encodeURIComponent(_summary||‘分享摘要‘);    //參數summary設置分享摘要,可選參數
    _shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title);    //參數title設置分享標題,可選參數
    _shareUrl += ‘&site=‘ + encodeURIComponent(_site||‘‘);   //參數site設置分享來源,可選參數
    _shareUrl += ‘&pics=‘ + encodeURIComponent(_pic||‘‘);   //參數pics設置分享圖片的路徑,多張圖片以"|"隔開,可選參數
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,top=‘+(screen.height-_height)/2+‘,left=‘+(screen.width-_width)/2+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

詳情請參考:http://connect.qq.com/intro/share/

4.分享到百度貼吧

代碼如下:

var _shareUrl = ‘http://tieba.baidu.com/f/commit/share/openShareApi?‘;
    _shareUrl += ‘title=‘ + encodeURIComponent(_title||document.title);  //分享的標題
    _shareUrl += ‘&url=‘ + encodeURIComponent(_url||document.location);  //分享的鏈接
    _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);    //分享的圖片
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+(screen.width-_width)/2+‘,top=‘+(screen.height-_height)/2+‘,toolbar=no,menubar=no,scrollbars=no, resizable=1,location=no,status=0‘);

詳情請參考:http://share.baidu.com/code/advance

5.分享到豆瓣

代碼如下:

var _shareUrl = ‘http://shuo.douban.com/!service/share?‘;
    _shareUrl += ‘href=‘ + encodeURIComponent(_url||location.href);    //分享的鏈接
    _shareUrl += ‘&name=‘ + encodeURIComponent(_title||document.title);    //分享的標題
    _shareUrl += ‘&image=‘ + encodeURIComponent(_pic||‘‘);    //分享的圖片
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+(screen.width-_width)/2+‘,top=‘+(screen.height-_height)/2+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

6.分享到騰迅微博

代碼如下:

var _shareUrl = ‘http://v.t.qq.com/share/share.php?‘;
    _shareUrl += ‘title=‘ + encodeURIComponent(_title||document.title);    //分享的標題
    _shareUrl += ‘&url=‘ + encodeURIComponent(_url||location.href);    //分享的鏈接
    _shareUrl += ‘&appkey=5bd32d6f1dff4725ba40338b233ff155‘;    //在騰迅微博平臺創建應用獲取微博AppKey
    _shareUrl += ‘&site=‘ + encodeURIComponent(_site||‘‘);   //分享來源
    _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);    //分享的圖片,如果是多張圖片,則定義var _pic=‘圖片url1|圖片url2|圖片url3....‘
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+(screen.width-_width)/2+‘,top=‘+(screen.height-_height)/2+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

詳情請參考:http://dev.t.qq.com/websites/share/

7.分享到人人網

代碼如下:

var _shareUrl = ‘http://share.renren.com/share/buttonshare.do?‘;
    _shareUrl += ‘link=‘ + encodeURIComponent(_url||location.href);   //分享的鏈接
    _shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title);     //分享的標題
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+(screen.width-_width)/2+‘,top=‘+(screen.height-_height)/2+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

其他的分享內容會從頁面中去抓取。

想了解更多,可參考:http://dev.renren.com/website/?widget=rrshare&content=use

8.分享到開心網

代碼如下:有兩種寫法,第一種寫法也是跳轉到 http://www.kaixin001.com/rest/records.php這個鏈接地址。

var _shareUrl = ‘http://www.kaixin001.com/repaste/share.php?‘;
    _shareUrl += ‘rtitle=‘ + encodeURIComponent(_title||document.title);   //分享的標題
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+(screen.width-_width)/2+‘,top=‘+(screen.height-_height)/2+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
var _shareUrl = ‘http://www.kaixin001.com/rest/records.php?‘;
    _shareUrl += ‘url=‘ + encodeURIComponent(_url||location.href);    //分享的鏈接
    _shareUrl += ‘&content=‘ + encodeURIComponent(‘分享的文字‘);    //需要分享的文字,當文字為空時,自動抓取分享網址的title
    _shareUrl += ‘&pic=‘ + encodeURIComponent(_pic||‘‘);     //分享的圖片,多個使用半角逗號分隔
    _shareUrl += ‘&showcount=0‘;    //是否顯示分享數,顯示:‘1‘,不顯示:‘0‘
    _shareUrl += ‘&style=11‘;      //顯示的樣式,必選參數
    _shareUrl += ‘&aid=‘ + encodeURIComponent(_site||‘‘);    //顯示分享來源
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

想了解更多,可參考:http://open.kaixin001.com/document.php?type=records#code

9.分享到facebook

代碼如下:

var _shareUrl = ‘http://www.facebook.com/sharer/sharer.php?‘;
    _shareUrl += ‘u=‘ + encodeURIComponent(_url||location.href);    //分享的鏈接
    _shareUrl += ‘&t=‘ + encodeURIComponent(_title||document.title);    //分享的標題
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

10.分享到Twitter

代碼如下:

var _shareUrl = ‘http://twitter.com/intent/tweet?‘;
    _shareUrl += ‘url=‘ + encodeURIComponent(_url||location.href);    //分享的鏈接
    _shareUrl += ‘&text=‘ + encodeURIComponent(_title||document.title);    //分享的標題
    window.open(_shareUrl,‘_blank‘,‘width=‘+_width+‘,height=‘+_height+‘,left=‘+_left+‘,top=‘+_top+‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);

由於網絡原因,可能分享不了。

11.案例

<!doctype html>
<html>

	<head>
		<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
		<title>分享到微信微博空間等第三方平臺的JS代碼</title>
		<meta name="author" content="rainna" />
		<meta name="keywords" content="rainna‘s js lib" />
		<meta name="description" content="js" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				border: 0 none;
			}
			
			body {
				background: #eee;
			}
			
			.m-box {
				width: 800px;
				margin: 0 auto;
				padding: 20px;
				background: #fff;
			}
			
			.m-box p {
				margin: 0 0 10px;
			}
			
			.m-box .icn a {
				display: block;
				width: 55px;
				height: 35px;
				background: url(‘http://l.bst.126.net/rsc/img/weibo.png?035‘) no-repeat;
			}
			
			.m-box .icn .wb1 {
				background-position: 10px -216px;
			}
			
			.m-box .icn .wb2 {
				background-position: -190px -216px;
			}
			
			.m-box .icn .wb3 {
				background: url(http://l.bst.126.net/rsc/img/postshare/tieba24.png) 15px 0 no-repeat;
			}
			
			.m-box .icn .wb4 {
				background-position: -88px -215px;
			}
			
			.m-box .icn .wb5 {
				background-position: -138px -216px;
			}
			
			.m-box .icn .wb6 {
				background-position: -245px -216px;
			}
			
			.m-box .icn .wb7 {
				background-position: -300px -216px;
			}
			
			.m-box .icn .wb8 {
				background-position: -355px -216px;
			}
			
			.m-box .icn .wb9 {
				background-position: -415px -215px;
			}
		</style>
	</head>

	<body>
		<div class="m-box">
			<p>分享到微信,易信:</p>
			<div class="icn"><img width="200" src="http://cli.clewm.net/qrcode/2015/01/21/2031452178.png" /></div>
		</div>

		<div class="m-box">
			<p>分享到新浪微博:
				<a href="http://open.weibo.com/wiki/ShareCode" target="_blank">http://open.weibo.com/wiki/ShareCode</a>
			</p>
			<div class="icn">
				<a href="#" class="wb1" onclick="shareToSinaWB(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到QQ空間:
				<a href="http://connect.qq.com/intro/share/" target="_blank">http://connect.qq.com/intro/share/</a>
			</p>
			<div class="icn">
				<a href="#" class="wb2" onclick="shareToQzone(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到百度貼吧:
				<a href="http://share.baidu.com/code/advance" target="_blank">http://share.baidu.com/code/advance</a>
			</p>
			<div class="icn">
				<a href="#" class="wb3" onclick="shareToTieba(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到豆瓣:</p>
			<div class="icn">
				<a href="#" class="wb4" onclick="shareToDouban(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到騰迅微博:
				<a href="http://dev.t.qq.com/websites/share/" target="_blank">http://dev.t.qq.com/websites/share/</a>
			</p>
			<div class="icn">
				<a href="#" class="wb5" onclick="shareToQQwb(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到人人網:
				<a href="http://dev.renren.com/website/?widget=rrshare&content=use" target="_blank">http://dev.renren.com/website/?widget=rrshare&content=use</a>
			</p>
			<div class="icn">
				<a href="#" class="wb6" onclick="shareToRenren(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到開心網:
				<a href="http://open.kaixin001.com/document.php?type=records#code" target="_blank">http://open.kaixin001.com/document.php?type=records#code</a>
			</p>
			<div class="icn">
				<a href="#" class="wb7" onclick="shareToKaixin(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到facebook:</p>
			<div class="icn">
				<a href="#" class="wb8" onclick="shareToFacebook(event)"></a>
			</div>
		</div>

		<div class="m-box">
			<p>分享到Twitter:</p>
			<div class="icn">
				<a href="#" class="wb9" onclick="shareToTwitter(event)"></a>
			</div>
		</div>

		<script>
			var _title, _source, _sourceUrl, _pic, _showcount, _desc, _summary, _site,
				_width = 600,
				_height = 600,
				_top = (screen.height - _height) / 2,
				_left = (screen.width - _width) / 2,
				_url = ‘http://traveliceland.lofter.com/post/352b58_579d8e7‘,
				_pic = ‘http://m3.img.srcdd.com/farm4/d/2015/0113/11/6AE3FEBE500857BF82CA97E8F03DD6A8_B500_900_500_411.jpeg‘;

			//分享到新浪微博    
			function shareToSinaWB(event) {
				event.preventDefault();

				var _shareUrl = ‘http://v.t.sina.com.cn/share/share.php?&appkey=895033136‘; //真實的appkey,必選參數 
				_shareUrl += ‘&url=‘ + encodeURIComponent(_url || document.location); //參數url設置分享的內容鏈接|默認當前頁location,可選參數
				_shareUrl += ‘&title=‘ + encodeURIComponent(_title || document.title); //參數title設置分享的標題|默認當前頁標題,可選參數
				_shareUrl += ‘&source=‘ + encodeURIComponent(_source || ‘‘);
				_shareUrl += ‘&sourceUrl=‘ + encodeURIComponent(_sourceUrl || ‘‘);
				_shareUrl += ‘&content=‘ + ‘utf-8‘; //參數content設置頁面編碼gb2312|utf-8,可選參數
				_shareUrl += ‘&pic=‘ + encodeURIComponent(_pic || ‘‘); //參數pic設置圖片鏈接|默認為空,可選參數
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,top=‘ + _top + ‘,left=‘ + _left + ‘,toolbar=no,menubar=no,scrollbars=no, resizable=1,location=no,status=0‘);
			}

			//分享到QQ空間
			function shareToQzone(event) {
				event.preventDefault();

				var _shareUrl = ‘http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?‘;
				_shareUrl += ‘url=‘ + encodeURIComponent(_url || document.location); //參數url設置分享的內容鏈接|默認當前頁location
				_shareUrl += ‘&showcount=‘ + _showcount || 0; //參數showcount是否顯示分享總數,顯示:‘1‘,不顯示:‘0‘,默認不顯示
				_shareUrl += ‘&desc=‘ + encodeURIComponent(_desc || ‘分享的描述‘); //參數desc設置分享的描述,可選參數
				_shareUrl += ‘&summary=‘ + encodeURIComponent(_summary || ‘分享摘要‘); //參數summary設置分享摘要,可選參數
				_shareUrl += ‘&title=‘ + encodeURIComponent(_title || document.title); //參數title設置分享標題,可選參數
				_shareUrl += ‘&site=‘ + encodeURIComponent(_site || ‘‘); //參數site設置分享來源,可選參數
				_shareUrl += ‘&pics=‘ + encodeURIComponent(_pic || ‘‘); //參數pics設置分享圖片的路徑,多張圖片以"|"隔開,可選參數
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,top=‘ + _top + ‘,left=‘ + _left + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到百度貼吧
			function shareToTieba(event) {
				event.preventDefault();

				var _shareUrl = ‘http://tieba.baidu.com/f/commit/share/openShareApi?‘;
				_shareUrl += ‘title=‘ + encodeURIComponent(_title || document.title); //分享的標題
				_shareUrl += ‘&url=‘ + encodeURIComponent(_url || document.location); //分享的鏈接
				_shareUrl += ‘&pic=‘ + encodeURIComponent(_pic || ‘‘); //分享的圖片
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到豆瓣
			function shareToDouban(event) {
				event.preventDefault();

				var _shareUrl = ‘http://shuo.douban.com/!service/share?‘;
				_shareUrl += ‘href=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&name=‘ + encodeURIComponent(_title || document.title); //分享的標題
				_shareUrl += ‘&image=‘ + encodeURIComponent(_pic || ‘‘); //分享的圖片
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到騰迅微博
			function shareToQQwb(event) {
				event.preventDefault();

				var _shareUrl = ‘http://v.t.qq.com/share/share.php?‘;
				_shareUrl += ‘title=‘ + encodeURIComponent(_title || document.title); //分享的標題
				_shareUrl += ‘&url=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&appkey=5bd32d6f1dff4725ba40338b233ff155‘; //在騰迅微博平臺創建應用獲取微博AppKey
				_shareUrl += ‘&site=‘ + encodeURIComponent(_site || ‘‘); //分享來源
				_shareUrl += ‘&pic=‘ + encodeURIComponent(_pic || ‘‘); //分享的圖片,如果是多張圖片,則定義var _pic=‘圖片url1|圖片url2|圖片url3....‘
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到人人網
			function shareToRenren(event) {
				event.preventDefault();

				var _shareUrl = ‘http://share.renren.com/share/buttonshare.do?‘;
				_shareUrl += ‘link=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&title=‘ + encodeURIComponent(_title || document.title); //分享的標題
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到開心網
			function shareToKaixin(event) {
				event.preventDefault();

				var _shareUrl = ‘http://www.kaixin001.com/rest/records.php?‘;
				_shareUrl += ‘url=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&content=‘ + encodeURIComponent(‘分享的文字‘); //需要分享的文字,當文字為空時,自動抓取分享網址的title
				_shareUrl += ‘&pic=‘ + encodeURIComponent(_pic || ‘‘); //分享的圖片,多個使用半角逗號分隔
				_shareUrl += ‘&showcount=0‘; //是否顯示分享數,顯示:‘1‘,不顯示:‘0‘
				_shareUrl += ‘&style=11‘; //顯示的樣式,必選參數
				_shareUrl += ‘&aid=‘ + encodeURIComponent(_site || ‘‘); //顯示分享來源
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			function shareToKaixin2(event) {
				event.preventDefault();

				var _shareUrl = ‘http://www.kaixin001.com/repaste/share.php?‘;
				_shareUrl += ‘rtitle=‘ + encodeURIComponent(_title || document.title); //分享的標題
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到facebook
			function shareToFacebook(event) {
				event.preventDefault();

				var _shareUrl = ‘http://www.facebook.com/sharer/sharer.php?‘;
				_shareUrl += ‘u=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&t=‘ + encodeURIComponent(_title || document.title); //分享的標題
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}

			//分享到Twitter
			function shareToTwitter(event) {
				event.preventDefault();

				var _shareUrl = ‘http://twitter.com/intent/tweet?‘;
				_shareUrl += ‘url=‘ + encodeURIComponent(_url || location.href); //分享的鏈接
				_shareUrl += ‘&text=‘ + encodeURIComponent(_title || document.title); //分享的標題
				window.open(_shareUrl, ‘_blank‘, ‘width=‘ + _width + ‘,height=‘ + _height + ‘,left=‘ + _left + ‘,top=‘ + _top + ‘,toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0‘);
			}
		</script>
	</body>

</html>

  

分享到微信微博空間等第三方平臺的JS代碼