{"id":14990225,"url":"https://github.com/paulkinlan/share-button","last_synced_at":"2025-04-12T02:06:06.525Z","repository":{"id":57357976,"uuid":"79909831","full_name":"PaulKinlan/share-button","owner":"PaulKinlan","description":"A web component for sharing URLs","archived":false,"fork":false,"pushed_at":"2017-04-23T19:17:18.000Z","size":47,"stargazers_count":24,"open_issues_count":5,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T02:06:00.993Z","etag":null,"topics":["share","webcomponent"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/PaulKinlan/share-button","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PaulKinlan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T12:32:38.000Z","updated_at":"2024-12-30T08:10:15.000Z","dependencies_parsed_at":"2022-09-15T01:11:26.183Z","dependency_job_id":null,"html_url":"https://github.com/PaulKinlan/share-button","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulKinlan%2Fshare-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulKinlan%2Fshare-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulKinlan%2Fshare-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulKinlan%2Fshare-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PaulKinlan","download_url":"https://codeload.github.com/PaulKinlan/share-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["share","webcomponent"],"created_at":"2024-09-24T14:19:44.366Z","updated_at":"2025-04-12T02:06:06.500Z","avatar_url":"https://github.com/PaulKinlan.png","language":"JavaScript","readme":"# Share Button\n\nThe Share Button web component provides a simple and customizable interface for\nsharing URLs on the web and is specially designed for when you don't have a\nvisible URL bar in your web app (for example if it is running in full screen)\n\n* Provides access to the URL bar so that you can view and edit it.\n* Gives the ability to programitcally copy the url on to the clipboard\n* Will use `navigator.share` API if it is available on the users system\n* Allows access to the Android Intent sharing system if the user is on Android\n* Passes control to the developer for the social networks to share to by giving\n  the author the ability customizable buttons for you preferred providers\n\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/paulkinlan/share-button)\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\u003c/share-button\u003e\n```\n\n# Customizing the button\n\nAs the author of the page there are a number of extensions that you have control\nover.\n\n1. Providing your own visible UI to the element\n2. Adding your own controls for your preferred social networks or actions\n3. Styling the element so that it fits in with your site\n\n## Control the visible UI of the element\n\nYou have the ability to control how the button appears to the user. The button\nis the first thing that the users sees and it encapsulates all of the\nfunctionality that the share-button offers.\n\nBy default, any element that is hosted inside the `\u003cshare-button\u003e` and does not\nhave an assigned `slot name` will be reprojected to the visible portion of\nthe element.\n\nElements that have a slot `name` of `buttons` will be hosted inside the fully\nopened UI of the element.\n\n### Use a custom label\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\n  Share\n\u003c/share-button\u003e\n```\n\n### Use a custom image\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\n  \u003cimg\n    src=\"https://pbs.twimg.com/profile_images/2736788281/13811f0063041a72d7ea6ede7b89fedd_400x400.png\"\n    style=\"width: 64px; height: 64px;\"\u003e\n\u003c/share-button\u003e\n```\n\n### Use a custom label and image\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\n  \u003cspan\u003eShare\u003c/span\u003e\n  \u003csvg viewBox=\"0 0 512 512\" class=\"icon\"\u003e\u003cpath d=\"M7 266.8c22.6-5.7 53.3-13.4 107-14.8-1.4-3-2.8-6-4-9.2-21-.2-85.4 2.8-107.5 8.2H2c-.6 0-1.3-.4-1.5-1.2-.2-1 .4-1.8 1.3-2 21.8-5.4 84.8-8.4 107-8.3-5-14.8-7.2-31.7-7.2-50.6 0-33.6 10.5-46.2 24.5-64-10.6-38.3 4-64.4 4-64.4s22.5-4.7 65 25.8c23.2-9.8 84.7-10.7 113.8-2.2 18-11.8 50.6-28.5 63.8-23.8 3.6 5.7 11.3 22.5 4.7 59.3 4.5 8 27.7 25.3 27.8 74-.2 18-2 33-5.6 45.8 55.6-.4 88.2 4 110.8 8.3.8.2 1.4 1 1.3 2-.2.7-1 1.3-1.6 1.3h-.5c-22.4-4-55.2-8.7-111-8.2-1 3.3-2 6.4-3.3 9.3 19 .7 71.2 2.8 113.8 15.8 1 .3 1.4 1.2 1 2 0 .8-.7 1.2-1.4 1.2h-.5c-43-13.2-96.5-15-114.2-15.6-15.4 34-47 46.6-98.3 51.8 16.6 10.5 21.3 23.6 21.3 59 0 35.5-.5 40.2-.3 48.4 0 13.4 19.7 19.8 19 24-.7 4.4-16.4 3.7-23.7 1-20.8-7-18.7-24.4-18.7-24.4l-.6-47.4s1.4-25.5-8-25.5V420c0 16.8 11.8 22 11.8 28 0 10.8-21.6-1-28.2-7.6-10-10-9-31.7-8.7-48.8.2-16.4-.2-52.5-.2-52.5l-6.8.3s3 78.7-3.6 93c-8.3 18.4-33.5 24.8-33.5 16.4 0-5.7 6.3-4 9.8-16.5 3-10.8 2-91 2-91s-8.2 4.8-8.2 19.8l-.2 57.8c0 14.8-20.8 23-31 23-5 0-11.3 0-11.3-2.8 0-6.8 19.2-10.8 19.2-25l-.3-43.8s-9.7 1.7-23.4 1.7c-34.6 0-45.6-22.2-50.8-34.6-6.8-16-15.6-23.7-25-29.7-5.7-3.7-7-8-.4-9.4 30.7-5.7 38.5 34.8 59 41.3 14.6 4.6 33.4 2.6 42.7-3.5 1.4-12.3 10.3-23 17.7-28.6-52-5-83-23-99-52-54.4 1.2-85.3 9-108 14.6L3 271.2h-.4c-.8 0-1.5-.5-1.6-1.2-.3-1 .3-1.8 1.2-2l4.8-1.2z\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\u003c/share-button\u003e\n```\n\n### Use a custom image for the copy button\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\u003cimg\n    src=\"https://pbs.twimg.com/profile_images/2736788281/13811f0063041a72d7ea6ede7b89fedd_400x400.png\"\n    style=\"width: 25px; height: 25px;\" slot='clipboard'\u003e\u003c/share-button\u003e\n```\n\n### Use a custom image for the android button\nNote: this will only work on an Android device.\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\u003cimg\n    src=\"https://pbs.twimg.com/profile_images/2736788281/13811f0063041a72d7ea6ede7b89fedd_400x400.png\"\n    style=\"width: 25px; height: 25px;\" slot='android'\u003e\u003c/share-button\u003e\n```\n\n## Add a custom share button\n\nAny element hosted in the custom element that does not have a `slot` attribute\nof `buttons` will be used in the display of the share-button\n\nCustom share buttons can be positioned inside the share button by applying\nthe slot=\"buttons\" attribute to the element.\n\nNote: white space will get projected into the default slot if you have one\nelement already assigned to a named slot. Remove the white space and the\n`:empty` filter will apply correctly.\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button\u003e\u003cbutton slot=\"buttons\"\u003eTwitter\u003c/button\u003e\n  \u003cbutton slot=\"buttons\"\u003eFb\u003c/button\u003e\n  \u003cbutton slot=\"buttons\"\u003eWhatsApp\u003c/button\u003e\n  \u003cbutton slot=\"buttons\"\u003eG+\u003c/button\u003e\u003c/share-button\u003e\n```\n\nYou are in control of the actions that the user takes on these elements.\n\n## Add a compatible `\u003ctwitter-share-button\u003e`\n\nAny element hosted in the custom element that does not have a `slot` attribute\nof `buttons` will be used in the display of the share-button.\n\nCustom share buttons can also be dedicated web components that are compatible\nwith the share-button API. For example, the `\u003ctwitter-share-button\u003e`.\n\nNote: white space will get projected into the default slot if you have one\nelement already assigned to a named slot. Remove the white space and the\n`:empty` filter will apply correctly.\n\n\u003c!--\n```\n\u003ccustom-element-demo height=200px\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://rawgit.com/PaulKinlan/twitter-share-button/master/twitter-share-button.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cscript src=\"https://rawgit.com/PaulKinlan/twitter-share-button/master/twitter-share-button.js\"\u003e\u003c/script\u003e\n\u003cshare-button\u003e\u003ctwitter-share-button\n    slot=\"buttons\"\n    text=\"Testing attribute\"\n    href=\"https://test.com\"\u003e\n    \u003cimg\n       src=\"https://paul.kinlan.me/images/twitter.png\"\u003e\n  \u003c/twitter-share-button\u003e\u003c/share-button\u003e\n```\n\n\n## Control the URL to be shared\n\nBy default the current page's URL is the URL that will be populated in the\nshare box and will be used in all sharing operations. You can control this\nyourself by supplying your own `href` attribute.\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button href='https://paul.kinlan.me/'\u003e\n  Share\n\u003c/share-button\u003e\n```\n\n## Control the text to be shared\n\nBy default the current page's meta description or title will be available to\nconsumers of the element and also to embedded buttons. You can control this by\nyourself by supplying your own `text` attribute.\n\nNote: there is no visible output.\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button text=\"oi\"\u003e\n  Custom text\n\u003c/share-button\u003e\n```\n\n## Disable the default copy button\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button copy=disabled href=\"https://paul.kinlan.me/\"\u003e\n  Copy disabled\n\u003c/share-button\u003e\n```\n\n## Disable the default android share button\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button android=disabled href=\"https://paul.kinlan.me/\"\u003e\n  Android Share disabled\n\u003c/share-button\u003e\n```\n\n## Disable the default mailto button\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button mailto=disabled href=\"https://paul.kinlan.me/\"\u003e\n  mailto disabled\n\u003c/share-button\u003e\n```\n\n## Events\n\nThere are a number of events based on a user's interactions with the element.\n\nYou can listen for clipboard events, mailto events and native Android sharing\nevents.\n\n### Listen to copy to clipboard event\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button id=\"eventUrlCopy\"\u003e\n  Copy URL event\n\u003c/share-button\u003e\n\u003cscript\u003e\neventUrlCopy.addEventListener('copy-url', e =\u003e alert(e));\n\u003c/script\u003e\n```\n\n### Listen to mail event\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button id=\"eventUrlMail\"\u003e\n  Mail URL event\n\u003c/share-button\u003e\n\u003cscript\u003e\neventUrlMail.addEventListener('mail-url', e =\u003e alert(e));\n\u003c/script\u003e\n```\n\n### Listen to native android share event\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cshare-button id=\"eventUrlAndroid\"\u003e\n  Android URL event\n\u003c/share-button\u003e\n\u003cscript\u003e\neventUrlAndroid.addEventListener('share-url', e =\u003e alert(e));\n\u003c/script\u003e\n```\n\n## Styling the element\n\nThere are a number of things that you can style. You can style the button\nthat is visible to the user and you can also style the overlay that is shown\nto the user once they have taken the action to \"share\"\n\n### Style the button\n\nThe `\u003cshare-button\u003e` exposes a number of CSS variables that give you control\nover how the button is presented to the user.\n\nBelow are the defaults for the variables and you have the ability to override\nthem as you see fit. By default the button that the user will click attempts\nto be an actual `\u003cbutton\u003e`.\n\n```css\n/*\n  --share-button-background lets you control the background of the button\n  default: the 'share' icon.\n*/\n--share-button-background: url(https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_share_black_24px.svg) center/18px no-repeat;\n\n/*\n  --share-button-border controls border on the button\n  default: 2px outset buttonface;\n*/\n--share-button-border: 2px outset buttonface;\n\n/*\n  --share-button-appearance controls the rendering of the element\n  default: button;\n*/\n--share-button-appearance: button;\n\n/*\n  --share-button-border-radius provides access to border-radius on the button\n  default: initial\n*/\n--share-button-border-radius: initial;\n\n/*\n  --share-button-color lets you control `color` of the button element.\n  default: initial\n*/\n--share-button-color: initial;\n```\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"share-button.js\"\u003e\u003c/script\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cstyle\u003e\n#styletest1 {\n  --share-button-background: steelblue !important;\n  --share-button-border-radius:50% 50%;\n  width: 100px;\n  height: 100px;\n}\n\u003c/style\u003e\n\u003cshare-button id=\"styletest1\"\u003e\n  Share\n\u003c/share-button\u003e\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulkinlan%2Fshare-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulkinlan%2Fshare-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulkinlan%2Fshare-button/lists"}