现在大多数站长使用的主要是百度社会分享

加载百度JS,虽然是从CDN加载JS,但是心里还是总感觉会拖慢速度,于是弄了一个精简版的社会分享

看代码:

1、JS代码

jQuery(document).on("click", ".share-icons span",
function() {
var e = jQuery(this),
t = e.data("type"),
r = e.parent(),
a = r.data("title"),
n = r.data("url"),
o = r.data("thumb"),
c = ["toolbar=0,status=0,resizable=1,width=640,height=560,left=", (screen.width - 640) / 2, ",top=", (screen.height - 560) / 2].join(""),
i;
switch (t) {
case "weibo":
i = "http://service.weibo.com/share/share.php?title=" + a + "&appkey=4221439169&url=" + n;
window.open(i, "分享", c);
break;
case "tweibo":
i = "http://v.t.qq.com/share/share.php?title=" + a + "&url=" + n;
window.open(i, "分享", c);
break;
case "qzone":
i = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=" + a + "&url=" + n;
window.open(i, "分享", c);
break;
case "qq":
i = "http://connect.qq.com/widget/shareqq/index.html?title=" + a + "&url=" + n;
window.open(i, "分享", c);
break;
case "renren":
i = "http://share.renren.com/share/buttonshare.do?link=" + n;
window.open(i, "分享", c);
break;
case "tieba":
i = "http://tieba.baidu.com/f/commit/share/openShareApi?title=" + a + "&url=" + n;
window.open(i, "分享", c);
break;
case "wangyi":
i = "http://t.163.com/article/user/checkLogin.do?link="+ n;
window.open(i, "分享", c);
break;
case "wechat":
i = "http://qr.liantu.com/api.php?text=" + n;
window.open(i, "分享", c);
break;
case "twitter":
i = "http://twitter.com/share?text=" + a + "&url=" + n;
window.open(i, "分享", c);
break;
case "facebook":
i = "http://www.facebook.com/sharer.php?text=" + a + "&url=" + n;
window.open(i, "分享", c);
break
}
return false
});

 

2、前端输出代码

<div class="share-icons" data-title="<?php the_title(); ?>" data-url="<?php the_permalink() ?>">
 <span class="icon-wechat" data-type="wechat"></span>
 <span class="icon-sina-weibo" data-type="weibo"></span>
 <span class="icon-qzone" data-type="qzone"></span>
 <span class="icon-qq" data-type="qq"></span>
 </div>

3、CSS样式

.share-icons {
color: #eee;
float: right;
}
.share-icons span {
cursor: pointer;
}
.share-icons span:hover {
color: #000;
}
[class*=" icon-"], [class^="icon-"] {
font-family: iconfont !important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.icon-wechat::before {
content: "\e61b";
}

这里的输出图标,使用的是iconfont ,当然你也可以根据自己需要自行修改。

具体样式预览,也可以查看本文结束位置。

QQ截图20160122111045

END