前端分享插件

之前网站要做一个分享功能，也就是我们常说的分享到微信，朋友圈啊之类的，所以就去找了好几种方法，下面供大家参考。

我主要尝试了以下几种方法：

1.JiaThis

这种是目前最常见的，功能很全，而且支持很多插件，而且有相应的统计数据，以下是代码

<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32">
    <a class="jiathis_button_qzone"></a>
    <a class="jiathis_button_tsina"></a>
    <a class="jiathis_button_tqq"></a>
    <a class="jiathis_button_weixin"></a>
    <a class="jiathis_button_renren"></a>
    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
    <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

很简单吧，效果是下面

当然你直接去他们官网，其他样式的定制代码都是直接粘过来就用。
最后，我没有用这个，第一是想自定义样式比较麻烦，没办法，我们自己的网站这种都是有同意ui风格的；
第二就是，这个插件不支持https，这个真的是不能容忍。

2.自己写a链接

对的，这个方法看起来蠢爆了，但是因为找了几种实在是不支持https，而且插件自带样式真心不好搞。自己写的话加一个样式，只要自己写一个href属性就搞定，这个属性有的可以去官方支持，有点可以直接网上荡。但是唯一的缺点就是，真的是一个个找啊，特别是腾信微博，目前没有链接分享，只是通过空间分享的时候可以同步腾信微博。贴几个常见的大家参考。

（1）qq好友

<a class="bg-blue btn" href="javascript:void(window.open('http://connect.qq.com/widget/shareqq/index.html?url='+encodeURIComponent(document.location.href)+'&title=自己的title'));" title="分享给QQ好友">
<i class="iconfont icon-QQ font-white"></i>
</a>

（2）腾讯微博 ————这个现在是空白链接哦。

<a class="bg-mazarine btn"  href="javascript:void(window.open('http://share.v.t.qq.com/share/share.php?url='+encodeURIComponent(document.location.href)+'&title=自己的title'));" title="分享到腾讯微博">
<i class="iconfont icon-tengxunweibo font-white"></i>
 </a>

（3）朋友圈

<a class="bg-green btn" onclick="showWX('http://qr.liantu.com/api.php?text='+encodeURIComponent(document.location.href))">
<i class="iconfont icon-pengyouquan1 font-white"></i>
  </a>

（4）新浪微博

<a class="bg-red btn" href="javascript:void(window.open('http://service.weibo.com/share/share.php?url='+encodeURIComponent(document.location.href)+'&title=自己的title'));" title="分享到新浪微博">
 <i class="iconfont icon-unie61d font-white"></i>
 </a>

（5）qq空间

<a href="javascript:void(window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href)+'&title=自己的title'));" title="分享到QQ空间" class="bg-yellow btn">
<i class="iconfont icon-qqkongjian font-white"></i>
</a>

这种方式真心麻烦，代码还巨长。 终于经过了一系列的纠结 I Found My Redemption!

3.share.js 事先声明，这个插件不是我写的，是转载的哦。

Share.js
一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站，使用字体图标。
（1）安装
有两种安装方式：
1. 使用 npm
npm install social-share.js
2. 手动下载或者 git clone 本项目。
（2）使用
HTML:

<div class="social-share"></div>
<!-- share.css -->
<link rel="stylesheet" href="dist/css/share.min.css">
<!-- share.js -->
<script src="dist/js/share.min.js"></script>

// 当你使用类名为 `social-share` 或者 `social-share` 时不需要手动初始化 （3）自定义配置 所有配置可选， 通常默认就满足需求：

var $config = {
    //...
   };
$('.social-share').share($config);

（4）可用的配置有：

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', 'douban'], // 启用的站点
disabled                 : ['google', 'facebook', 'twitter'], // 禁用的站点
wechatQrcodeTitle        : "微信扫一扫：分享", // 微信二维码提示文字
wechatQrcodeHelper       : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',

以上选项均可通过标签 data-xxx 来设置： 驼峰转为中横线，如wechatQrcodeHelper 的data标签为data-wechat-qrcode-helper （5）禁用 google、设置分享的描述

<div class="social-share" data-disabled="google" data-description="Share.js - 一键分享到微博，QQ空间，腾讯微博，人人，豆瓣"></div>

（6）设置微信二维码标题

<div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div>

（7）针对特定站点使用不同的属性（title, url, description,image…）

<div class="social-share" data-weibo-title="这个标题只有的分享到微博时有用，其它标题为全局标题" data-qq-title="分享到QQ时用此标题"></div>

（8）你也可以自定义图标 使用: data-initialized=”true” 标签或者 initialized 配置项来禁用自动生成icon功能。

<div class="social-share" data-initialized="true">
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
</div>

以上a标题会自动加上分享链接（a 标签必须带 icon-NAME 属性，不然分享链接不会自动加上）。

（9）如果你想在分享icon列表中内置一些元素，比如放一个收藏按钮在分享按钮的后面：

<div class="social-share">
    <a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>

这样并没有实现，因为结果是所有的分享按钮都创建在了收藏按钮的后面了，这时候你就可以用 data-mode=”prepend” 来确定分享按钮创建的方式。

<div class="social-share" data-mode="prepend">
    <a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>

这样，所有的分享图标就会创建在容器的内容前面，反之可以用 append 创建在容器内容后面，当然这是默认的，也不需要这么做。

（10）指定移动设备上显示的图标

<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>

当在手机上打开该页面的时候就只会显示这4个图标了。

欢迎贡献代码及提建议！