SNS 分享按钮的实现

#web #front-end

国内现在用的最多的 SNS 估计就是微信、微博和 QQ 空间了吧。 现在网页上一般都有分享到微博啊之类的按钮,之前我们网站上的这些都是外包做的,基本都是用别人集成好的 js 控件,但是现在因为站点升级到 https 了,而这些分享控件 js 文件都是 http 的,直接失效了。而且之前使用别人控件有些样式也不受控制,于是准备自己搞定。恩,其实很简单的,就是链接上拼接上参数就行了,下面我详细介绍下吧。

微信分享

在微信内浏览网页的时候想要把这个网页分享出去或者发送给朋友,最简单的就是直接 copy url 了。还有就是菜单栏中发送给好友和分享到朋友圈,直接发送的话会自动读取网页的 title 和 图片。我们要做的是自定义 发送出去的时候看到的图片和标题。微信分享自定义内容是最麻烦的了。 首先,你要有自己的公众号。有没有权限,直接登入公众号然后看看 【接口权限】里的分享权限是否已经拥有。 然后你们自己看 文档 吧,说起来有点麻烦啊。

其实坑爹的是要去获取签名,涉及到后端的开发,也是挺麻烦的。不过一般都写成工具类,然后访问这个页面的时候去调用下,然后把相应的参数传回前端。下面就是 html 上验证权限配置。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

然后就是获取“分享给朋友”按钮点击状态及自定义分享内容接口和获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});


wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

如果是做过微信公众号开发相关的话,应该一看就懂了。

微博分享

相比微信而言,微博就简单多了。 首先你要上 微博开放平台 申请一个账号,然后 接入网站 ,然后你会得到 appkey ,使用起来很简单,详细说明。也挺奇怪的,这个分享被放到了 wap 站接入。搞不懂,真的很难找到这个地方。

接入地址:http://weibo.cn/ext/share

接受参数(CGI) 作用 说明
ru 分享内容URL GET方式,必选,需要urlencode
rt 分享内容标题 GET方式,必选,中文使用UTF-8编码,需要urlencode
appkey 开放平台KEY GET方式,可选。
未传入时,默认来源显示为:手机微分享
传入未通过平台审核的Appkey时,来源显示为:未通过审核应用
tp 分享图片地址 GET方式,可选。
必须为真实图片地址(.jpg|.gif|.png)需要urlencode
backurl 回跳地址 GET方式,可选。
如果不填则默认返回地址为ru
st 时间戳 GET方式,必选。
防止页面缓存使用
标准GMT +8 UNIX_TIMESTAMP
ntitle 引导语 GET方式,可选,将作为可编辑的内容放入分享框中
relateUid 关联用户的UID,分享微博会@该用户 GET方式,可选。
skipshow 是否显示分享输入框页面 GET方式,可选。
skipshow=1则不显示分享输入框页面直接分享并跳转到分享成功页
默认为0

调用示例:

<a href="http://weibo.cn/ext/share?ru=http%3A%2F%2F16kxs.com%2Fwap%2FBook%2FShow.aspx%3Fid%3D7983%26lmid%3D0%26uid%3D0%26ups%3D0&rt=%E9%83%BD%E5%B8%82%E7%89%A7%E9%AC%BC%E4%BA%BA&st=1301645308&appkey=3989260088">分享到微博</a>

QQ 空间

QQ 空间分享是最简单的了 ,都不需要申请就能直接用。 官方网站 ,上也提供了集成好的组件,提供各种大小的 logo 等等。 但是也没有提供 https 的链接,而且提供的图标也都是正方形的。略坑,如果不想使用默认的话那就学微博样 ,自己拼接参数。

接入地址 : http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey 然后参数看看下面官方提供的源码吧。


(function(){
var p = {
url:location.href,
showcount:'0',/*是否显示分享总数,显示:'1',不显示:'0' */.
desc:'',/*默认分享理由(可选)*/
summary:'',/*分享摘要(可选)*/
title:'',/*分享标题(可选)*/
site:'',/*分享来源 如:腾讯网(可选)*/
pics:'', /*分享图片的路径(可选)*/
style:'203',
width:22,
height:22
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank">分享</a>'].join(''));
})();

然后调用示例参考微博分享。

总结

其实我们自己用的时候一般就是 a 标签的 href 放拼接好参数的链接,然后里面放个 Logo 就好了。具体怎么展现就看你们自己的业务需求了。 其他的 SNS 分享应该都是类似的,就不再一一列举了。

<a href=""><img></img></a>
There are no comments on this post.