1. 首页
  2. >
  3. 前端开发
  4. >
  5. Javascript

网页分享按钮的制作

关于网页分享按钮,相信许多人都用到过。对于一般网页开发者来讲,嵌入第三方分享按钮代码,应该是最便捷省事的了。我也尝试过使用JiaThis或百度分享代码,不管从功能速度还是界面,都还是不错的,但让我还是有一丁点不自在的感觉,主要原因还是嵌入了第三方js链接。闲话不多讲,现在来讲一下自己动手制作分享代码的过程吧,相信过程是快乐的。

目前最常用的分享,大概就是微信、QQ好友、QQ空间、新浪微博、人人网这些了,像腾讯微博已经关闭了,不过各大站的分享代码还是存在着,但我的小站就去除了。下面主要就从这几个开始,核心代码如下:

function dwuShare(siteCode){
    var share = {}, openUrl = '';
    share.link = window.location.href;
    share.title = document.title;
    switch(siteCode){
        case 'weixin':
            //微信分享
            $('body').append('');
            new QRCode('dwuShareWeixinQrcode', {
                text: share.link,
                width: 220,
                height: 220,
                colorDark : '#000000',
                colorLight : '#ffffff',
                correctLevel : QRCode.CorrectLevel.H
            });
            break;
        case 'sqq':
            //QQ好友分享
            openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + share.link + '&title=' + share.title;
            break;
        case 'qzone':
            //QQ空间分享
            openUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + share.link + '&title=' + share.title;
            break;
        case 'tsina':
            //新浪微博分享
            openUrl = 'http://service.weibo.com/share/share.php?url=' + share.link + '&title=' + share.title;
            break;
        case 'renren':
            //人人网分享
            openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' + share.link + '&title=' + share.title;
            break;
        default:
            break;
    }
    if(openUrl){
        window.open(openUrl);
    }
    return false;
}


1、微信分享:

这个我放在了第一位,感觉现在微信应该最热门的吧,不过微信分享的套路一直都离不开二维码,不能简单的通过url来分享。

因此这里要用到QRCode.js,用它就可以将需要分享的url生成网址的二维码了,然后就可以用微信的扫一扫功能进行扫描了。

2、QQ好友分享:

根据QQ好友分享的API接口,可以看出参数有好多个,如果有更多需求的朋友可以具体看一下,比如还有:

&desc=邀请详情&title=标题&summary=简介&pics=&flash=&site=邀请人或网站&callback=回调函数。

3、QQ空间分享:

参数还有以下几个:

&desc=默认分享理由(可选)
&summary=分享摘要(可选)
&site=分享来源 如:腾讯网(可选)
&pics=分享图片的路径(可选)
4、新浪微博分享:

参数还有:

&pic=需要转播的图片url,多张以|连接
&appkey=填写正确的appkey,转播后将显示该key的来源
&line1=消息体第一行的文字,最多15个全角字符的长度
&line2=消息体第二行的文字,最多15个全角字符的长度
&line3=消息体第三行的文字,最多15个全角字符的长度
5、人人网分享:

参数还有:

&srcUrl=分享的资源来源Url,默认为header中的Referer,如果分享失败可以调整此值为resourceUrl试试
&pic=分享的主题图片Url
&description=分享的详细描述