mastodon-comments is a webcomponent that will embed a Mastodon's toot conversation in a website.
This webcomponent is explained in detail in the following blog post, where you can see a live example as well.
- Implemented as a standard web component, easy to integrate
- Lazy-loads the toot conversation, only when the component is part of the viewport
These are the default values that the component exposes as CSS vars (no need to specify them if you are happy with the current values):
mastodon-comments {
--font-color: #5d686f;
--font-size: 1.0rem;
--block-border-width: 1px;
--block-border-radius: 3px;
--block-border-color: #ededf0;
--block-background-color: #f7f8f8;
--comment-indent: 40px;
}Include the following lines in the head of your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js" integrity="sha512-uHOKtSfJWScGmyyFr2O2+efpDx2nhwHU2v7MVeptzZoiC7bdF6Ny/CmZhN2AwIK1oCFiVQQ5DA/L9FSzyPNu6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">then just use mastodon-comments tag to point to the appropiate mastodon toot as shown below:
<mastodon-comments host="fosstodon.org" user="dpecos" tootId="109574160582937075" style="width : 1024px"></mastodon-comments>Note
If you wish to filter the toots displayed as comment to your page, you can
use the HTML attribute filter="favorites" in the mastodon-comments tag.
Like so:
<mastodon-comments host="fosstodon.org" user="dpecos" tootId="109574160582937075" filter="favorites" style="width : 1024px"></mastodon-comments>Note
Languages EN, DE and FR are now supported out of the box. The used language is determined by the following order:
- search for the HTML attribute, e.g.
lang="fr"in themastodon-commentstag (for French), - search for the site-wide declaration
<html lang="fr">, - use the browser/OS preference language,
- use hardcoded fallback as set in
const DEFAULT_LANG = "en";if none of the above determined languages fit.
You can also extend additional languages in const i18n{ like this (example for Italian):
const i18n = {
it: {
commentsTitle: "Commenti",
[... and so on ...]
},You can see a full example here: Example embedding a toot into a HTML
