商住楼给⽹页增加分享功能
想给⾃⼰的⽹站的⽂章增加分享按钮，查询资料后发现，均使⽤了⽬标⽹站提供的分享接⼝，⽐如新浪微博更可以直接使⽤其提供的分享按钮，按其规则添加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 = ElementsByTagName('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 = "connect.qq/widget/shareqq/index.html?url=" + options.shareUrl + "&title=" + options.shareTitle + "&desc=" + options.shareCon + "&pics=" + options.shareIamge;
break;
case 'sina':
surl = "v.t.sina/share/share.php?url=" + options.shareUrl + "&title=" + options.shareTitle + "&searchPic=true&pic=" + options.shareIamge + "&ralateUid=" + options.sina.ralateUid;
break;
case "douban":
surl = "www.douban/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="tieba.baidu/f/commit/share/openShareApi?
title"+options.shareTit+"&url"+options.shareUrl+"&pic"+options.shareImage;
开⼼⽹：surl="www.kaixin001/repaste/share.php?
rtitle"+options.shareTit;
或则：surl="www.kaixin001/rest/records.php?
url"+options.shareUrl+"&content"+options.shareCon+"&pic"+options.shareImage+"&showcount=0&style=11";
facebook:surl="www.facebook/sharer/sharer.php
u"+options.shareUrl+"&t"+options.shareTit;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论