Javascript|

SocialShare-分享到

微博,QQ,空间,Twitter,Facebook - 简易版社会化分享代码

Posted by xzavier on August 16, 2016

SocailShare

想要在web上做个分享?不想去引入别人的js?想自己设计样式?那就自己写吧,自己调用方法分享就OK!

这是一个简易版的web社会化分享小代码,无需链接,拷过去用就是啦~ 在你的代码里模块化,全局化,就随你了。

介绍

其实你都不需要去看这个js,你需要关心的就是怎样可以做到分享。 分享到别人的平台也就是调别人的链接,刚好这些分享平台也提供了这样的链接,那就没有其他难点了。

只需要在自己的页面设计出点击分享的按钮,点击按钮调用相应的分享链接就阔以了。

有个特别的“微信分享”,当然是需要手机扫一扫,所以需要自己生成你要分享的二维码,这里建议(也是我这么坐的),就是自己做样式,做弹窗,在调用weixin方法里传回调弹窗即可。

代码

var SocilaShare = function (opts) {
    opts = opts || {};
    // 缺省参数 - 初始化的时候阔以指定四个参数,设置多了也麻烦,简单就好。
    var url = encodeURIComponent(opts.url || location.href),
        title = encodeURIComponent(opts.title || document.title),
        content = encodeURIComponent(opts.content || ''),
        pic = encodeURIComponent(opts.pic || '');

    // 分享平台链接
    var qzone = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}&pics={pic}&summary={content}',
        weibo = 'https://service.weibo.com/share/share.php?url={url}&title={title}&pic={pic}&searchPic=false',
        weixin = 'http://qr.liantu.com/api.php?text={url}',
        douban = 'http://shuo.douban.com/!service/share?href={url}&name={title}&text={content}&image={pic}&starid=0&aid=0&style=11&qq-pf-to=pcqq.c2c',
        twitter = 'https://twitter.com/intent/tweet?text={content}&url={url}&related=' + document.domain,
        facebook = 'https://www.facebook.com/sharer/sharer.php?u={url}&t={title}',
        linkedin = 'https://www.linkedin.com/cws/share?url={url}&token=&isFramed=false&lang=en_US',
        qq = 'https://connect.qq.com/widget/shareqq/index.html?url={url}&desc={title}&pics={pic}',
        google = 'https://plus.google.com/share?url={url}';

    // 组装分享链接
    function openSahre (api) {
        var ourl = api.replace('{url}', url).replace('{title}', title).replace('{content}', content).replace('{pic}', pic);
        

        openWindow(ourl, 'xzavier', 900, 600);
    }

    function openWindow(url, title, w, h) {
        var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
        var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top

        var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
        var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height

        var left = ((width / 2) - (w / 2)) + dualScreenLeft
        var top = ((height / 2) - (h / 2)) + dualScreenTop
        var newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)

        if (window.focus) {
            newWindow.focus()
        }
    }

    // 分享调用方法
    this.qzone = function() {
        openSahre(qzone);
    };
    this.weibo = function() {
        openSahre(weibo);
    };
    this.twitter = function() {
        openSahre(twitter);
    };
    this.facebook = function() {
        openSahre(facebook);
    };
    this.linkedin = function() {
        openSahre(linkedin);
    };
    this.google = function() {
        openSahre(google);
    };
    this.douban = function() {
        openSahre(douban);
    };
    this.qq = function() {
        openSahre(qq);
    };
    this.weixin = function(cb) {
        if (typeof cb === 'function') {
            cb(parseUrl(weixin));
        } else {
            openSahre(weixin);
        }
    };
};

使用

var weShare = new SocilaShare({
    url: 'https://xiaohuazheng.github.io',
    title: '分享标题',
    content: '分享内容',
    pic: '分享图片'
});

四个参数都是缺省参数,且并不是四个参数所有的分享链接都能用到。

调用:

<div class="share-bar">
    <a href="javascript:void(0);" stype="weibo">weibo</a>
    <a href="javascript:void(0);" stype="qzone">qzone</a>
    <a href="javascript:void(0);" stype="qq">qq</a>
    <a href="javascript:void(0);" stype="weixin">weixin</a>
    <a href="javascript:void(0);" stype="twitter">twitter</a>
    <a href="javascript:void(0);" stype="facebook">facebook</a>
    <a href="javascript:void(0);" stype="linkedin">linkedin</a>
    <a href="javascript:void(0);" stype="google">google</a>
    <a href="javascript:void(0);" stype="douban">douban</a>
</div>
$(document).on('click', '.share-bar a', function() {
    var type = $(this).attr('stype') || 'weibo';
    weShare[type]();
});

DEMO

点击查看demo

Git

点击前往Git,觉得有用可以star一下。