js分享功能(微信,QQ,微博,空間,豆瓣等)
阿新 • • 發佈：2018-07-05
一鍵 image title 抓取 mit lin png Opens dia
日常編程中，我們可能會碰到項目中的分享功能，各大平臺都有分享接口和文檔說明，當然也有一些一鍵分享插件，例如：sosh，iShare.js等等
但有些同學不想引用插件，那麽我整理了一些常用的分享至平臺功能，以供參考。
html結構:
<div class="share-list">
<ul class="share-container">
<li>
<a title="分享到微信" href="javascript:void(0)" class="bds_weixin">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png" />
</a>
<div class="wechat-share">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_wechart_share.png" />
</div>
</li>
<li>
<a title="分享到新浪微博" href="javascript:void(0)" class="share_xlwb" onclick="shareToSinaWB(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_xlwb.png" />
</a>
</li>
<li>
<a title="分享到百度貼吧" href="javascript:void(0)" class="share_bdtb" onclick="shareToTieba(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_bdtb.png" />
</a>
</li>
<li>
<a title="分享到豆瓣" href="javascript:void(0)" class="share_db" onclick="shareToDouban(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_db.png" />
</a>
</li>
<li>
<a title="分享到人人網" href="javascript:void(0)" class="share_rrw" onclick="shareToRenren(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_renren.png" />
</a>
</li>
<li>
<a title="分享到QQ好友" href="javascript:void(0)" class="share_qq" onclick="shareToqq(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_qq.png" />
</a>
</li>
<li>
<a title="分享到QQ空間" href="javascript:void(0)" class="share_qzone" onclick="shareToQzone(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_zone.png" />
</a>
</li>
<li>
<a title="分享到開心網" href="javascript:void(0)" class="share_kx" onclick="shareToKaixin(event)">
<img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_kx.png" />
</a>
</li>
</ul>
</div> 註：分享至微信 您需要在css中將二維碼隱藏，通過hover 微信圖標再顯示二維碼
JS：
var _title,_source,_sourceUrl,_pic,_showcount,_desc,_summary,_site,
_url = ‘http://www.newsucai.cn‘,
_pic = ‘http://www.newsucai.cn/static/home/images/jpg/__header.jpg‘;
//分享至微信 css控制二維碼隱藏和出現
//分享到新浪微博
function shareToSinaWB(event){
event.preventDefault();
var _shareUrl = ‘http://v.t.sina.com.cn/share/share.php?title="123"‘; //真實的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‘);
}
//分享到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‘);
}
//分享到百度貼吧
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‘);
}
//分享到豆瓣
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‘);
}
//分享到人人網
function shareToRenren(event){
event.preventDefault();
var _shareUrl = ‘http://widget.renren.com/dialog/share?‘;
_shareUrl += ‘link=‘ + encodeURIComponent(_url||location.href); //分享的鏈接
_shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title); //分享的標題
window.open(_shareUrl,‘_blank‘);
}
//分享到qq
function shareToqq(event){
event.preventDefault();
var _shareUrl = ‘https://connect.qq.com/widget/shareqq/iframe_index.html?‘;
_shareUrl += ‘url=‘ + encodeURIComponent(_url||location.href); //分享的鏈接
_shareUrl += ‘&title=‘ + encodeURIComponent(_title||document.title); //分享的標題
window.open(_shareUrl,‘_blank‘);
}
//分享到開心網
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‘);
}
css:
.share-container li{
position: relative;
float: left;
width: 23px;
height: 23px;
margin-left: 5px;
margin-top: 20px;
}
.share-container li a{
display: inline-block;
width: 100%;
height: 23px;
}
.share-container li a img{
width: 100%;
}
.wechat-share{
display: none;
position: absolute;
top: 100%;
left: 0;
width: 128px;
height: 128px;
overflow: hidden;
z-index: 9;
}
.bds_weixin:hover ~ .wechat-share{
display: block;
}
.wechat-share img{
width: 100%;
}
當然，您可以定義自己的樣式來達到自己的UI版面需求～～～～
js分享功能(微信,QQ,微博,空間,豆瓣等)