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 |