阅读模式:

一键分享到QQ空间、QQ好友、新浪微博、微信代码

查看:128912  回复:34  类型:  来源:php自学网  标签 javascript

        通过qq空间qq聊天新浪微博和微信二维码分享平台提供的接口实现把网页中对应的图片、标题、描述的信息参数用javascript获取后传进接口中,实现一键分享

        使用到的接口(测试时需要登录,网址和图片必须是公网的,不能localhost,QQ图片不能太宽,太宽标题描述会undefiend):

            1.分享到QQ空间接口https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片&summary=你的分享描述信息

            2.分享给QQ好友接口http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述

            3.分享到新浪微博接口http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key,需要在新浪微博开放平台中申请


一键分享代码参考如下:

<div class="fl">分享到:</div> 
<div onclick="shareTo('qzone')">     
    <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="30"> 
</div> 
<div onclick="shareTo('qq')">     
    <img src="http://zixuephp.net/static/images/qqshare.png" width="32"> 
</div> 
<div onclick="shareTo('sina')">     
    <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="36"> 
</div> 
<div onclick="shareTo('wechat')">     
    <img src="http://zixuephp.net/static/images/wechatshare.png" width="32"> 
</div>
function shareTo(stype){
    var ftit = '';
    var flink = '';
    var lk = '';
    //获取文章标题
    ftit = document.title;
    //获取网页中内容的第一张图片地址作为分享图
    flink = document.images[0].src;
    if(typeof flink == 'undefined'){
        flink='';
    }
    //当内容中没有图片时,设置分享图片为网站logo
    if(flink == ''){
        lk = 'http://'+window.location.host+'/static/images/logo.png';
    }
    //如果是上传的图片则进行绝对路径拼接
    if(flink.indexOf('/uploads/') != -1) {
        lk = 'http://'+window.location.host+flink;
    }
    //百度编辑器自带图片获取
    if(flink.indexOf('ueditor') != -1){
        lk = flink;
    }
    //qq空间接口的传参
    if(stype=='qzone'){
        window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content'));
    }
    //新浪微博接口的传参
    if(stype=='sina'){
        window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+ftit+'&pic='+lk+'&appkey=2706825840');
    }
    //qq好友接口的传参
    if(stype == 'qq'){
        window.open('http://connect.qq.com/widget/shareqq/index.html?url='+document.location.href+'?sharesource=qzone&title='+ftit+'&pics='+lk+'&summary='+document.querySelector('meta[name="description"]').getAttribute('content')+'&desc=php自学网,一个web开发交流的网站');
    }
    //生成二维码给微信扫描分享,php生成,也可以用jquery.qrcode.js插件实现二维码生成
    if(stype == 'wechat'){
        window.open('http://zixuephp.net/inc/qrcode_img.php?url=http://zixuephp.net/article-1.html');
    }
}

使用说明:

    这里的如获取文章标题、文章图片、logo图片地址等一些其他信息是按照本站的规则来的,使用时需要修改成自己站点的calss或id选择器来获取。如果调试不成功,可以尝试本站中的分享功能,分享时会打开新窗口,那条链接是最终要分享的,已经拼接好的参数链接,可以复制进行比对参考。

最终分享链接示例:

    1.分享到qq空间:

https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://zixuephp.net/article-309.html?sharesource=qzone&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pics=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=通过各自平台的开发接口,进行参数指定,进行一键分享javascript代码功能

    2.分享到qq好友:

https://connect.qq.com/widget/shareqq/index.html?url=http://zixuephp.net/article-309.html?sharesource=qzone&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pics=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=通过各自平台的开发接口,进行参数指定,进行一键分享javascript代码功能&desc=php自学网,一个web开发交流的网站

    3.分享到新浪微博:

http://service.weibo.com/share/share.php?url=http://zixuephp.net/article-309.html?sharesource=weibo&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pic=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&appkey=2706825840&sudaref=zixuephp.net&display=0&retcode=6102#_loginLayer_1528860698455

    4.分享到微信(js生成二维码方式)

jquery生成二维码方式:

jquery.qrcode.js生成二维码demo.html

下载代码:

jquery.qrcode.js生成二维码demo.rar

分享效果点击本站文章分享功能,效果图如下:

一键分享js代码

分享到:
42 30

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

最新评论:
该  发表于 2017-12-04 17:46:08  中国重庆重庆
沙发
mark 回复
站长 回复
2017-12-04 20:06 中国广东深圳 回复
爱像风筝断了线  发表于 2018-01-31 17:14:36  中国福建福州
板凳
手机端不实用,不能拉起app进行分享,有什么方法可以拉起QQ微信分享吗? 回复
站长 回复 爱像风筝断了线 这个是网页端分享呢。大部分网站都是这么分享的。但有些app会自带分享功能的。在网页中可以使用tencent://打开qq,app其他的不太了解了。
2018-02-01 15:22 中国广东深圳 回复
爱像风筝断了线  发表于 2018-01-31 17:18:55  中国福建福州
地板
https://luoximu.jimdo.com/用jimdo做的一个网站,完全不懂网站制作,自己慢慢摸索出来的,最近想弄一个像你这样的评论系统和分享按钮,不知道怎么弄。 回复
站长 回复 爱像风筝断了线
2018-02-01 16:49 中国广东深圳 回复
放飞、  发表于 2018-02-06 17:49:27  中国北京北京
4楼
手机端qq分享出去可以点击链接,但是网页版的话粉爱你刚出去为什么不能点击呢?链接里面只有http://test.muwai.com/Product/product_detail/id/5.html?sharesource,后面的参数没有了。。。 我的代码,可以帮我看下吗?谢谢,并且手机端分享到qq空间登录之后跳转到分享页面,瞬间又回到登录页面了,,哎 回复
站长 回复 放飞、 我测试正常呢。
2018-02-06 20:43 中国广东深圳 回复
放飞、  发表于 2018-02-08 11:13:25  中国北京北京
5楼
楼主,能加你qq求教下吗?我们最近移动端要分享微信,朋友圈,qq,空间,微博、、昨天对着你的例子写了,但是有点小问题,想求教下可以吗?924103119 回复
站长 回复 放飞、
2018-02-10 00:31 中国广东深圳 回复
Sunflower  发表于 2018-05-22 16:36:19  中国上海上海
6楼
站长,为啥我调用分享到空间的接口获取不到title和summary的值呢?页面上显示一直都是undefiend,但是分享成功了。 回复
站长 回复 Sunflower https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.zixuephp.net/article-309.html?sharesource=qzone&title=%E4%B8%80%E9%94%AE%E5%88%86%E4%BA%AB%E5%88%B0QQ%E7%A9%BA%E9%97%B4%E3%80%81QQ%E5%A5%BD%E5%8F%8B%E3%80%81%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A%E3%80%81%E5%BE%AE%E4%BF%A1%E4%BB%A3%E7%A0%81&pics=http://www.zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=%E9%80%9A%E8%BF%87%E5%90%84%E8%87%AA%E5%B9%B3%E5%8F%B0%E7%9A%84%E5%BC%80%E5%8F%91%E6%8E%A5%E5%8F%A3%EF%BC%8C%E8%BF%9B%E8%A1%8C%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%EF%BC%8C%E8%BF%9B%E8%A1%8C%E4%B8%80%E9%94%AE%E5%88%86%E4%BA%ABjavascript%E4%BB%A3%E7%A0%81%E5%8A%9F%E8%83%BD 这是我这里点击分享后跳转的地址,看下参数有没有没写对的
2018-05-25 09:06 中国广东深圳 回复
那年的雨 回复 Sunflower 亲,你是怎么解决的?我也遇到这个问题了,不能获取title等值
2018-06-28 22:06 中国重庆重庆电信 回复
站长 回复 Sunflower 分享到QQ好友时分享的图片太宽会导致title和summary的值undefiend
2019-10-18 18:10 中国广东省深圳市南山区 回复
Sunflower  发表于 2018-05-22 16:37:45  中国上海上海
7楼
分享到好友一直都是发送失败呢 回复
站长 回复 Sunflower 分享到QQ好友的接口已经是更新了,最新的请参考这里。
https://connect.qq.com/intro/sharetoqq
2018-05-25 09:16 中国广东深圳 回复
热闹 回复 Sunflower 网站失效了呢 请问有最新的网站吗
2018-08-06 14:08 中国上海上海电信 回复
蛟龙  发表于 2018-06-13 19:26:19  中国北京北京联通
8楼
十分感谢站长耐心的帮助,成功搞定了pc 页面对于qq,微信,微博的分享。遇到的坑:注意地址栏后面带的参数的格式,比如url,图片的地址都得是有效的公网地址。微信分享的时候需要自己先写一个html,借助qrcode.js 生成二维码,然后把最终需要跳转的url 传过去就可以了 回复
站长 回复 蛟龙
2018-06-13 20:21 中国广东深圳电信 回复
Troy_CIZION 回复 蛟龙 请问,手机端有解没?
手机端qq好友分享的时候,弹出的是电脑端的登陆画面,体验很差
2018-10-05 10:02 韩国首尔XXXX 回复
彪‘、;。歌  发表于 2018-08-28 11:59:49  中国陕西西安电信
9楼
未登录qq时进行qq好友不停的闪 回复
站长 回复 彪‘、;。歌 是不是你那多次的打开了分享链接了
2018-08-28 16:12 中国广东深圳电信 回复
~~~时光不老  发表于 2018-09-11 16:19:19  中国吉林长春联通
10楼
为什么分享之后的链接打开的页面不是分享的那个页面啊 回复
站长 回复 ~~~时光不老 分享链接中url参数就是你的网址链接,你指定哪个链接跳转时就是哪个链接了。你可以在获取本页面链接时,alert()弹窗看看你实际获取到的链接。
2018-09-11 19:03 中国广东深圳电信 回复
清风如醉  发表于 2018-09-18 11:02:39  中国北京北京联通
11楼
我这个本地登陆QQ 然后点击分享之后跳转到分享QQ 界面 那个登录框一直在闪,关闭都关不了 回复
站长 回复 清风如醉
2018-10-31 16:55 中国广东深圳电信 回复
Troy_CIZION  发表于 2018-10-05 10:02:59  韩国首尔XXXX
12楼
请问,手机端有解没? 手机端qq好友分享的时候,弹出的是电脑端的登陆画面,体验很差 回复
站长 回复 Troy_CIZION 只有这样的
2018-10-16 16:01 中国广东深圳电信 回复
龙仔  发表于 2018-12-23 00:39:13  中国广西南宁移动
13楼
这个可以帮我做一个吗 http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述 回复
军  发表于 3月前  中国上海市上海市
14楼
回复
回复 112
2019-08-12 15:20 中国上海市上海市 回复
回复 333
2019-08-12 15:08 中国上海市上海市 回复
不请自来  发表于 3月前  中国上海市上海市闵行区
15楼
你好,我这边可以转载吗 回复
站长 回复 不请自来 可以的。
2019-09-06 23:06 回复
回复:[主题]
表情:
 提交评论
清空

发布评论:


登录:
  表情:
评论话题
推荐阅读:
ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:9348centos 7 修改系统屏幕分辨率   阅读:44535centos 7 安装 nginx-1.11.10   阅读:8355mysql5.7开启sql日志的配置   阅读:8976栈和堆的区别   阅读:4892十张GIF让你弄懂递归等概念   阅读:5973php删除一个文件夹内的所有文件夹和文件   阅读:4691mysql的四种索引类型   阅读:22403最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:31669linux php7安装yaf扩展   阅读:8305php 读取和设置redis的键值   阅读:7159给网站添加一键qq登录的功能   阅读:7351移动端自适应rem原理   阅读:9576centos 7.2 添加php7 的 php-fpm 开机启动   阅读:24341mysql5.7开启sql日志的配置   阅读:8976关于PHP程序员技术职业生涯规划   阅读:2779最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:10815php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:8339爱编程,也爱健康   阅读:4207javascript对cookie操作详细代码函数   阅读:5199shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:8859php文件下载防盗链   阅读:9711php设置cookie为HttpOnly防止XSS攻击   阅读:12588centos 7 安装 nginx-1.11.10   阅读:8355linux时间戳有趣的情人节秒1234567890   阅读:5346爱编程,也爱健康   阅读:4207mysql中文分词全文搜索索引讯搜的安装   阅读:6730网站性能优化-页面静态缓存   阅读:5374centos 7搭建zabbix3.4   阅读:6398简单的DOS攻击之死亡之ping详解   阅读:55202php打印九九加法表   阅读:10178mongodb设置shell开机启动脚本   阅读:9926centos 7搭建zabbix3.4   阅读:6398面试都会问你为什么你从上一家公司离职的真实意思   阅读:10936php打印九九加法表   阅读:10178纯干货,程序员面试的超实用技巧   阅读:4197centos7开启交换内存   阅读:10767centos 7 设置 nginx-1.11.10 开机启动   阅读:7889linux时间戳有趣的情人节秒1234567890   阅读:5346php文件下载防盗链   阅读:9711session与cookie的区别   阅读:4087最简单的Banner轮播左右切换效果代码及实现思路(附带源码)   阅读:31669centos 7 忘记root密码   阅读:4720php连接redis   阅读:5571网站局部小图片优化-base64编码图片   阅读:13006shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:8859最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:13100centos 7 设置 nginx-1.11.10 开机启动   阅读:7889面试都会问你为什么你从上一家公司离职的真实意思   阅读:10936php压缩页面的html代码一行显示   阅读:7301