Mastodon share button

This package is a user friendly web component to share in mastodon.

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung
IE11 (limited), Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

View demos 👁

Preview

Getting Started

Installation

Via CDN

<script src="https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button.js"></script>

Via NPM

$ npm install mastodon-share-button 

Usage

<!-- Basic use -->
<mastodon-share-button share_message="Text to share"></mastodon-share-button>

<!-- Customized -->
<mastodon-share-button
    instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]'
    share_message="Text to share"
    share_button_text="Custom share button text"
    close_button_text="Custom close text"
    send_button_text="Custom send text"
    modal_title="Custom modal title"
    other_instance_text="Custom other instance select option text"
    dark_mode="true">
</mastodon-share-button>

Documentation

Properties

Property	Attribute	Required	Description	Type	Default
share_message	share_message	Required	Text to share in mastodon.	string	undefined
instances	instances	Not Required	List of instances to display in the select option.	string	'["https://mastodon.social"]'
dark_mode	dark_mode	Not Required	Option to activate dark mode.	boolean	false
send_button_text	send_button_text	Not Required	Text to show at the bottom of sharing in the modal.	string	"Send"
icon_url	icon_url	Not Required	Icon url. Put it "" to not display any icon.	string	mastodon oficial logo
modal_title	modal_title	Not Required	Title to display in modal.	string	"Share to Mastodon"
close_button_text	close_button_text	Not Required	Text to display to close modal.	string	"Close"
other_instance_text	other_instance_text	Not Required	Text to display on the form.	string	"Other instance"
share_button_text	share_button_text	Not Required	Text to show at the bottom of sharing. Put it "" to not display any text.	string	"Share to Mastodon"
open	open	Not Required	Variable to display the modal opened.	boolean	false

CSS Custom Properties (Styling)

The component could be styled with the help of CSS3 variables.

Example:

<style type="text/css">
  mastodon-share-button {
    --share-button-background-color:#259FFC;
    --share-button-background-color-hover:#C7E7FE;
  }
</style>

• Important: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.

Share button

Name	Description
--share-button-background-color	Share button background color. Default to #cccccc
--share-button-background-color-hover	Share button background hover color. Default to #949292
--share-button-border-radius	Default to 5px
--share-button-padding	Default to 12px
--share-button-color	Default to #ffffff
--share-button-font-size	Default to 16px
--share-button-font-weight	Default to bold
--share-button-border	Defaul to none

Modal

Name	Description
--modal-title-color	Text color to modal title. Default to #2c3e50
--modal-background-color	Modal background color. Default to #ffffff

Modal close button

Name	Description
--close-modal-button-background-color	Close button background color. Default to #cccccc
--close-modal-button-background-color-hover	Share button background hover color. Default to #949292
--close-modal-button-border-radius	Default to 5px
--close-modal-button-padding	Default to 6px
--close-modal-button-color	Default to #ffffff
--close-modal-button-font-size	Default to 16px
--close-modal-button-font-weight	Default to bold
--close-modal-button-border	Defaul to none

Modal select option and input

Name	Description
--select-color	Select and input font color. Default to #2c3e50
--select-background-color	Select and input background color. Default to #ffffff
--select-border	Select and input border. Default to 2px solid #2c3e50
--select-font-weight	Select and input font weight. Default to bolder
--select-font-size	Font size. Default to 18px
--select-padding	Default to 10px
--select-border-radius	Default to 0.25em
--select-line-height	Default to 3

Modal send button

Name	Description
--send-modal-button-color	Default to #ffffff
--send-modal-button-background-color	Default to #2692da
--send-modal-button-border-radius	Default to 5px
--send-modal-button-width	Default to 100%
--send-modal-button-height	Default to 6vh
--send-modal-button-min-height	Default to 42px
--send-modal-button-font-size	Default to 4vh