{"id":13401153,"url":"https://github.com/peterpeterparker/web-social-share","last_synced_at":"2025-06-27T21:34:06.473Z","repository":{"id":45288704,"uuid":"129246547","full_name":"peterpeterparker/web-social-share","owner":"peterpeterparker","description":"A Web Component to share url and text on social networks","archived":false,"fork":false,"pushed_at":"2024-03-29T07:59:53.000Z","size":1156,"stargazers_count":80,"open_issues_count":0,"forks_count":19,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-26T12:13:57.326Z","etag":null,"topics":["copy-paste","email","facebook","hacker-news","linkedin","openchat","pinterest","progressive-web-app","progressive-web-apps","pwa","reddit","share","social","social-network","social-share","stencil","stenciljs","telegram","twitter","webcomponent"],"latest_commit_sha":null,"homepage":"http://websocialshare.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterpeterparker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-12T12:19:29.000Z","updated_at":"2025-03-20T19:05:52.000Z","dependencies_parsed_at":"2024-06-18T16:47:41.239Z","dependency_job_id":"c088408a-0c17-4829-8a6b-76cb98036acc","html_url":"https://github.com/peterpeterparker/web-social-share","commit_stats":{"total_commits":256,"total_committers":17,"mean_commits":"15.058823529411764","dds":0.22265625,"last_synced_commit":"69883cfeaf47862a232cd3a380974af2b2a32437"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/peterpeterparker/web-social-share","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-social-share","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-social-share/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-social-share/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-social-share/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterpeterparker","download_url":"https://codeload.github.com/peterpeterparker/web-social-share/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterpeterparker%2Fweb-social-share/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261153931,"owners_count":23116936,"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":["copy-paste","email","facebook","hacker-news","linkedin","openchat","pinterest","progressive-web-app","progressive-web-apps","pwa","reddit","share","social","social-network","social-share","stencil","stenciljs","telegram","twitter","webcomponent"],"created_at":"2024-07-30T19:00:59.279Z","updated_at":"2025-06-27T21:34:06.324Z","avatar_url":"https://github.com/peterpeterparker.png","language":"HTML","funding_links":[],"categories":["HTML","Components built with Stencil","Ecosystem Highlights"],"sub_categories":["Community","Utilities \u0026 Integrations"],"readme":"# Web Social Share\n\nWeb Social Share is a Web Component to share urls and text.\n\n[![version](https://img.shields.io/npm/v/web-social-share/latest.svg?color=blue)](https://github.com/peterpeterparker/web-social-share)\n[![npm](https://img.shields.io/npm/dm/web-social-share.svg)]()\n\n## Table of contents\n\n- [Goals](#goals)\n- [Features](#features)\n- [Installation](#installation)\n- [Integration](#integration)\n- [Getting Started](#getting-started)\n  - [show](#show)\n  - [share](#share)\n    - [Example](#example)\n    - [Vanilla JS](#vanilla-js)\n- [Slots](#slots)\n  - [Styling your icons](#styling-your-icons)\n- [Theming](#theming)\n- [Events](#events)\n- [Fallback and detection](#fallback-and-detection)\n- [Web Share API](#web-share-api)\n- [Showcase](#showcase)\n- [Theming](#theming)\n- [Credits](#credits)\n- [License](#license)\n\n## Goals\n\nThe idea behind this web component was to add a \"social share\" feature to Progressive Web Apps (pwa).\n\nNowadays, the [Web Share API](https://developer.mozilla.org/fr/docs/Web/API/Navigator/share) is supported by most recent mobile OS.\n\nEven though, it may remain interesting to use such a component for the desktop version of web apps.\n\n## Features\n\nThe component present a dialog which contains the sharing options you selected.\n\nFollowing providers or targets are currently supported:\n\n- [Twitter](https://twitter.com/)\n- [Telegram](https://telegram.org/)\n- [OpenChat](https://oc.app/)\n- Email\n- [Linkedin](https://linkedin.com)\n- [Pinterest](https://www.pinterest.com)\n- [DSCVR](https://dscvr.one/)\n- [Reddit](https://reddit.com)\n- [Hacker News](https://news.ycombinator.com/)\n- [Facebook](https://facebook.com)\n- [WhatsApp](https://www.whatsapp.com/)\n- Copy (to clipboard)\n\n## Installation\n\n```\n$ npm install web-social-share\n```\n\n## Integration\n\nThis Web Component is developed with [Stencil](https://stenciljs.com).\n\nThe [Stencil documentation](https://stenciljs.com/docs/overview) provide examples of Javascript and framework integration for [Angular](https://stenciljs.com/docs/angular), [React](https://stenciljs.com/docs/react), [Vue](https://stenciljs.com/docs/vue) and [Ember](https://stenciljs.com/docs/ember).\n\n### NodeJS\n\nYou can either import the class directly or the `defineCustomElement` helper to register the web component to the `CustomElementRegistry`:\n\n```js\nimport { WebSocialShare, defineCustomElement } 'web-social-share';\n```\n\nWith that you can extend the component, e.g.:\n\n```ts\nclass WebSocialExtended extends WebSocialShare {\n  render () {\n    // custom render behavior\n  }\n}\n```\n\nor just register it to the `CustomElementRegistry` and use it in your application, e.g.:\n\n```ts\ndefineCustomElement()\n```\n\n## Getting Started\n\nThe Web Social Share Component can be use like following:\n\n```\n\u003cweb-social-share show={true} share={options}\u003e\u003c/web-social-share\u003e\n```\n\nBoth `show` and `share` are mandatory.\n\n### show\n\nTrigger the display, or close, of the action sheet which contains the social-share options.\n\n`show` is a **boolean** parameter\n\n### share\n\nFor details about them you could have a look to the interface `WebSocialShareInput` located under folder `src/types/web-social-share/`.\n\n`share` is a property of type **WebSocialShareInput**.\n\nNote: `share` is an object. Therefore, it has to be parsed with JavaScript if you use the component in a vanilla Javascript application.\n\n#### Example\n\nFor example, if you would like to allow your users to share a website through Facebook and Twitter, you could define basic options like following:\n\n```\nconst share = {\n    config: [{\n          facebook: {\n            socialShareUrl: 'https://peterpeterparker.io'\n          }\n        },{\n          twitter: {\n            socialShareUrl: 'https://peterpeterparker.io'\n          }\n    }]\n};\n```\n\nIf you would like to display the action default name, you could extend your configuration using the attribute `displayNames` like the following:\n\n```\nconst share = {\n    displayNames: true,\n    config: [{\n          facebook: {\n            socialShareUrl: 'https://peterpeterparker.io'\n          }\n        },{\n          twitter: {\n            socialShareUrl: 'https://peterpeterparker.io'\n          }\n    }]\n};\n```\n\nWorth to notice, you could also provide your own custom brand name, for example in case you would translate the word `Email`, for example:\n\n```\nconst share = {\n    displayNames: true,\n    config: [{\n          email: {\n            brandName: 'E-Mail-Adresse',\n            socialShareTo: 'me@outlook.com',\n            socialShareBody: 'https://peterpeterparker.io'\n          }\n    }]\n};\n```\n\n### Slots\n\nSlots have to be used to display the icon or text for your actions.\n\nThe available slots are: `facebook`, `twitter`, `pinterest`, `linkedin`, `reddit`, `email`, `copy`, `hackernews`, `whatsapp` and `telegram`.\n\nThese are sorted according the order of your configuration.\n\nNOTE: Slot names MUST be lower case.\n\n```\n\u003cweb-social-share show=\"false\"\u003e\n    \u003ci class=\"fab fa-reddit\" slot=\"reddit\" style=\"color: #cee3f8;\"\u003e\u003c/ion-icon\u003e\n\u003c/web-social-share\u003e\n\nconst share = [{\n    reddit: {\n      socialShareUrl: 'https://peterpeterparker.io'\n    }\n  }\n}];\n```\n\n\u003e Note that you may have to add the `style=\"display: block\"` on the slotted elements, notably if you would use `\u003cion-icon/\u003e`, for them to be shown.\n\n#### Styling your icons\n\nThe style of your icons is up to you and have to be applied on the icons provided as `slots`.\n\nFor example:\n\n```\n\u003cweb-social-share show=\"false\"\u003e\n    \u003ci class=\"fab fa-twitter\" slot=\"twitter\" style=\"color: #00aced; width: 1.4rem;\"\u003e\u003c/i\u003e\n\u003c/web-social-share\u003e\n```\n\n## Theming\n\nCheckout the auto-generated [readme.md](https://github.com/peterpeterparker/web-social-share/blob/main/src/components/web-social-share/readme.md) for the list of customizable CSS variables.\n\n## Events\n\nThe component trigger an event `closed` when the modal is close. It is emitted regardless if the user shared or not aka \"just\" closed it.\n\n```\n@Event() closed\u003cvoid\u003e();\n```\n\nTypically, this use case can be used to post process the data you pass to the component. For example, I use a store to handle these and listen to the event to clean it afterwards.\n\n## Fallback and detection\n\nThis component is a dumb component. It does not proceed detection or fallback to anything in case one of the share options would not be supported by the device or browser where the component is used.\n\nFor example, the share options \"Copy (to clipboard)\" use the Web Api [Clipboard.writeText()](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) which might not be supported. Anyway the action will be displayed and if used by the user, nothing will happen.\n\n## Web Share API\n\nWhen I develop web apps I generally develop a mixed solution between Web Share API and this component. If the Web Share API is supported, and maybe sometimes in combination to detecting desktop or mobile, I use the browser API. If not supported, I fallback on this component.\n\nIf interested to implement such a solution, check out the [blog post](https://dev.to/daviddalbusco/how-to-implement-the-web-share-api-with-a-fallback-b3) I published about it\n\n## Showcase\n\nA showcase is available at [https://websocialshare.com](https://websocialshare.com)\n\nThe above showcase is the `www` folder of this project deployed in Firebase. If you clone the repository you could run it locally using `npm run start`.\n\n## Credits\n\nI didn't want to reinvent the wheel when it comes to the sharing actions themselves. Therefore, I forked the features of [angular-socialshare](https://github.com/720kb/angular-socialshare). Kudos to [45kb](https://github.com/45kb) :+1:\n\n## License\n\nMIT © [David Dal Busco](mailto:david.dalbusco@outlook.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpeterparker%2Fweb-social-share","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterpeterparker%2Fweb-social-share","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterpeterparker%2Fweb-social-share/lists"}