{"id":13676631,"url":"https://github.com/kytta/shareon","last_synced_at":"2025-06-22T16:10:40.433Z","repository":{"id":44163447,"uuid":"250014658","full_name":"kytta/shareon","owner":"kytta","description":"📯 Lightweight, stylish, and ethical share buttons for popular social networks","archived":false,"fork":false,"pushed_at":"2025-01-28T17:16:07.000Z","size":1620,"stargazers_count":465,"open_issues_count":14,"forks_count":25,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-29T07:39:21.665Z","etag":null,"topics":["javascript","share-buttons","sharing"],"latest_commit_sha":null,"homepage":"https://shareon.js.org/","language":"JavaScript","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/kytta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"kytta","liberapay":"kytta","custom":"paypal.me/NickKaramoff"}},"created_at":"2020-03-25T15:21:04.000Z","updated_at":"2025-04-21T06:57:33.000Z","dependencies_parsed_at":"2023-11-22T08:17:01.550Z","dependency_job_id":"aae0f814-5af6-4fd3-83b8-043ee846bd72","html_url":"https://github.com/kytta/shareon","commit_stats":{"total_commits":364,"total_committers":13,"mean_commits":28.0,"dds":0.5302197802197802,"last_synced_commit":"7037b6bb6cfb299274e1bd461007c376e5ca1539"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/kytta/shareon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kytta%2Fshareon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kytta%2Fshareon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kytta%2Fshareon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kytta%2Fshareon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kytta","download_url":"https://codeload.github.com/kytta/shareon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kytta%2Fshareon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261320613,"owners_count":23140943,"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":["javascript","share-buttons","sharing"],"created_at":"2024-08-02T13:00:30.669Z","updated_at":"2025-06-22T16:10:35.421Z","avatar_url":"https://github.com/kytta.png","language":"JavaScript","readme":"# Shareon\n\n\u003cimg src=\"./assets/logo.svg\" align=\"right\" alt=\"Shareon logo — the Postal Horn emoji\" width=\"96\" height=\"96\"\u003e\n\n\u003e Lightweight, stylish, and ethical share buttons\n\n- **Small.** Dependency-free. CSS+JS bundle is under 7.7 KiB minified and brotlied.\n- **Stylish.** Uses official vector logos and colours with no visual mess.\n- **Ethical.** Embeds no tracking code. JS is required only for the setup.\n\n\u003ca href=\"https://shareon.js.org/\"\u003e\u003cimg src=\"./assets/demo@2x.png\" height=\"126\" width=\"438\" alt=\"Demo screenshot of all buttons Shareon supports\"\u003e\u003c/a\u003e\n\nSee the live demo at [shareon.js.org](https://shareon.js.org)\n\n## Install\n\nSimply load the needed files from the CDN:\n\n```html\n\u003clink\n  href=\"https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.min.css\"\n  rel=\"stylesheet\"\n/\u003e\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js\"\n  defer\n  init\n\u003e\u003c/script\u003e\n```\n\n- `defer` makes sure Shareon is loaded after HTML is parsed\n- `init` will automatically initialize Shareon buttons\n\n### Do not auto-initialize\n\nRemove the `init` attribute and initialize Shareon when you need it:\n\n```html\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.iife.js\"\n  defer\n\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  // do something\n  Shareon.init();\n\u003c/script\u003e\n```\n\n### Use ESM build\n\nThere is also a ESM build for the browsers, which doesn't support\nauto-initialization:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { init } from \"https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js\";\n  // do something\n  init();\n\u003c/script\u003e\n```\n\n### Bundle with Node\n\nYou can also install Shareon using your favourite package manager and include it\nin your source files:\n\n```sh\npnpm add shareon  # or `npm install`, or `yarn add`\n```\n\n```js\nimport { init } from \"shareon\";\nimport \"shareon/css\"; // most bundlers will transpile this CSS\n\ninit();\n```\n\nCommonJS imports are also supported:\n\n```js\nconst Shareon = require(\"shareon\");\nrequire(\"shareon/css\"); // most bundlers will transpile this CSS\n\nShareon.init();\n```\n\n## Usage\n\nCreate a container with class `shareon` and populate it with elements, class\nnames of which match the names of the social networks (or `copy-url`, for the\n'Copy URL' button, or `print` for the 'Print' button):\n\n```html\n\u003cdiv class=\"shareon\"\u003e\n  \u003ca class=\"bluesky\"\u003e\u003c/a\u003e\n  \u003ca class=\"facebook\"\u003e\u003c/a\u003e\n  \u003ca class=\"fediverse\"\u003e\u003c/a\u003e\n  \u003ca class=\"hackernews\"\u003e\u003c/a\u003e\n  \u003ca class=\"linkedin\"\u003e\u003c/a\u003e\n  \u003ca class=\"lobsters\"\u003e\u003c/a\u003e\n  \u003ca class=\"mastodon\"\u003e\u003c/a\u003e\n  \u003c!-- FB App ID is required for the Messenger button to function --\u003e\n  \u003ca class=\"messenger\" data-fb-app-id=\"0123456789012345\"\u003e\u003c/a\u003e\n  \u003ca class=\"odnoklassniki\"\u003e\u003c/a\u003e\n  \u003ca class=\"pinterest\"\u003e\u003c/a\u003e\n  \u003ca class=\"pocket\"\u003e\u003c/a\u003e\n  \u003ca class=\"reddit\"\u003e\u003c/a\u003e\n  \u003ca class=\"teams\"\u003e\u003c/a\u003e\n  \u003ca class=\"telegram\"\u003e\u003c/a\u003e\n  \u003ca class=\"tumblr\"\u003e\u003c/a\u003e\n  \u003ca class=\"twitter\"\u003e\u003c/a\u003e\n  \u003ca class=\"viber\"\u003e\u003c/a\u003e\n  \u003ca class=\"vkontakte\"\u003e\u003c/a\u003e\n  \u003ca class=\"whatsapp\"\u003e\u003c/a\u003e\n  \u003ca class=\"copy-url\"\u003e\u003c/a\u003e\n  \u003ca class=\"email\"\u003e\u003c/a\u003e\n  \u003ca class=\"print\"\u003e\u003c/a\u003e\n  \u003ca class=\"web-share\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n```\n\nShareon will populate these `\u003ca\u003e` elements with correct `href` attributes.\n\n### Use with `\u003cbutton\u003e`s\n\nYou can use `\u003cbutton\u003e` (or any other element) instead of `\u003ca\u003e`s. In this case,\nShareon will create an `onclick`-listener for each button. **I do not recommend\ndoing this**, as this is not so good for semantics.\n\n### Share metadata\n\nBy default, the URL and the title of the active page will be shared. You can\ncustomize it with `data-` attributes. These can be applied on a specific button\nor on the whole `.shareon` container:\n\n```html\n\u003cdiv class=\"shareon\" data-url=\"https://custom.url/for-this-page\"\u003e\n  \u003ca class=\"facebook\" data-title=\"Custom Facebook title\"\u003e\u003c/a\u003e\n  \u003ca class=\"twitter\" data-title=\"Custom Twitter title\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n```\n\nApart from the URL and title, some networks support extra parameters:\n\n- you **MUST** add `data-fb-app-id` to the FB Messenger button to make sharing\n  even possible\n- add `data-s2f-instance` to the Fediverse button to set your Share₂Fedi\n  instance\n- add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize\n  the pinned picture\n- add `data-text` to a Bluesky, Mastodon, Telegram, Tumblr, Viber, or WhatsApp button to add\n  custom message text\n- add `data-via` to a Mastodon, Tumblr, or Twitter button to mention a user\n- add `data-hashtags` to a Facebook, Tumblr, or Twitter button to include hashtags in the shared post.\n  - should be a comma-separated string, for example `stuff,tech,buttons`\n  - Twitter \u0026 Tumblr support multiple hashtags\n  - Facebook only supports a single hashtag; only the first one will be used\n\nHere are all custom parameters:\n\n```html\n\u003cdiv class=\"shareon\" data-url=\"https://custom.url/for-this-page\"\u003e\n  \u003ca class=\"facebook\" data-title=\"Custom Facebook title\" data-hashtags=\"awesome\"\u003e\u003c/a\u003e\n  \u003ca class=\"fediverse\" data-s2f-instance=\"s2f.mydomain.example\"\u003e\u003c/a\u003e\n  \u003ca class=\"messenger\" data-fb-app-id=\"0123456789012345\"\u003e\u003c/a\u003e\n  \u003ca class=\"pinterest\" data-media=\"https://custom.picture/for-pinterest\"\u003ePin\u003c/a\u003e\n  \u003ca class=\"telegram\" data-text=\"Check this out!\"\u003e\u003c/a\u003e\n  \u003ca class=\"tumblr\" data-hashtags=\"nice,buttons\" data-text=\"These are some nice buttons\" data-via=\"myblog\"\u003e\u003c/a\u003e\n  \u003ca class=\"twitter\" data-via=\"MyNickname\" data-hashtags=\"shareon,awesome,brilliant\"\u003e\u003c/a\u003e\n  \u003ca class=\"mastodon\" data-via=\"@MyNickname@myserver.social\"\u003e\u003c/a\u003e\n  \u003ca class=\"whatsapp\" data-url=\"https://custom.url/for-whatsapp\"\u003eSend\u003c/a\u003e\n\u003c/div\u003e\n```\n\n## Other versions\n\n- [**WordPress plugin**](https://wordpress.org/plugins/shareon/) by [Gareth](https://github.com/gareth-gillman)\n\n## Licence\n\nCopyright © 2020–2022 [Nikita Karamov](https://www.kytta.dev/)  \nLicenced under the [MIT License](https://spdx.org/licenses/MIT.html).\n\nShareon was heavily inspired by [Likely](https://ilyabirman.net/likely/),\nand has a somewhat backwards-compatible API (excluding themes and sizes).\nLikely is licenced under the MIT License.\n\nShareon's logo is the\n[Postal Horn emoji](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/svg/emoji_u1f4ef.svg)\nfrom [Noto Emoji](https://github.com/googlefonts/noto-emoji).\nNoto Emoji is licenced under the\n[Apache License v2.0](https://github.com/googlefonts/noto-emoji/blob/43f47be9404018cd9d8f73a227363a8f20acdab5/LICENSE).\n\nShare icons are being sourced from [Simple Icons](https://github.com/simple-icons/simple-icons/).\nSimple Icons is released under [CC0](https://spdx.org/licenses/CC0-1.0.html),\nbut the icons themselves may be subject to copyright of the respective owners.\n\n---\n\nThis project is hosted on GitHub: \u003chttps://github.com/kytta/shareon\u003e\n","funding_links":["https://github.com/sponsors/kytta","https://liberapay.com/kytta","paypal.me/NickKaramoff"],"categories":["JavaScript","CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkytta%2Fshareon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkytta%2Fshareon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkytta%2Fshareon/lists"}