Social comments

Web component to show comments from Mastodon, Bluesky and other social networks. Inspired by the work of Thiago Cerqueira who has inspired by Julian Fietkau, who has inspired by Cassidy James, who also was inspired by Jan Wildeboer who was inspired by Yidhra Farm, who was inspired by Joel Chrono who was inspired by Carl Schwan.

Recently I included support for Bluesky. Thanks to Andy for the idea and for let me borrow his code.

• No dependencies
• Very light
• Follows the progressive enhancement strategy:
• Some basic styles are included but they are optional
• Built with modern JavaScript

Usage

Import and register the component with the desired tag name:

import Comments from "social-comments/comments.js";

customElements.define("oom-comments", Comments);

Use it in the HTML code with a link to a post from Mastodon and/or Bluesky. The inner content is replaced by the comments once they are loaded, so you can use it as a fallback.

<oom-comments
  data-mastodon="https://mastodon.gal/@misteroom/110810445656343599"
  data-bluesky="https://bsky.app/profile/lume.land/post/3lc3b4k2n6p2x"
>
  No comments yet
</oom-comments>

Optionally, you can import the provided styles:

@import "./social-comments/styles.css";

Customization

You can customize the HTML code generated by overriding the default renderComment static function:

import Comments from "./mastodon-comments/comments.js";

// Customize the HTML rendering
class CustomComments extends Comments {
  renderComment(comment) {
    // your render here
  }
}

//Register the custom element with your desired name
customElements.define("oom-comments", CustomComments);

Cache

Use the data-cache attribute to cache the API responses. It accepts a number with the time in seconds. The cache is also used offline.

<!-- Cache for 1 minute (60 seconds) -->
<oom-comments
  data-cache="60"
  data-mastodon="https://mastodon.gal/@misteroom/110810445656343599"
>
  No comments yet.
</oom-comments>