/need-more-share2

pure javascript social networks share button

Primary LanguageJavaScriptOtherNOASSERTION

update：已加上QQ空间，人人网，豆瓣的支持。

起因

本来 V2MM 一直使用 MoreBasicShare 相安无事的，在将 MoreBasicShare 移植到 V2MM 的博客评论系统的时候，发现 MoreBasicShare 有几点缺陷难以移植：

  • 代码结构不好，不方便扩展新的分享方式，其中用了大量的字符串拼接；
  • 依赖 jQuery, 而我们的博客评论系统是不依赖 jQuery 的；

偶然发现一个老外写的纯 Javascript 的 Need Share Button, 效果非常好，于是就 Clone 了过来，扩展了一下，增加了很多国内的分享网站，做得更傻瓜易用了一些。

Demo

可以见 V2MM 上的分享按钮，此插件还包含一个 Demo 页面，需把项目 clone 到本地展示。

screenshot

使用方式

有多种方式使用，最简单的方法，加载 js 和 css 后，创建一个 class 名为 need-share-button 的分享按钮就好了，其他什么都不用做。

第一步：在网页里加载 needsharebutton.min.js 和 needsharebutton.min.css。

<!-- needsharebutton Javascript file -->
<script src="js/needsharebutton.min.js"></script>
<!-- needsharebutton CSS file -->
<link href="css/needsharebutton.min.css" rel="stylesheet" />

第二步：创建一个need-share-button，插件会自动找到所有 need-share-button, 制作成分享按钮。

<button  class="btn btn-default need-share-button">Share</button>

这样你会看到网页上的 Share Button 已经可以使用了， 还可以通过 data-share- 传参。

第三步：如果需要使用别的名字，可以手动调用 needShareButton 函数，比如：

new needShareButton(document.getElementById('my-share-button'));
# or
new needShareButton('#my-share-button');

needShareButton 函数

needShareButton 函数有两个参数：

  1. element, 可以是 Dom 节点，也可以是 CSS 选择器;
  2. options, 选项；

Options

Options 可以通过参数传进去，也可以放在 DOM 节点里（加上 data-share- 前缀）。

  1. iconStyle： default or box；
  2. boxForm： horizontal or vertical;
  3. position: bottomCenter, top / middle / bottom + Left / Center / Right;
  4. networks: 默认： 'Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote'; 注意，默认没有 RenRen，如果需要分享到人人网，在 networks 参数里加上 RenRen;
  5. url: 默认： location.href;
  6. title: 默认：document.title;
  7. image: 默认从 meta[property="og:image"] 或 meta[name="twitter:image"] 取值；
  8. description: 默认从 meta[property="og:description"] 或 meta[name="twitter:description"] 取值；

感谢

感谢DzmVasileusky，此项目基于他的作品改编。