完美解决社会化分享JS代码实现 载入速度快可统计腾讯微博新浪微博
2011.03.27
本来想用jiathis addthis等网络服务的,但使用的一段时间后发现需到它的服务器端取数据,导致网站载入慢。所以自己去研究并搜索了相关资料,最后完美解决,先看截图:
效果不错吧,而这些全是本地代码,载入速度不受影响。
用以下代码前如有需求可申请新浪微博跟腾讯微博的APPKEY,点这里申请新浪微博,点这里申请腾讯微博,申请后即可替换以下代码中的appkey。
具体JS代码如下:
function shareto(id){
var _gaq = _gaq || [];
var url=encodeURIComponent(document.location.href);
var title=encodeURIComponent(document.title);
if(id=="fav"){
addBookmark(document.title);
return;
}else if(id=="qzone"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'QZone', 1]);
window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+url);
return;
}else if(id=="twitter"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Twitter', 1]);
window.open('http://twitter.com/home?status='+title+encodeURIComponent(' ')+url,'_blank');
return;
}else if(id=="sina"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'SinaT', 1]);
window.open("http://v.t.sina.com.cn/share/share.php?url="+url+"&appkey=3486983565&title="+title+"&pic=","_blank","width=615,height=505");
return;
}else if(id=="qqshuqian"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'QQShuqian', 1]);
window.open('http://shuqian.qq.com/post?from=3&jumpback=2&noui=1&uri='+url+'&title='+title,'_blank','width=930,height=570,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');
return;
}else if(id=="baidu"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Baidu', 1]);
window.open('http://cang.baidu.com/do/add?it='+title+'&iu='+url+'&fr=ien#nw=1','_blank','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes');
return;
}else if(id=="sohu"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'sohu', 1]);
window.open('http://t.sohu.com/third/post.jsp?&url='+url+'&title='+title+'&content=utf-8&pic=','_blank','utf-8');
return;
}else if(id=="douban"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Douban', 1]);
var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e(d.location.href)+'&title='+e(d.title)+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};
if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}
return;
}else if(id=="renren"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'RenRen', 1]);
window.open('http://www.connect.renren.com/share/sharer?url='+url+'&title='+title,'_blank');
return;
}else if(id=="xianguo"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'XianGuo', 1]);
window.open('http://xianguo.com/service/submitdigg/?link='+url+'&title='+title,'_blank');
return;
}else if(id=="kaixin"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'kaixin', 1]);
window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+title+'&rurl='+url,'_blank');
return;
}else if(id=="mail"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Mail', 1]);
window.open('mailto:?subject='+title+'&body='+encodeURIComponent('这是我看到了一篇很不错的文章,分享给你看看!\r\n\r\n')+title+encodeURIComponent('\r\n')+url);
return;
}else if(id=="tqq"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'TQQ', 1]);
var tqq_appkey = encodeURI("571330b45a5044939d9acd6abc0d0a7b");
window.open('http://v.t.qq.com/share/share.php?title='+title+'&site=http://www.upantool.com/&appkey='+tqq_appkey+'&pic=&url='+url,'_blank');
return;
}
}
function addBookmark(title){
var url = parent.location.href;
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if(document.all) { // IE Favorite
window.external.AddFavorite( url, title);
} else if(window.opera) { // Opera 7+
return false; // do nothing
} else {
alert('请按 Ctrl + D 为Chrome浏览器添加书签!');
}
}
var _gaq = _gaq || [];
var url=encodeURIComponent(document.location.href);
var title=encodeURIComponent(document.title);
if(id=="fav"){
addBookmark(document.title);
return;
}else if(id=="qzone"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'QZone', 1]);
window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+url);
return;
}else if(id=="twitter"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Twitter', 1]);
window.open('http://twitter.com/home?status='+title+encodeURIComponent(' ')+url,'_blank');
return;
}else if(id=="sina"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'SinaT', 1]);
window.open("http://v.t.sina.com.cn/share/share.php?url="+url+"&appkey=3486983565&title="+title+"&pic=","_blank","width=615,height=505");
return;
}else if(id=="qqshuqian"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'QQShuqian', 1]);
window.open('http://shuqian.qq.com/post?from=3&jumpback=2&noui=1&uri='+url+'&title='+title,'_blank','width=930,height=570,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');
return;
}else if(id=="baidu"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Baidu', 1]);
window.open('http://cang.baidu.com/do/add?it='+title+'&iu='+url+'&fr=ien#nw=1','_blank','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes');
return;
}else if(id=="sohu"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'sohu', 1]);
window.open('http://t.sohu.com/third/post.jsp?&url='+url+'&title='+title+'&content=utf-8&pic=','_blank','utf-8');
return;
}else if(id=="douban"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Douban', 1]);
var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e(d.location.href)+'&title='+e(d.title)+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};
if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}
return;
}else if(id=="renren"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'RenRen', 1]);
window.open('http://www.connect.renren.com/share/sharer?url='+url+'&title='+title,'_blank');
return;
}else if(id=="xianguo"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'XianGuo', 1]);
window.open('http://xianguo.com/service/submitdigg/?link='+url+'&title='+title,'_blank');
return;
}else if(id=="kaixin"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'kaixin', 1]);
window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+title+'&rurl='+url,'_blank');
return;
}else if(id=="mail"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'Mail', 1]);
window.open('mailto:?subject='+title+'&body='+encodeURIComponent('这是我看到了一篇很不错的文章,分享给你看看!\r\n\r\n')+title+encodeURIComponent('\r\n')+url);
return;
}else if(id=="tqq"){
_gaq.push(['_trackEvent', 'SocialShare', 'Share', 'TQQ', 1]);
var tqq_appkey = encodeURI("571330b45a5044939d9acd6abc0d0a7b");
window.open('http://v.t.qq.com/share/share.php?title='+title+'&site=http://www.upantool.com/&appkey='+tqq_appkey+'&pic=&url='+url,'_blank');
return;
}
}
function addBookmark(title){
var url = parent.location.href;
if (window.sidebar) { // Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
} else if(document.all) { // IE Favorite
window.external.AddFavorite( url, title);
} else if(window.opera) { // Opera 7+
return false; // do nothing
} else {
alert('请按 Ctrl + D 为Chrome浏览器添加书签!');
}
}
保存以上代码为js文件,然后在你的网页中载入。
下一步在你的网页需要显示分享按钮的地方加入如下代码:
<div class="social_share">
<a class="sharebutton" id="share_qzone" href="javascript:shareto('qzone');" title="分享到QQ空间"></a>
<a class="sharebutton" id="share_tqq" href="javascript:shareto('tqq');" title="分享到 QQ 腾讯微博"></a>
<a class="sharebutton" id="share_sina" href="javascript:shareto('sina');" title="分享到新浪微博"></a>
<a class="sharebutton" id="share_qqshuqian" href="javascript:shareto('qqshuqian');" title="收藏到QQ书签"></a>
<a class="sharebutton" id="share_sohu" href="javascript:shareto('sohu');" title="分享到搜狐微博"></a>
<a class="sharebutton" id="share_renren" href="javascript:shareto('renren');" title="分享到人人网"></a>
<a class="sharebutton" id="share_kaixin" href="javascript:shareto('kaixin');" title="分享到开心网"></a>
<a class="sharebutton" id="share_douban" href="javascript:shareto('douban');" title="分享到豆瓣"></a>
<a class="sharebutton" id="share_twitter" href="javascript:shareto('twitter');" title="分享到Twitter"></a>
<a class="sharebutton" id="share_baidu" href="javascript:shareto('baidu');" title="收藏到 - 百度搜藏"></a>
<a class="sharebutton" id="share_mail" href="javascript:shareto('mail');" title="发送邮件分享给朋友"></a>
</div>
<a class="sharebutton" id="share_qzone" href="javascript:shareto('qzone');" title="分享到QQ空间"></a>
<a class="sharebutton" id="share_tqq" href="javascript:shareto('tqq');" title="分享到 QQ 腾讯微博"></a>
<a class="sharebutton" id="share_sina" href="javascript:shareto('sina');" title="分享到新浪微博"></a>
<a class="sharebutton" id="share_qqshuqian" href="javascript:shareto('qqshuqian');" title="收藏到QQ书签"></a>
<a class="sharebutton" id="share_sohu" href="javascript:shareto('sohu');" title="分享到搜狐微博"></a>
<a class="sharebutton" id="share_renren" href="javascript:shareto('renren');" title="分享到人人网"></a>
<a class="sharebutton" id="share_kaixin" href="javascript:shareto('kaixin');" title="分享到开心网"></a>
<a class="sharebutton" id="share_douban" href="javascript:shareto('douban');" title="分享到豆瓣"></a>
<a class="sharebutton" id="share_twitter" href="javascript:shareto('twitter');" title="分享到Twitter"></a>
<a class="sharebutton" id="share_baidu" href="javascript:shareto('baidu');" title="收藏到 - 百度搜藏"></a>
<a class="sharebutton" id="share_mail" href="javascript:shareto('mail');" title="发送邮件分享给朋友"></a>
</div>
并加入相应的css文件美化即可。
具体效果可以参照
http://www.upantool.com/jiaocheng/liangchan/Phison/qunlian_banben.html


暂无留言我要留言 »