Giter Club home page Giter Club logo

share.js's Introduction

Share.js

🚨 此项目已经年久失修,其实分享就是一个个链接而已,每个链接里传递一些内容,所以定制需求比较高的话建议自己实现,没啥难度。 URL 写法请参考:https://github.com/overtrue/share.js/blob/master/src/js/social-share.js#L56-L64

一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。

qq20151127-1 2x

安装

有3种安装方式:

  1. 使用 npm

    npm install social-share.js
  2. 使用 bower

    bower install social-share.js
  3. 使用 cdnjs,引入 share.min.csssocial-share.min.js 两个链接就好。 (感谢 @mdluo)

  4. 手动下载或者 git clone 本项目。

使用

HTML:

<div class="social-share"></div>

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

// 当你使用类名为 `social-share` 时不需要手动初始化

自定义配置

所有配置可选, 通常默认就满足需求:

可用的配置有:

url                 : '', // 网址,默认使用 window.location.href
source              : '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />
title               : '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
origin              : '', // 分享 @ 相关 twitter 账号
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>'

示例代码:

var $config = {
    title               : '234',
    description         : '123',
    wechatQrcodeTitle   : "微信扫一扫:分享", // 微信二维码提示文字
    wechatQrcodeHelper  : '<p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p>',
};

socialShare('.social-share-cs', $config);

以上选项均可通过标签 data-xxx 来设置:

驼峰转为中横线,如wechatQrcodeHelper 的data标签为data-wechat-qrcode-helper

禁用 google、twitter、facebook 并设置分享的描述
<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一键分享到微博,QQ空间,腾讯微博,人人,豆瓣"></div>
设置微信二维码标题
<div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div>
针对特定站点使用不同的属性(title, url, description,image...)
<div class="social-share" data-weibo-title="这个标题只有的分享到微博时有用,其它标题为全局标题" data-qq-title="分享到QQ时用此标题"></div>

你也可以自定义图标

使用: 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 属性,不然分享链接不会自动加上)。

如果你想在分享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 创建在容器内容后面,当然这是默认的,也不需要这么做。

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

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

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

欢迎贡献代码及提建议!

Requirejs

本插件支持使用Requirejs加载,Jquery版本参考如下:

requirejs.config({
  paths: {
    jquery: '//cdn.bootcss.com/jquery/2.2.4/jquery.min',
    share: '//cdn.bootcss.com/social-share.js/1.0.15/js/jquery.share.min'
  },
  shim: {
    share:['jquery']
  }
})

requirejs(['jquery','share'],function ($){
  $('.target').share({
    // settings
  })
})

无依赖版本直接加载即可,使用参考如下:

requirejs.config({
  paths: {
    share: '//cdn.bootcss.com/social-share.js/1.0.15/js/social-share.min'
  },
})

requirejs(['share'],function (){
//   ele:指定初始化的元素,可以是单个元素也可以是元素数组
  window.socialShare(ele,{
    // settings
  })
})

引用

本项目中二维码生成部分用到了开源组件:lrsjng/jquery-qrcode (MIT License)

贡献你的代码

安装node_modules

npm install

进入开发模式

npm run dev

License

MIT

share.js's People

Contributors

52cik avatar aufree avatar cycjimmy avatar dafrok avatar fengkx avatar freedomlang avatar joe223 avatar moonavw avatar myfreax avatar overtrue avatar paddingme avatar ruchengtang avatar sssssssh avatar summerblue avatar tengattack avatar twn39 avatar winlang avatar wowiwj avatar xuexb avatar zxl9171 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

share.js's Issues

在微信里面打开 点击微信分享

这里应该做一个判断 如果是在微信里面打开 再点击微信分享 不应该再出现那个二维码 而是提示用户点击右上角的菜单分享到朋友圈

微博分享自动抓图失败

首先感谢作者分享和奉献。
在全站启用https站点,微博分享自动抓图功能,只能抓取到网站logo图片,并且logo图片不显示;
在非全站启用https站点,则没有这个问题。
那么,请问问题是不是出在微博分享这边呀?
2017-01-22_103647
2017-01-22_103625

可否提供 bower 支持

虽然 bower 有没落趋势,但是还有不少人前端使用 bower 的。。还是很方便的。😄

字体冲突

css自定义字体后就不显示图标
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;

获取网页的Logo

有的logo可能是以相对路径的方式引入的
建议这样写:
var $image = window.location.host + $(document).find('img:first').attr('src');

js里面的share.js有错误

更新一下,是我的错。你的npm包里面的才有问题,github上面的没有问题。
没有留意

147行
for($key in $data){ 应该是for(var $key in $data){
79行
for ($i in $data.mode == 'prepend' ? $sites.reverse() : $sites) {
应该是
for (var $i in $data.mode == 'prepend' ? $sites.reverse() : $sites) {

都少了var,有时候会报错

无法分享自定义url

当我把这段代码
$config = {
url : '', // 网址,默认使用 window.location.href
source : '', // 来源(QQ空间会用到), 默认读取head标签:
title : '', // 标题,默认读取 document.title 或者
description : '', // 描述, 默认读取head标签:
image : '', // 图片, 默认取网页中第一个img标签
sites : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 启用的站点
disabled : ['google', 'facebook', 'twitter'], // 禁用的站点
wechatQrcodeTitle : "微信扫一扫:分享", // 微信二维码提示文字
wechatQrcodeHelper : '

微信里点“发现”,扫一下

二维码便可将本文分享至朋友圈。

',
}
$('.social-share').share($config);

放在我的一个自定义函数里边,我就无法分享我的自定义url。。。。我已经自定义了url可还是分享了当前url。。请问这是怎么回事呢?难道只能单独放在外面吗?

在Firefox下点击微信二维码会弹出空的新标签页,并且页面上会留下虚线边框。

如图所示:

虚线

简单看了下,如果在

<a href="javascript:;" class="iconfont icon-wechat" target="_blank">

这个a标签添加一个onclick属性,就不会弹出新的标签页了。

<a href="javascript:;" class="iconfont icon-wechat" target="_blank" onclick="return false;">

但是点击后还是会出现虚线,麻烦作者有时间修复一下这个不太起眼的问题,多加感谢。

支持twitter分享定制分享的内容吗?

支持twitter分享定制分享的内容吗,如url,text和图片。显示内容的定制让url可以隐藏在文字和图片下面。就像直接使用推特私信分享github上的内容显示的效果一样的

AMD支持

目前share.js的生命周期是这样的:
share.js加载 --> 加载完毕后运行相应的配置的js --> (window继续loading) --> loading完毕执行share.js内部注册的socialShare()

如果我想在AMD中使用,完全使用不了。我也没办法控制socialShare()的执行,因为当我使用socialShare()的时候,页面早就load了 内部注册的socialShare()已经抢先执行并且锁住了initialized。

Safari下options失效

您好,再打扰一下:
Chrome和Safari下Object$assign.apply()的实现似乎不太一致:
我的代码:

在Chrome下能正确只显示微博微信,Safari下则全部显示。

调试过程如下:
2016-03-16 11 36 04
这是断点位置,

2016-03-16 11 36 20
这是Chrome下的test对象,

2016-03-16 11 37 16 这是Safari下。

操作系统:OS X 10.11.3

我暂时是把Object$assign这段注掉解决的,不知道有没有更好的办法,所以就不提pull request了。

再次感谢您做了这些方便大家的工作。

手机界面问题

data-mobile-sites="weibo,qzone,tencent,qq"
这样设置了之后只会显示第一个微博分享,后面的显示不出来了
<div class="share-component am-fl" data-disabled="google,facebook,twitter" data-mobile-sites="weibo,qzone,tencent,qq"></div>
qq

微信二维码的问题

微信二维码的方向一直是在icon的上面,如果上面满了的话,就会被浏览器覆盖,而不会自动跑到下面来,或者提供配置来处理吧~

mobileSites失效

标签属性里面添加data-mobile-sites 后,在手机端仍会显示所有的站点分享!
测试环境:IOS 9.2下的safari 和 Chrome & 无依赖版本。

是bug还是我的使用姿势不对?

我要这样用才能有效果

// 配置要放第二个参数
$('share-bar').share({}, $options);

我看了一下源码, 发现没有用到第一个参数啊. 是我使用姿势有问题还是bug啊?

自定义图表,微信二维码 没有

我在自定义图表的使用中,其中哟一个分享是到微信,目前我使用的时候 是没有自动生成二维码的功能,是我这边使用不当 还是本身就没有这个功能。 谢谢。

微博分享按钮关闭自动抓图没有对应的配置项

问题描述

微博默认会抓取目标页的图片,但是我希望他不要自动抓取,微博官方文档里面有提供了解决方案(searchPic=false),但是 share.js 里没有对应的配置方法。
http://open.weibo.com/sharebutton

参数使用效果对比:
默认情况,会自动抓图,结果抓到了一张我们不想要的图
http://service.weibo.com/share/share.php?url=http://open.weibo.com/sharebutton&appkey=
指定参数,禁止自动抓图
http://service.weibo.com/share/share.php?url=http://open.weibo.com/sharebutton&appkey=&searchPic=false

解决方案建议

建议这个插件能提供更加灵活的解决方案,能够允许使用者自己针对不同社交网站添加额外的参数,这样才能满足各种特殊需求。

两个div的问题

两个share.js的div,如下:

<p class="social-share" data-sites="">
    <a href="javascript:;" class="social-share-icon icon-heart"></a> 123
</p>

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

第一个div用来做喜欢操作,不做分享,第二个div,用来做分享,结果div中的配置信息串了。实际效果为第一个div显示正常,第二个div理论上应该显示所有的share按钮,实际只显示的heart,第二个div的配置和第一个串了。

npm版本没有更新

您好,我看master分支已经增加了无依赖版本,而npm install的还没有。

QQ分享出现很神奇的问题

生成的分享链接无法使用屏幕阅读器朗读

你好:
我是译名盲人朋友,正在搭建自己的博客。偶然间发现了你创建的项目share.js,感觉很方便。不过,生成出来的链接都读不了呢,因为链接都是以图片形式展示的。为了不影响美观还能让盲人朋友用户用上这个脚本,希望可以给链接加入aria-label属性哦。这个属性的好处是,不影响外观,而能给视障用户使用的屏幕阅读器设置好相应的读取信息。
非常感谢!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.