You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-23Lines changed: 25 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,23 @@
1
1
# Share API Polyfill
2
2
3
-
This is a (6kb) polyfill for the `Web Share API` that can be used in desktop too, so your users can share in their twitter, facebook, messenger, linkedin, sms, e-mail, print, telegram or whatsapp.
3
+
This is a (6kb) polyfill for the `Web Share API` that can be used on desktop, too, so your users can share in their Twitter, Facebook, Messenger, LinkedIn, SMS, email, print, Telegram or WhatsApp.
4
4
5
-
It also supports multilanguage ([see the list of languages](#multi-language) and you can help us with that :) ).
5
+
It also supports multi-language ([see the list of languages](#multi-language) - and you can help us with that :) ).
6
6
7
-
This is a very simple, single file import polyfill.
7
+
This is a single file import polyfill which relies on the `navigator.share()` method of the [Web Share API](https://www.w3.org/TR/web-share/).
8
8
9
9

10
-
[see the share api polyfill in action](https://on2-dev.github.io/share-api-polyfill/demo/)
10
+
[see the Share API Polyfill in action](https://on2-dev.github.io/share-api-polyfill/demo/)
> Note that we are using the unpkg cdn to load it, you could also save it in your own structure so you can cache it with service workers and have it "close" to your own domain.
20
+
> Note that we are using the unpkg CDN to load it. You could also save it in your own structure so you can cache it with service workers and have it "close" to your own domain.
Now, it will use the native share panel if it is available (only available on mobile devices) and, if not, it will enable an HTML structure in your page showing options for your users.
30
+
Now, it will use the native share panel if it is available (only available on mobile devices), and if not, it will enable an HTML structure on your page showing options for your users.
31
31
32
32
Here, check this demo and see the [share api polyfill in action](https://on2-dev.github.io/share-api-polyfill/demo/).
33
33
34
34
## The Share API
35
35
36
-
The oficial share api works like this:
36
+
The official Share Api works like this:
37
37
38
38
```js
39
39
navigator.share({
@@ -46,7 +46,7 @@ navigator.share({
46
46
```
47
47
48
48
But in this case, you can also pass your `Facebook App Id` to enable sharing with **messenger**.
49
-
Also, you can pass in a list of hashtags to be used when sharing with twitter or facebook. Only one hashtag can be shared with facebook so the first one in the list will be shared.
49
+
Also, you can pass in a list of hashtags to be used when sharing on Twitter or Facebook. Only one hashtag can be shared on Facebook, so the first one on the list will be shared.
50
50
51
51
```js
52
52
navigator.share({
@@ -62,22 +62,24 @@ navigator.share({
62
62
.catch( error=>console.log('Oh noh! You couldn\'t share it! :\'(\n', error));
63
63
```
64
64
65
-
> You can pass the hashtags as a single (commaseparated) string, or as an array.
65
+
> You can pass the hashtags as a single (comma-separated) string or as an array.
66
66
67
-
### Multilanguage
67
+
### Multi-language
68
68
69
-
It will try and use the supported languages based on user's `browser language` configuration.
70
-
If the language is not found, it will uses a fallback (default english).
69
+
It will try and use the supported languages based on the user's `browser language` configuration.
70
+
If the language is not found, it will use a fallback (default English).
71
71
72
72
Currently supported languages:
73
73
74
+
- bn
74
75
- cs
75
76
- de
76
77
- it
77
78
- da
78
79
- en
79
80
- es
80
81
- fr
82
+
- hi
81
83
- hu
82
84
- is
83
85
- ja
@@ -92,11 +94,11 @@ Currently supported languages:
92
94
- tr
93
95
- zh
94
96
95
-
> Feel free to contribute with more languages sending Pull Requests for them :)
97
+
> Feel free to contribute with more languages by sending Pull Requests for them :)
96
98
97
-
### Turning features off, in Desktop
99
+
### Turning features off - on Desktop
98
100
99
-
You can disable some of the social buttons from the tool by passing a second object as argument.
101
+
You can disable some of the social buttons from the tool by passing a second object as the argument.
100
102
As your mobile device will probably have native support for the share API, it will be ignored, being applied only for desktops.
101
103
102
104
Example:
@@ -111,7 +113,7 @@ navigator.share({
111
113
hashtags:'javascript,shareAPI,polyfill'
112
114
},
113
115
{
114
-
// change this configurations to hide specific unnecessary icons
116
+
// change these configurations to hide specific unnecessary icons
115
117
copy:true,
116
118
email:true,
117
119
print:true,
@@ -131,34 +133,34 @@ navigator.share({
131
133
.catch( error=>console.log('Oh noh! You couldn\'t share it! :\'(\n', error));
132
134
```
133
135
134
-
> If you disable Skype, it will no longer load Skype's SDK, what might be something you want, in case you would like to improve the privacy in your project, avoiding loading **thirdparty libraries**.
136
+
> If you disable Skype, it will no longer load Skype's SDK, which might be something you want, in case you would like to improve the privacy in your project, avoiding loading **third-party libraries**.
135
137
136
138
## It's open source
137
139
138
-
Yup, it's open source and you can contribute to it :)
140
+
Yup, it's open source, and you can contribute to it! :)
139
141
140
142
Please refer to our [CONTRIBUTING.md](https://github.com/on2-dev/share-api-polyfill/blob/master/CONTRIBUTING.md) and help us improve this tool.
141
143
142
-
To re-build id, just install the dependencies:
144
+
To build it locally, install the dependencies:
143
145
144
146
```sh
145
147
npm install
146
148
```
147
149
148
-
And build it with gulp
150
+
Build it with gulp:
149
151
150
152
```sh
151
153
npm run build
152
154
```
153
155
154
-
And try it locally
156
+
And try it locally:
155
157
156
158
```sh
157
159
npm run demo
158
160
```
159
161
160
162
Also, if you need to change the icons, they are SVGs located on the share.js script.
161
-
You will find the oridinal vector (.svg) in the src/icons directory in case you want to change it and copy the svg code.
163
+
You will find the original vector (.svg) in the src/icons directory in case you want to change it and copy the SVG code.
0 commit comments