给网页增加分享功能
想给自己的网站的文章增加分享按钮，查询资料后发现，均使用了目标网站提供的分享接口，比如新浪微博更可以直接使用其提供的分享按钮，按其规则添加js和页面代码就能实现新浪风格的分享按钮。因为想同时添加各大主流平台的分享按钮，所以自己添加了js代码来完成。
首先在需要分享页面中添加按钮，比如我需要QQ，豆瓣，微博这三个分享，我用了li分别列出来。
<ul>
<li class="share" shareto="qq">QQ</li>
<li class="share" shareto="qq">微博</li>
<li class="share" shareto="qq">豆瓣</li>
</ul>
js文件里面写分享的功能，为了便于复用，将分享功能封装写成一个类，方便调用。
（function(window,document）{
var share = function(ele,options,callback){
var that=this,
array = typeof ele === "string" ? document.querySelectorAll(ele) :ele ,
img = document.getElementsByTagName('img')[0];//获取文档的第一张图。
that.options = {
shareTitle:document.title,
shareUrl:window.location.hred,
shareCon:'',
shareImage:img?img.attribution.src.value:'',
sina: {
ralateUid:"" //需要分享到的人的新浪数字账号
}
}；
for(i in options) {
that.options[i] = options[i];
};
if (array.length === 0) callback('没有获取到元素')；
for (var i=0,l=array.length;i<l;i++){
array[i].addEventListener('click',function(){
var shareTo = this.attributes.shareto;
if(!sharetTo){
callback('没有设置shareto')
}else {
share(shareto.value)
};
},false);
};
var shaer = function(type){
var surl;
var options = that.options;
switch(type){
case 'qq':
surl = "http://connect.qq.com/widget/shareqq/index.html?url=" + options.shareUrl + "&title=" + options.shareTitle + "&desc=" + options.shareCon + "&pics=" + options.shareIamge;
break;
case 'sina':
surl = "http://v.t.sina.com.cn/share/share.php?url=" + options.shareUrl + "&title=" + options.shareTitle + "&searchPic=true&pic=" + options.shareIamge + "&ralateUid=" + options.sina.ralateUid;
break;
case "douban":
surl = "https://www.douban.com/share/service?href=" + options.shareUrl + "&name=" + options.shareTitle + "&image=" + options.shareIamge + "&text=" + options.shareCon;
break;
default:
callback("shareto设置错误");
return false;
};
window.open(surl,'');
};
};
window.share=share;
})(window,docuement);
下面是具体调用上面的方法：
var myshare = new share('.share',{
shareTitle:"",
shareUrl:"",
shareCon:"",
sina:{
ralateUid:""
},function(data){console.log(data)}
};
可以按照自己需要设置，也可以使用默认。
这个方法主要参考自 前端网的panio123发布的js小组件练习，觉得写法简单易懂，很利于学习，这里进行分享。
关于更多的网页分享接口：
微信可以采用在线二维码生成器。
百度贴吧：surl="http://tieba.baidu.com/f/commit/share/openShareApi?title"+options.shareTit+"&url"+options.shareUrl+"&pic"+options.shareImage;
开心网：surl="http://www.kaixin001.com/repaste/share.php?
rtitle"+options.shareTit;
或则：surl="http://www.kaixin001.com/rest/records.php?
url"+options.shareUrl+"&content"+options.shareCon+"&pic"+options.shareImage+"&showcount=0&style=11";
facebook:surl="http://www.facebook.com/sharer/sharer.php
?u"+options.shareUrl+"&t"+options.shareTit;
