2020-03-25 11:45:04 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2021-07-29 11:03:57 -04:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "Lightweight, stylish and ethical share buttons for popular social networks" >
< meta name = "keywords" content = "share buttons, sharing, social networks, share via, share on" >
2021-01-16 17:44:33 -05:00
< meta name = "author" content = "Nikita Karamov" >
2021-07-29 11:03:57 -04:00
< title > shareon – < / title >
2020-03-25 11:45:04 -04:00
2021-07-29 11:03:57 -04:00
< meta property = "og:title" content = "shareon" >
< meta property = "og:url" content = "https://shareon.js.org" >
< meta property = "og:image" content = "https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/banner.png" >
< meta property = "og:description" content = "Lightweight, stylish and ethical share buttons for popular social networks" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:creator" content = "@NickKaramoff" >
2020-03-25 21:16:42 -04:00
2021-07-29 11:03:57 -04:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/combine/npm/modern-normalize@1.1.0,npm/simpledotcss@1.0.1,npm/shareon@1.6.2/dist/shareon.min.css" >
< script src = "https://cdn.jsdelivr.net/npm/shareon@1.6.2/dist/shareon.min.js" defer > < / script >
2020-08-03 01:26:20 -04:00
2021-01-16 17:44:33 -05:00
< link rel = "icon" href = "/favicon.ico" >
< link rel = "icon" href = "/icon.svg" type = "image/svg+xml" >
< link rel = "apple-touch-icon" href = "/apple-touch-icon.png" >
2021-07-29 11:03:57 -04:00
< link rel = "manifest" href = "/site.webmanifest" >
2020-03-25 11:45:04 -04:00
< / head >
< body >
2021-07-29 11:03:57 -04:00
< header >
< h1 > shareon 📯 < / h1 >
< p > Lightweight, stylish and ethical share buttons< / p >
< nav >
< a href = "https://www.npmjs.com/package/shareon" target = "_blank" >
npm
< / a >
< a href = "https://github.com/NickKaramoff/shareon" target = "_blank" >
GitHub
< / a >
< / nav >
< / header >
< main >
< section >
< p >
shareon are share buttons for popular social networks.
< / p >
< div class = "shareon"
data-title="shareon — lightweight, stylish and ethical share buttons"
style="text-align: center">
< a class = "facebook" > Share< / a >
< a class = "linkedin" > < / a >
< a class = "mastodon" data-via = "@NickKaramoff@fosstodon.org" > Toot< / a >
< a class = "messenger" data-fb-app-id = "3619024578167617" > < / a >
< a class = "odnoklassniki" > < / a >
< a class = "pinterest" > Pin< / a >
< br >
< a class = "pocket" > < / a >
< a class = "reddit" > < / a >
< a class = "telegram" > < / a >
< a class = "twitter" data-via = "NickKaramoff" > < / a >
< a class = "viber" > < / a >
< a class = "vkontakte" > Отправить< / a >
< a class = "whatsapp" > < / a >
< / div >
< p >
Unlike many other share buttons, shareon are:
< / p >
< ul >
< li > < b > lightweight< / b > , clocking in at around 7 KB gzipped< / li >
< li > < b > stylish< / b > , by having no visual features other than official colours and logos< / li >
< li > < b > ethical< / b > , since they do not insert any pesky tracking code< / li >
< / ul >
< p >
Upon initialization, shareon just populates the buttons with generated URLS. The speed and easy customization make shareon the perfect choice for your blog, news site, or project page!
< / p >
< / section >
< section >
< h2 > Get started< / h2 >
< ol >
< li >
Include the links to shareon's JS and CSS in your website:
< pre > < code > < link href="https://cdn.jsdelivr.net/npm/shareon@2/shareon.css"
2020-03-25 20:43:21 -04:00
rel="stylesheet">
2021-07-29 11:03:57 -04:00
< script type="module"
src="https://cdn.jsdelivr.net/npm/shareon@2"> < /script> < / code > < / pre >
< / li >
< li >
Create a container with class < code > shareon< / code > and populate it with elements, whose classes match the names of the social networks:
< pre > < code > < div class="shareon">
< a class="facebook"> < /a>
< a class="linkedin"> < /a>
< a class="mastodon"> < /a>
< !-- FB App ID is required for the Messenger button to function -->
< a class="messenger" data-fb-app-id="0123456789012345"> < /a>
< a class="odnoklassniki"> < /a>
< a class="pinterest"> < /a>
< a class="pocket"> < /a>
< a class="reddit"> < /a>
< a class="telegram"> < /a>
< a class="twitter"> < /a>
< a class="viber"> < /a>
< a class="vkontakte"> < /a>
< a class="whatsapp"> < /a>
2020-03-25 20:43:21 -04:00
< /div> < / code > < / pre >
2021-07-29 11:03:57 -04:00
< / li >
< li >
Refine your buttons with extra parameters:
< ul >
< li > add < code > data-url< / code > to any button to change the shared URL< / li >
< li > add < code > data-title< / code > to any button to change the shared title< / li >
< li > you < strong > MUST< / strong > add < code > data-fb-app-id< / code > to the FB Messenger button to make sharing even possible< / li >
< li > add < code > data-media< / code > to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture< / li >
< li > add < code > data-text< / code > to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text< / li >
< li > add < code > data-via< / code > to a Twitter or Mastodon button to mention a user< / li >
< / ul >
Use extra parameters on the whole container or on the specific buttons:
< pre > < code > < div class="shareon" data-url="https://example.com">
< a class="whatsapp" data-title="Custom WhatsApp title"> < /a>
< a class="twitter" data-title="Custom Twitter title"> < /a>
2020-03-25 20:43:21 -04:00
< /div> < / code > < / pre >
2021-07-29 11:03:57 -04:00
< / li >
< li >
Go to the < a href = "https://github.com/NickKaramoff/shareon#readme" > GitHub repo< / a > for more detailed documentation!
< / li >
< / ol >
< / section >
< / main >
< footer >
< p >
shareon was created by < a href = "https://karamoff.dev/" target = "_blank" > Nikita Karamov< / a > and is licenced under BSD-3-Clause
< / p >
< / footer >
2020-03-25 11:45:04 -04:00
< / body >
2020-03-25 20:43:21 -04:00
< / html >
