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

使用到的接口(测试时需要登录,网址和图片必须是公网的,不能localhost):

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,需要在新浪微博开放平台中申请

一键分享代码参考如下:

html
  1. <div class="fl">分享到:</div>
  2. <div onclick="shareTo('qzone')">
  3. <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="30">
  4. </div>
  5. <div onclick="shareTo('qq')">
  6. <img src="http://zixuephp.net/static/images/qqshare.png" width="32">
  7. </div>
  8. <div onclick="shareTo('sina')">
  9. <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="36">
  10. </div>
  11. <div onclick="shareTo('wechat')">
  12. <img src="http://zixuephp.net/static/images/wechatshare.png" width="32">
  13. </div>
js
  1. function shareTo(stype){
  2. var ftit = '';
  3. var flink = '';
  4. var lk = '';
  5. //获取文章标题
  6. ftit = $('.pctitle').text();
  7. //获取网页中内容的第一张图片
  8. flink = $('.pcdetails img').eq(0).attr('src');
  9. if(typeof flink == 'undefined'){
  10. flink='';
  11. }
  12. //当内容中没有图片时,设置分享图片为网站logo
  13. if(flink == ''){
  14. lk = 'http://'+window.location.host+'/static/images/logo.png';
  15. }
  16. //如果是上传的图片则进行绝对路径拼接
  17. if(flink.indexOf('/uploads/') != -1) {
  18. lk = 'http://'+window.location.host+flink;
  19. }
  20. //百度编辑器自带图片获取
  21. if(flink.indexOf('ueditor') != -1){
  22. lk = flink;
  23. }
  24. //qq空间接口的传参
  25. if(stype=='qzone'){
  26. 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'));
  27. }
  28. //新浪微博接口的传参
  29. if(stype=='sina'){
  30. window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+ftit+'&pic='+lk+'&appkey=2706825840');
  31. }
  32. //qq好友接口的传参
  33. if(stype == 'qq'){
  34. 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开发交流的网站');
  35. }
  36. //生成二维码给微信扫描分享,php生成,也可以用jquery.qrcode.js插件实现二维码生成
  37. if(stype == 'wechat'){
  38. window.open('http://zixuephp.net/inc/qrcode_img.php?url=http://zixuephp.net/article-1.html');
  39. }
  40. }

使用说明:

这里的如获取文章标题、文章图片、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

一键分享到QQ空间、QQ好友、新浪微博、微信代码的更多相关文章

  1. QQ空间|qq人气号怎么赚钱?

    回报,付出的终极诉求,咱不论情怀. 在<怎么做一个QQ人气号>中,笔者大致提及,打造人气空间的流程,这里简单剖析下QQ人气空间的盈利模式. 关键词:转让,出售,广告,微商,合作,网红,接推 ...

  2. share.js一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等

    官网上面 https://github.com/overtrue/share.js非常详细的介绍了share.js他的使用 使用方式有:第一:使用 npm npm install social-sha ...

  3. 手机QQ内置网页,微信内置网页中进行分享到QQ和微信的操作

    微信内的网页分享: API内容详见微信开发文档  https://mp.weixin.qq.com/wiki 这里需要注意的是:调用微信API的时候修改的是微信内网页右上角三个点那里打开后,选择分享之 ...

  4. 乐易贵宾VIP教程:百度贴吧 - QQ部落 - QQ空间 Post实战系列视频课程

    教程挺不错,3套案例的实战,有需要的可以看一下百度贴吧课程目录:1.百度登录抓包分析2.百度登录[代码实现]3.百度验证码登录[代码实现]4.贴吧关注[抓包分析]5.贴吧关注(代码编写)6.贴吧签到[ ...

  5. 模仿QQ空间 网页设计

    目的:1.通过模仿QQ空间,全自主写代码,熟悉网页设计的流程 2.熟练的掌握HTML.CSS.JS的应用 3.将在此过程中遇到的问题及其解决方法记录在此,以便取用. 开始: 一.登陆界面(index. ...

  6. 腾讯QQ空间超分辨率技术TSR

    腾讯QQ空间超分辨率技术TSR:为用户节省3/4流量,处理效果和速度超谷歌RAISR 雷锋网AI科技评论: 随着移动端屏幕分辨率越来越高,甚至像iPhone更有所谓的“视网膜屏”,人们对高清图片的诉求 ...

  7. 树莓派自动播报温湿度到QQ空间、微博

    原文链接 https://aoaoao.me/951.html 这是个比较无聊的应用...灵感来自于一个叫做“古城钟楼”的微博账号,此账号每天都会定点报时,除此之外没有其他任何内容,以此吸引了近50万 ...

  8. JS/java实现QQ空间自动点赞

    使用方法: 1:进入QQ空间 2:复制下面代码 3:按F12或右键审查元素 进入控制台 也就是console 4:粘贴  回车键  喝口水 5:如果嫌慢的话可以 修改这段代码. window.setI ...

  9. SEO那些事:一句代码一键分享网站

    这是很久以前就已经写过的笔记了,有一个习惯,每次遇到一个问题,都会进行百度,然后把解决问题的关键点记录下来,有人问我,为什么更新频率如此之快,大部分都是从前积累的知识点. 其实每天工作所涉及的知识点都 ...

随机推荐

  1. C++实现二叉树(建树,前序,中序,后序)递归和非递归实现

    #include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...

  2. css模型

    外边距: margin:1px 2px 3px 4px; 上     右     下     左 内边距: padding:1px 2px 3px 4px; 上     右     下     左 边 ...

  3. Ruby模块与类

    Ruby是单一继承,一个类只能有一个直接的母类 Mix-in 模式来处理复合需求 多重包含: 由下往上回溯,重复的只看最上方的      换句话说,程序由上往下执行,由具体到抽象,第二次发现同一个模块 ...

  4. css覆盖select样式并添加小箭头

    .select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...

  5. C++this详解

    以前对this指针误解挺多的,在这里单独写一篇进行总结,有不对之处,欢迎指正批评! 一.问题 1.一个类中的不同对象在调用自己的成员函数时,其实它们调用的是同一段函数代码,那么成员函数如何知道要访问哪 ...

  6. 【Maven】CentOS7使用Nexus3搭建maven私服

    一.简介 Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model(POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做PO ...

  7. xml小练习

    挑选你熟悉省份,制作xml城市列表 ----- 必备城市基本信息 10个城市 --- 一定要有属性对城市列表 添加DTD约束 <?xml version="1.0" enco ...

  8. 加密解密(1)HTTPS与HTTP区别

    HTTPS简介 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即 ...

  9. break跳出嵌套循环体

    package com.wh.Object; public class Test { public static void main(String[] args) { // TODO Auto-gen ...

  10. UML 活动图(转载)

    活动图:用于表示系统中各种活动的次序,它的应用非常广泛,即可用来描述用例的工作流程,也可用来描述类中某个方法的操作行为.常用于表示业务流程,对系统功能建模,强调对象之间的控制流.活动图是由状态图变化而 ...