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

時間 2019-12-13

原文原文鏈接

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

1.分享到微信，易信html

分享到微信，易信比較簡單，貼上分享連接的二維碼就能夠了。web

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

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爲必填參數。app

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

3.分享到QQ空間網站

代碼以下：ui

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/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.案例

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
  5 <title>分享到微信微博空間等第三方平臺的JS代碼</title>
  6 <meta name="author" content="rainna" />
  7 <meta name="keywords" content="rainna's js lib" />
  8 <meta name="description" content="js" />
  9 <style>
 10 *{margin:0;padding:0;}
 11 img{border:0 none;}
 12 body{background:#eee;}
 13 
 14 .m-box{width:800px;margin:0 auto;padding:20px;background:#fff;}
 15 .m-box p{margin:0 0 10px;}
 16 .m-box .icn a{display:block;width:55px;height:35px;background:url('http://l.bst.126.net/rsc/img/weibo.png?035') no-repeat;}
 17 .m-box .icn .wb1{background-position:10px -216px;}
 18 .m-box .icn .wb2{background-position:-190px -216px;}
 19 .m-box .icn .wb3{background:url(http://l.bst.126.net/rsc/img/postshare/tieba24.png) 15px 0 no-repeat;}
 20 .m-box .icn .wb4{background-position:-88px -215px;}
 21 .m-box .icn .wb5{background-position:-138px -216px;}
 22 .m-box .icn .wb6{background-position:-245px -216px;}
 23 .m-box .icn .wb7{background-position:-300px -216px;}
 24 .m-box .icn .wb8{background-position:-355px -216px;}
 25 .m-box .icn .wb9{background-position:-415px -215px;}
 26 </style>
 27 </head>
 28 
 29 <body>
 30 <div class="m-box">
 31     <p>分享到微信,易信:</p>
 32     <div class="icn"><img width="200" src="http://cli.clewm.net/qrcode/2015/01/21/2031452178.png" /></div>
 33 </div>
 34 
 35 <div class="m-box">
 36     <p>分享到新浪微博:<a href="http://open.weibo.com/wiki/ShareCode" target="_blank">http://open.weibo.com/wiki/ShareCode</a></p>
 37     <div class="icn"><a href="#" class="wb1" onclick="shareToSinaWB(event)"></a></div>
 38 </div>
 39 
 40 <div class="m-box">
 41     <p>分享到QQ空間:<a href="http://connect.qq.com/intro/share/" target="_blank">http://connect.qq.com/intro/share/</a></p>
 42     <div class="icn"><a href="#" class="wb2" onclick="shareToQzone(event)"></a></div>
 43 </div>
 44 
 45 <div class="m-box">
 46     <p>分享到百度貼吧:<a href="http://share.baidu.com/code/advance" target="_blank">http://share.baidu.com/code/advance</a></p>
 47     <div class="icn"><a href="#" class="wb3" onclick="shareToTieba(event)"></a></div>
 48 </div>
 49 
 50 <div class="m-box">
 51     <p>分享到豆瓣:</p>
 52     <div class="icn"><a href="#" class="wb4" onclick="shareToDouban(event)"></a></div>
 53 </div>
 54 
 55 <div class="m-box">
 56     <p>分享到騰迅微博:<a href="http://dev.t.qq.com/websites/share/" target="_blank">http://dev.t.qq.com/websites/share/</a></p>
 57     <div class="icn"><a href="#" class="wb5"  onclick="shareToQQwb(event)"></a></div>
 58 </div>
 59 
 60 <div class="m-box">
 61     <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>
 62     <div class="icn"><a href="#" class="wb6" onclick="shareToRenren(event)"></a></div>
 63 </div>
 64 
 65 <div class="m-box">
 66     <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>
 67     <div class="icn"><a href="#" class="wb7" onclick="shareToKaixin(event)"></a></div>
 68 </div>
 69 
 70 <div class="m-box">
 71     <p>分享到facebook:</p>
 72     <div class="icn"><a href="#" class="wb8" onclick="shareToFacebook(event)"></a></div>
 73 </div>
 74 
 75 <div class="m-box">
 76     <p>分享到Twitter:</p>
 77     <div class="icn"><a href="#" class="wb9" onclick="shareToTwitter(event)"></a></div>
 78 </div>
 79 
 80 <script>
 81 var _title,_source,_sourceUrl,_pic,_showcount,_desc,_summary,_site,
 82     _width = 600,
 83     _height = 600,
 84     _top = (screen.height-_height)/2,
 85     _left = (screen.width-_width)/2,
 86     _url = 'http://traveliceland.lofter.com/post/352b58_579d8e7',
 87     _pic = 'http://m3.img.srcdd.com/farm4/d/2015/0113/11/6AE3FEBE500857BF82CA97E8F03DD6A8_B500_900_500_411.jpeg';
 88 
 89     
 90 //分享到新浪微博    
 91 function shareToSinaWB(event){
 92     event.preventDefault();
 93     
 94     var _shareUrl = 'http://v.t.sina.com.cn/share/share.php?&appkey=895033136';     //真實的appkey，必選參數 
 95     _shareUrl += '&url='+ encodeURIComponent(_url||document.location);     //參數url設置分享的內容連接|默認當前頁location，可選參數
 96     _shareUrl += '&title=' + encodeURIComponent(_title||document.title);    //參數title設置分享的標題|默認當前頁標題，可選參數
 97     _shareUrl += '&source=' + encodeURIComponent(_source||'');
 98     _shareUrl += '&sourceUrl=' + encodeURIComponent(_sourceUrl||'');
 99     _shareUrl += '&content=' + 'utf-8';   //參數content設置頁面編碼gb2312|utf-8，可選參數
100     _shareUrl += '&pic=' + encodeURIComponent(_pic||'');  //參數pic設置圖片連接|默認爲空，可選參數
101     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',top='+_top+',left='+_left+',toolbar=no,menubar=no,scrollbars=no, resizable=1,location=no,status=0');
102 }
103 
104 //分享到QQ空間
105 function shareToQzone(event){
106     event.preventDefault();
107     
108     var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
109     _shareUrl += 'url=' + encodeURIComponent(_url||document.location);   //參數url設置分享的內容連接|默認當前頁location
110     _shareUrl += '&showcount=' + _showcount||0;      //參數showcount是否顯示分享總數,顯示：'1'，不顯示：'0'，默認不顯示
111     _shareUrl += '&desc=' + encodeURIComponent(_desc||'分享的描述');    //參數desc設置分享的描述，可選參數
112     _shareUrl += '&summary=' + encodeURIComponent(_summary||'分享摘要');    //參數summary設置分享摘要，可選參數
113     _shareUrl += '&title=' + encodeURIComponent(_title||document.title);    //參數title設置分享標題，可選參數
114     _shareUrl += '&site=' + encodeURIComponent(_site||'');   //參數site設置分享來源，可選參數
115     _shareUrl += '&pics=' + encodeURIComponent(_pic||'');   //參數pics設置分享圖片的路徑，多張圖片以＂|＂隔開，可選參數
116     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',top='+_top+',left='+_left+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
117 }
118 
119 //分享到百度貼吧
120 function shareToTieba(event){
121     event.preventDefault();
122     
123     var _shareUrl = 'http://tieba.baidu.com/f/commit/share/openShareApi?';
124     _shareUrl += 'title=' + encodeURIComponent(_title||document.title);  //分享的標題
125     _shareUrl += '&url=' + encodeURIComponent(_url||document.location);  //分享的連接
126     _shareUrl += '&pic=' + encodeURIComponent(_pic||'');    //分享的圖片
127     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
128 }
129 
130 //分享到豆瓣
131 function shareToDouban(event){
132     event.preventDefault();
133 
134     var _shareUrl = 'http://shuo.douban.com/!service/share?';
135     _shareUrl += 'href=' + encodeURIComponent(_url||location.href);    //分享的連接
136     _shareUrl += '&name=' + encodeURIComponent(_title||document.title);    //分享的標題
137     _shareUrl += '&image=' + encodeURIComponent(_pic||'');    //分享的圖片
138     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
139 }
140 
141 //分享到騰迅微博
142 function shareToQQwb(event){
143     event.preventDefault();
144     
145     var _shareUrl = 'http://v.t.qq.com/share/share.php?';
146     _shareUrl += 'title=' + encodeURIComponent(_title||document.title);    //分享的標題
147     _shareUrl += '&url=' + encodeURIComponent(_url||location.href);    //分享的連接
148     _shareUrl += '&appkey=5bd32d6f1dff4725ba40338b233ff155';    //在騰迅微博平臺建立應用獲取微博AppKey
149     _shareUrl += '&site=' + encodeURIComponent(_site||'');   //分享來源
150     _shareUrl += '&pic=' + encodeURIComponent(_pic||'');    //分享的圖片，若是是多張圖片，則定義var _pic='圖片url1|圖片url2|圖片url3....'
151     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
152 }
153 
154 //分享到人人網
155 function shareToRenren(event){
156     event.preventDefault();
157     
158     var _shareUrl = 'http://***/share/buttonshare.do?';
159     _shareUrl += 'link=' + encodeURIComponent(_url||location.href);   //分享的連接
160     _shareUrl += '&title=' + encodeURIComponent(_title||document.title);     //分享的標題
161     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
162 }
163 
164 //分享到開心網
165 function shareToKaixin(event){
166     event.preventDefault();
167     
168     var _shareUrl = 'http://www.kaixin001.com/rest/records.php?';
169     _shareUrl += 'url=' + encodeURIComponent(_url||location.href);    //分享的連接
170     _shareUrl += '&content=' + encodeURIComponent('分享的文字');    //須要分享的文字，當文字爲空時，自動抓取分享網址的title
171     _shareUrl += '&pic=' + encodeURIComponent(_pic||'');     //分享的圖片,多個使用半角逗號分隔
172     _shareUrl += '&showcount=0';    //是否顯示分享數，顯示：'1'，不顯示：'0'
173     _shareUrl += '&style=11';      //顯示的樣式，必選參數
174     _shareUrl += '&aid=' + encodeURIComponent(_site||'');    //顯示分享來源
175     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
176 }
177 
178 function shareToKaixin2(event){
179     event.preventDefault();
180     
181     var _shareUrl = 'http://www.kaixin001.com/repaste/share.php?';
182     _shareUrl += 'rtitle=' + encodeURIComponent(_title||document.title);   //分享的標題
183     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
184 }
185 
186 //分享到facebook
187 function shareToFacebook(event){
188     event.preventDefault();
189     
190     var _shareUrl = 'http://www.facebook.com/sharer/sharer.php?';
191     _shareUrl += 'u=' + encodeURIComponent(_url||location.href);    //分享的連接
192     _shareUrl += '&t=' + encodeURIComponent(_title||document.title);    //分享的標題
193     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
194 }
195 
196 
197 //分享到Twitter
198 function shareToTwitter(event){
199     event.preventDefault();
200     
201     var _shareUrl = 'http://twitter.com/intent/tweet?';
202     _shareUrl += 'url=' + encodeURIComponent(_url||location.href);    //分享的連接
203     _shareUrl += '&text=' + encodeURIComponent(_title||document.title);    //分享的標題
204     window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',left='+_left+',top='+_top+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
205 }
206 </script>
207 </body>
208 </html>轉自：http://***/Article/18570

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。