桌面网页上实现分享功能,分享到QQ空间、新浪微博、人人网
程序员文章站
2022-06-26 13:27:43
...
重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。
本文原文地址:桌面网页上实现分享功能,分享到QQ空间、新浪微博、人人网
在桌面网页上发现好文章时用户往往选择分享给朋友,而这时我们如何实现分享呢,本文列出了分享到:QQ、QQ空间、新浪微博、人人网 的api和分享代码。你不必再去到处找了。
1、分享到QQ
API接口:https://connect.qq.com/widget/shareqq/index.html
参数:
字段 | 含义 |
---|---|
url | 要分享的地址 |
title | 分享标题 |
source | 分享内容的来源,常常就写主站的首页地址 |
summary | 要分享的内容描述 |
pics | 分享时的图片 |
desc | 分享时的预置文案,就是会紧接着一另一条消息发给好友的内容 |
2、分享到QQ空间
API接口:https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey
参数:
字段 | 含义 |
---|---|
url | 要分享的地址 |
title | 分享标题 |
site | 分享内容的来源,常常就写主站的首页地址 |
summary | 要分享的内容描述 |
pics | 分享时的图片 |
desc | 分享时的预置文案,相当于你发空间时写的内容 |
3、分享到新浪微博
API接口:http://service.weibo.com/share/share.php
参数:
字段 | 含义 |
---|---|
url | 要分享的地址 |
title | 分享标题 |
appkey | 新浪微博的appkey |
pic | 分享时的图片 |
4、分享到人人网
API接口:http://widget.renren.com/dialog/share
参数:
字段 | 含义 |
---|---|
resourceUrl | 要分享的地址 |
srcUrl | 分享内容的来源,常常就写主站的首页地址 |
title | 分享标题 |
description | 要分享的内容描述 |
pic | 分享时的图片 |
5、代码
下面的代码封装了所列出的所有分享,你可以直接COPY,代码里包含了本站的首页地址,复制的时候记得改成自己的站点地址哦:
var ShareUtil = {
openShareUrl: function (url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
a.click();
},
shareToQQ: function (option) {
var url = "https://connect.qq.com/widget/shareqq/index.html" +
"?url=" + encodeURIComponent(option.url) +
"&title=" + encodeURIComponent(option.title) +
"&source=" + encodeURIComponent('https://www.micranswer.cn') +
"&summary=" + encodeURIComponent(option.desc) +
"&pics=" + encodeURIComponent(option.pics) +
"&desc=" + encodeURIComponent(option.summary);
ShareUtil.openShareUrl(url);
},
shareToQZone: function (option) {
var url = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey" +
"?url=" + encodeURIComponent(option.url) +
"&title=" + encodeURIComponent(option.title) +
"&summary=" + encodeURIComponent(option.desc) +
"&desc=" + encodeURIComponent(option.summary) +
"&site=" + encodeURIComponent('https://www.micranswer.cn') +
"&pics=" + encodeURIComponent(option.pics);
ShareUtil.openShareUrl(url);
},
shareToWeibo: function (option) {
var url = "http://service.weibo.com/share/share.php" +
"?url=" + encodeURIComponent(option.url) +
"&title=" + encodeURIComponent(option.title + "。" + option.desc) +
"&pic=" + encodeURIComponent(option.pics) +
"&appkey=" + encodeURIComponent(option.appkey);
ShareUtil.openShareUrl(url);
},
shareToRenren: function (option) {
var url = 'http://widget.renren.com/dialog/share' +
'?resourceUrl=' + encodeURIComponent(option.url) +
'&srcUrl=' + encodeURIComponent('https://www.microanswer.cn') +
"&title=" + encodeURIComponent(option.title) +
"&description=" + encodeURIComponent(option.desc) +
"&pic=" + encodeURIComponent(option.pics);
ShareUtil.openShareUrl(url);
}
}
然后你就可以使用 ShareUtil
里面的方法进行分享啦。记得为此博文点赞分享哦。
推荐阅读
-
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
-
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
-
使用Javascript 实现 分享到 新浪微博 QQ 空间等
-
桌面网页上实现分享功能,分享到QQ空间、新浪微博、人人网
-
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
-
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
-
如何利用HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码的功能
-
如何利用HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码的功能
-
【2011.09.01】如何分享文章到新浪微博和QQ空间?如何设置关注按钮?(采用js代码实现)...