Skip to content
pure javascript social networks share button
JavaScript CSS
Branch: master
Clone or download
#5 Compare This branch is 21 commits ahead, 2 commits behind DzmVasileusky:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.gitignore
Gruntfile.js
LICENSE.md
README.md
csscomb.json
package.json
screenshot.png

README.md

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.jsneedsharebutton.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,此项目基于他的作品改编。

You can’t perform that action at this time.