社会分享代码精简版

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

    加载百度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

    Responses

    您的电子邮箱地址不会被公开。 必填项已用*标注

    Up Next:

    wordpress文章图片自适应

    wordpress文章图片自适应