• Stars
    star
    3,691
  • Rank 11,974 (Top 0.3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

pinyin

🇨🇳 基于词库的中文转拼音优质解决方案
PHP
4,296
star
2

easy-sms

📲 一款满足你的多种发送需求的短信发送组件
PHP
3,127
star
3

laravel-wechat

微信 SDK for Laravel, 基于 overtrue/wechat
PHP
2,865
star
4

socialite

Socialite is an OAuth2 Authentication tool. It is inspired by laravel/socialite, you can easily use it without Laravel.
PHP
1,294
star
5

laravel-lang

🌏 75 languages support for Laravel application.
PHP
1,271
star
6

laravel-follow

❤️ This package helps you to add user based follow system to your model.
PHP
1,183
star
7

api.yike.io

一刻社区后端 API 源码
PHP
1,021
star
8

phplint

🐛 A tool that can speed up linting of php files by running several lint processes at once.
PHP
981
star
9

yike.io

一刻社区前端源码
Vue
658
star
10

laravel-pinyin

🇨🇳 Chinese to Pinyin translator for Laravel 5 / Lumen
PHP
529
star
11

chinese-calendar

📅 中国农历(阴历)与阳历(公历)转换与查询工具
PHP
521
star
12

laravel-versionable

⏱️Make Laravel model versionable
PHP
510
star
13

vue-avatar-cropper

👧 A simple and elegant avatar cropping and upload plugin.
JavaScript
508
star
14

laravel-filesystem-qiniu

A Qiniu Storage filesystem for Laravel
PHP
471
star
15

laravel-like

👍 User-like features for Laravel Application.
PHP
467
star
16

laravel-favorite

❤️ User favorite feature for Laravel Application.
PHP
422
star
17

laravel-query-logger

📝 A dev tool to log all queries for laravel application.
PHP
408
star
18

laravel-shopping-cart

🛒 Shopping cart for Laravel Application.
PHP
392
star
19

laravel-ueditor

UEditor integration for Laravel.
JavaScript
390
star
20

laravel-socialite

:octocat: Social OAuth Authentication for Laravel 5. drivers: facebook, github, google, linkedin, weibo, qq, wechat and douban
PHP
339
star
21

latest-laravel

【不再更新】这些东西本不应该存在。
Shell
282
star
22

weibo-dogs-killer

一段屏蔽 HWB(微博监督员) 的 js 小脚本
275
star
23

wisteria

Beautiful document tool for your project.
Blade
255
star
24

flysystem-qiniu

💾 Flysystem adapter for the Qiniu storage.
PHP
221
star
25

package-builder

📦 A composer package builder.
PHP
199
star
26

weather

🌈 基于高德开放平台接口的 PHP 天气信息组件。
PHP
173
star
27

laravel-subscribe

📧 User Subscribe/Unsubscribe features for Laravel Application.
PHP
170
star
28

yike

PHP
164
star
29

laravel-emoji

😄 This package assist you in getting started with emoji easily.
PHP
151
star
30

vscode-miniapp-helper

微信小程序开发助手 for VSCode
JavaScript
150
star
31

laravel-skeleton

Laravel Application skeleton for me.
PHP
142
star
32

yaf-skeleton

The Yaf testable skeleton and composer supported.
PHP
141
star
33

laravel-uploader

🌴 An upload component for Laravel.
PHP
135
star
34

http

🌵 A simple http client wrapper.
PHP
126
star
35

writor

基于 Laravel 4 开发的博客系统
JavaScript
125
star
36

pinyin-resources

汉字拼音相关参考资料
123
star
37

laravel-vote

⬆️ ⬇️ User vote system for Laravel Application.
PHP
108
star
38

validation

Laravel Validation 简化无依赖版
PHP
100
star
39

bootstrap-theme-slim

纤细风格的bootstrap主题
HTML
92
star
40

city.js

城市选择控件
92
star
41

laravel-payment

Omnipay ServiceProvider for Laravel.
PHP
91
star
42

laravel-passport-cache-token

Make laravel/passport token cacheable.
PHP
89
star
43

laravel-filesystem-cos

Tencent Cloud COS storage for Laravel based on overtrue/flysystem-cos.
PHP
89
star
44

php-opencc

中文简繁转换,支持词汇级别的转换、异体字转换和地区习惯用词转换(中国大陆、台湾、香港、日本新字体)。
PHP
75
star
45

blog

安正超博客
Less
74
star
46

flysystem-cos

💾 Flysystem adapter for the Qcloud COS storage.
PHP
74
star
47

rester

基于 Slim+Eloquent 的 RESTful API 框架
PHP
71
star
48

laravel-mail-aliyun

📧 Aliyun DrirectMail Transport for Laravel Application.
PHP
71
star
49

laravel-youzan

【停止维护】Youzan wrapper for Laravel
PHP
59
star
50

websocket

A PHP implementation of WebSocket.
PHP
56
star
51

laravel-options

Global options module for Laravel application.
PHP
51
star
52

laravel.xyz

Source code of https://laravel.xyz
Vue
50
star
53

json-viewer

A tool for make JSON view in browser.
JavaScript
49
star
54

building-with-tailwindcss

HTML
45
star
55

php-package

A PHP package template repository.
45
star
56

laravel-qcloud-content-audit

腾讯云内容安全(文字图片内容审核)服务
PHP
44
star
57

phpmd-rulesets

PHP_MD 规则
42
star
58

sketch-data-cn

为 Sketch 准备的模拟数据中文版,包含:中文姓名,手机号,省份,城市,地区,公司名,银行名,星期几,详情地址,邮编,邮箱,颜色,广告词等。
41
star
59

qcloud-cos-client

Tencent COS Client
PHP
40
star
60

validator.js

一个类似laravel的js验证模块.
JavaScript
39
star
61

translator

PHP多语言支持工具
PHP
38
star
62

laravel-payable

Payment system for Laravel.
PHP
36
star
63

laravel-package

Laravel package template
PHP
35
star
64

laravel-revaluation

Laravel 5 model revaluation helper.
PHP
31
star
65

laravel-easy-sms

overtrue/easy-sms service provider for Laravel.
PHP
26
star
66

laravel-saml

SAML toolkit for Laravel based on OneLogin's SAML PHP Toolkit.
PHP
21
star
67

sendcloud

SendCloud Mail SDK
PHP
20
star
68

laravel-sendcloud

SendCloud Mail SDK for Laravel.
PHP
20
star
69

latest-lumen

【不再更新】这些东西本不应该存在。
Shell
19
star
70

laravel-stateless-session

A lightweight middleware to make api routing session capable.
PHP
18
star
71

laravel-single-session

A plugin provide single session authentication for Laravel 5.
PHP
17
star
72

php-multi-process-runner

基于PHP拓展PCNTL的多进程执行工具
PHP
17
star
73

laravel-summernote

Summernote editor integration for Laravel 5.
JavaScript
16
star
74

laravel-passport-cache-client

Make laravel/passport client cacheable.
PHP
16
star
75

laravel-qcloud-federation-token

QCloud COS FederationToken generator for Laravel.
PHP
16
star
76

cuttle

📃 A multi-module log wrapper.
PHP
15
star
77

stuq-laravel-course

StuQ小班课|Laravel实战经验分享及PHP后端编程思想
PHP
13
star
78

laravel.so

Source Code of http://laravel.so (old)
PHP
13
star
79

double-array-trie

PHP
12
star
80

overtrue

https://overtrue.me
12
star
81

bash-color

Generate command line colorized text.
PHP
12
star
82

pinyin-dictionary-maker

📇 Dictionary make of overtrue/pinyin.
PHP
12
star
83

relocator.js

relocate images to fit image box
JavaScript
11
star
84

laravel-open-telemetry

This package provides a simple way to add OpenTelemetry to your Laravel application.
PHP
11
star
85

youzan

【不再维护】Youzan SDK.
PHP
10
star
86

wisteria-skeleton

The skeleton of Wisteria.
PHP
10
star
87

wp-cn-excerpt

wordpress中文摘要插件
PHP
10
star
88

laravel-custom-log

📃 Make Laravel Log great again.
PHP
9
star
89

laravel-qcloud-captcha

QCloud Captcha service validator for Laravel.
PHP
7
star
90

vue-avatar-cropper-demo

Created with CodeSandbox
Vue
7
star
91

string2pinyin.sinaapp.com

PHP
3
star
92

nuxt-dashboard

CSS
3
star
93

wp-auto-top

WordPress 返回顶部插件
PHP
2
star
94

redius.xyz

wip
2
star
95

overtrue.github.io

HTML
2
star
96

username-blacklist

PHP
2
star
97

pinyin.rs

2
star
98

easywechat-theme

Vue
2
star
99

dex-swap-test

JavaScript
1
star
100

phplint-test

PHP
1
star