一键分享工具share.js

妖狐艹你老母 2022-06-02 03:39 382阅读 0赞

今天做网站时，要用到一键分享工具，在网上搜了下，尝试了下：

首先网站中引入一下文件：

<link href="dist/css/share.min.css">
    <script src="dist/js/share.min.js"></script>

html：

js进行相应配置：

//一键分享相关配置
     var $config = {
          url                 : window.location.href,// 网址，默认使用 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);

注意：本地测试或者使用localhost测试时，可能不能正常工作  
如：  
![这里写图片描述][SouthEast]

QQ分享时，报如下错误：  
![这里写图片描述][SouthEast 1]

可以挂到线上后，重新测试：  
![这里写图片描述][SouthEast 2]

详情可查看：[一键转发工具share.js][share.js]  
线上实例：[demo][]

[SouthEast]: /images/20220602/42fb5f76da0d4b00ae93f3edf2a77cce.png
[SouthEast 1]: /images/20220602/fd4acc54fd0b4eb882dbf2377f7bd232.png
[SouthEast 2]: /images/20220602/3474a784076940a1ba92df527b91e6a5.png
[share.js]: http://blog.csdn.net/hahaheyliu/article/details/74331382
[demo]: http://www.lanrenzhijia.com/demos/39/3901/demo/