https://github.com/paulkinlan/share-button
A web component for sharing URLs
https://github.com/paulkinlan/share-button
share webcomponent
Last synced: about 1 month ago
JSON representation
A web component for sharing URLs
- Host: GitHub
- URL: https://github.com/paulkinlan/share-button
- Owner: PaulKinlan
- License: apache-2.0
- Created: 2017-01-24T12:32:38.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-23T19:17:18.000Z (about 8 years ago)
- Last Synced: 2025-04-12T02:06:00.993Z (about 1 month ago)
- Topics: share, webcomponent
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/PaulKinlan/share-button
- Size: 45.9 KB
- Stars: 24
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Share Button
The Share Button web component provides a simple and customizable interface for
sharing URLs on the web and is specially designed for when you don't have a
visible URL bar in your web app (for example if it is running in full screen)
* Provides access to the URL bar so that you can view and edit it.
* Gives the ability to programitcally copy the url on to the clipboard
* Will use `navigator.share` API if it is available on the users system
* Allows access to the Android Intent sharing system if the user is on Android
* Passes control to the developer for the social networks to share to by giving
the author the ability customizable buttons for you preferred providers
[](https://www.webcomponents.org/element/paulkinlan/share-button)
```html
```
# Customizing the button
As the author of the page there are a number of extensions that you have control
over.
1. Providing your own visible UI to the element
2. Adding your own controls for your preferred social networks or actions
3. Styling the element so that it fits in with your site
## Control the visible UI of the element
You have the ability to control how the button appears to the user. The button
is the first thing that the users sees and it encapsulates all of the
functionality that the share-button offers.
By default, any element that is hosted inside the `` and does not
have an assigned `slot name` will be reprojected to the visible portion of
the element.
Elements that have a slot `name` of `buttons` will be hosted inside the fully
opened UI of the element.
### Use a custom label
```html
Share
```
### Use a custom image
```html
```
### Use a custom label and image
```html
Share
```
### Use a custom image for the copy button
```html
```
### Use a custom image for the android button
Note: this will only work on an Android device.
```html
```
## Add a custom share button
Any element hosted in the custom element that does not have a `slot` attribute
of `buttons` will be used in the display of the share-button
Custom share buttons can be positioned inside the share button by applying
the slot="buttons" attribute to the element.
Note: white space will get projected into the default slot if you have one
element already assigned to a named slot. Remove the white space and the
`:empty` filter will apply correctly.
```html
Twitter
Fb
WhatsApp
G+
```
You are in control of the actions that the user takes on these elements.
## Add a compatible ``
Any element hosted in the custom element that does not have a `slot` attribute
of `buttons` will be used in the display of the share-button.
Custom share buttons can also be dedicated web components that are compatible
with the share-button API. For example, the ``.
Note: white space will get projected into the default slot if you have one
element already assigned to a named slot. Remove the white space and the
`:empty` filter will apply correctly.
```html
```
## Control the URL to be shared
By default the current page's URL is the URL that will be populated in the
share box and will be used in all sharing operations. You can control this
yourself by supplying your own `href` attribute.
```html
Share
```
## Control the text to be shared
By default the current page's meta description or title will be available to
consumers of the element and also to embedded buttons. You can control this by
yourself by supplying your own `text` attribute.
Note: there is no visible output.
```html
Custom text
```
## Disable the default copy button
```html
Copy disabled
```
## Disable the default android share button
```html
Android Share disabled
```
## Disable the default mailto button
```html
mailto disabled
```
## Events
There are a number of events based on a user's interactions with the element.
You can listen for clipboard events, mailto events and native Android sharing
events.
### Listen to copy to clipboard event
```html
Copy URL event
eventUrlCopy.addEventListener('copy-url', e => alert(e));
```
### Listen to mail event
```html
Mail URL event
eventUrlMail.addEventListener('mail-url', e => alert(e));
```
### Listen to native android share event
```html
Android URL event
eventUrlAndroid.addEventListener('share-url', e => alert(e));
```
## Styling the element
There are a number of things that you can style. You can style the button
that is visible to the user and you can also style the overlay that is shown
to the user once they have taken the action to "share"
### Style the button
The `` exposes a number of CSS variables that give you control
over how the button is presented to the user.
Below are the defaults for the variables and you have the ability to override
them as you see fit. By default the button that the user will click attempts
to be an actual ``.
```css
/*
--share-button-background lets you control the background of the button
default: the 'share' icon.
*/
--share-button-background: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_share_black_24px.svg) center/18px no-repeat;
/*
--share-button-border controls border on the button
default: 2px outset buttonface;
*/
--share-button-border: 2px outset buttonface;
/*
--share-button-appearance controls the rendering of the element
default: button;
*/
--share-button-appearance: button;
/*
--share-button-border-radius provides access to border-radius on the button
default: initial
*/
--share-button-border-radius: initial;
/*
--share-button-color lets you control `color` of the button element.
default: initial
*/
--share-button-color: initial;
```
```html
#styletest1 {
--share-button-background: steelblue !important;
--share-button-border-radius:50% 50%;
width: 100px;
height: 100px;
}
Share
```