JQ一键分享到QQ空间、QQ好友、微博等

记录最近做项目遇到一个需求：网页添加一键分享到QQ好友、微信的功能

实现此功能可以使用Share.js插件来实现。该插件的开源包下载地址如下

https://github.com/overtrue/share.js/

下载后可将src文件夹复制到项目下，引入share.min.css 与 social-share.min.js两个文件。

js相关配置

	var $config = {  
	          url : '',// 网址，默认使用 window.location.href  
             source: '', // 来源（QQ空间会用到）, 默认读取head标签 如<meta name="site" content="http://overtrue" />  
	          title : '标题', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />  
          description : '详细描述', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />  
	          image : '', // 图片, 默认取网页中第一个img标签  
	          sites : ['qzone', 'qq', 'weibo','wechat'], // 启用的站点  
	          disabled : ['google', 'facebook', 'twitter'], // 禁用的站点  
	          wechatQrcodeTitle : '微信扫一扫：分享', // 微信二维码提示文字  
	          wechatQrcodeHelper : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',  
	          target : '_blank' //打开方式  
	      };  
	      $('.social-share').share($config); 

注：url项：如使用本地测试有可能分享失败，如QQ分享，如url换成线上的，则成功

url : http://localhost:8080/TradeSystem/LoginServlet

 

这里以分享到QQ好友为例

html代码

QQ分享图标

function qqFriend() {
	  $.ajax({
	          url: '${path}/StockServlet?methodName=sendEmails&commodityStockOrderID='+${stockCommodityId},
	          type: 'POST',
	          async: false,//必须是同步提交的
	          success: function (data) {
	           /*省略了部分代码*/
	          },
		  });
	  title=   $("#supplierName").text(); 
	 /*配置项*/ 
      var config = {
          url : " /*获取URL，可加上来自分享到QQ标识，按自己需求填写*/
          desc:'',
          title : title +"电子单据", /*分享标题(可选)*/ 
          summary : content, /*分享摘要(可选)*/ /*分享图片(可选)*/
          flash : '', /*视频地址(可选)*/
          site : 'http://localhost:8080/TradeSystem/Login/Login.jsp', /*分享来源如：QQ分享*/
          style : '201',
          width : 32,
          height : 32
      };
      var s = [];
      for ( var i in config) {
          s.push(i + '=' + encodeURIComponent(config[i] || ''));
      }
      var url = "http://connect.qq.com/widget/shareqq/index.html?"+s.join('&');
      return url; 
  }

效果

 

 

 

 

使用到的接口

.分享到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 注意需要在新浪微博开放平台