Display Bluesky Posts with Metadata – bluesky-post.js

bluesky-post is a tiny Web Component that transforms Bluesky links into rich post embeds with full metadata support. It can help you display post content, engagement metrics, and user information through customizable templates.

How it works:

The component extracts post data from Bluesky’s public API and presents it in a structured format. You can display post text, reply counts, repost counts, and like counts.

The template system supports both global and per-instance customization through data attributes. This gives you precise control over the presentation while maintaining consistency across their sites.

How to use it:

1. Download the bluesky-post directly from our website or install it via npm:

# NPM
$ npm install @daviddarnes/bluesky-post

2. Import the bluesky-post.js as a module into your document.

<script type="module" src="bluesky-post.js"></script>

3. Display a Bluesky post with metadata using the default template.

<bluesky-post>
  <a href="https://bsky.app/profile/jbf1755.bsky.social/post/3l7qjpnbsz42e">
    Discuss on Bluesky
  </a>
</bluesky-post>

The default template looks like this:

<figure>
  <blockquote data-key="record.text">1/ Hey folks,<br><br>This morning in my undergrad seminar, The Creation of the American Politician, the vibe in the room was BAD—and when I asked, they all admitted that they were freaked out about the election.</blockquote>
  <figcaption>
    <cite>
      <a data-key="url" href="https://bsky.app/profile/jbf1755.bsky.social/post/3l7qjpnbsz42e">@<span data-key="username">jbf1755.bsky.social</span></a>
    </cite>
    <dl>
      <dt>Reposts</dt><dd data-key="repostCount">26</dd>
      <dt>Replies</dt><dd data-key="replyCount">20</dd>
      <dt>Likes</dt><dd data-key="likeCount">361</dd>
    </dl>
  </figcaption>
</figure>

4. You can create custom templates to change how posts are displayed. Define a template element with an ID. Use the data-key attribute to map data points to elements within your template.

<template id="bluesky-post-template">
  <dl>
    <dt>Reposts</dt>
    <dd data-key="repostCount"></dd>
    <dt>Replies</dt>
    <dd data-key="replyCount"></dd>
    <dt>Likes</dt>
    <dd data-key="likeCount"></dd>
  </dl>
</template>

<template id="custom-template">
  <a data-key="record.text, url"></a>
</template>