The mastodon-post Web Component allows you to turn a regular link to a Mastodon post into an embeddable post quote including metadata such as reply count, boost count, favourites and more.
Origin
After reading articles from both Robb Knight and Mario Hamann I was inspired to put my spin on their revised approach to showing vanity metrics from social media on their blog posts.
The recent talk around privacy somewhat went hand in hand with my doubts about Webmentions as a technology, what with it's complexity to implement maintain as well as incompatibility with most of the social networks out there (something something walled garden). At the time of publishing you'll most likely see Webmentions in action at the bottom of this article, but at some point I plan to replace it with this Web Component.
mastodon-post
The <mastodon-post> component is designed to be wrapped around a regular anchor element which is linking to a Mastodon post and progressively enhance it into an embedded post.
The component itself leverages the public Mastodon API to fetch data such as the post content and metadata. It's main feature is that you can customise the template it uses depending on your needs, whether it's just for embedding the post directly on the page or just to expose vanity metrics to accompany your blog post.
Usage
The <mastodon-post> component can be used with the help of a script tag and placing an anchor element in like so:
<script type="module" src="mastodon-post.js"></script>
<mastodon-post>
<a href="https://mastodon.design/@DavidDarnes/109824258017750161">
Discuss on Mastodon
</a>
</mastodon-post>mastodon-post example usage
By default the component will show a quote, a link to the original post mentioning the author's handle, and metrics of the post engagement (replies, boosts and favourites). Here's a live demo of the component.
But you can also apply a custom template to all <mastodon-post> components on the page with the use of a <template> element:
<script type="module" src="mastodon-post.js"></script>
<template id="mastodon-post-template">
<dl>
<dt>Reposts</dt>
<dd data-key="reblogs_count"></dd>
<dt>Replies</dt>
<dd data-key="replies_count"></dd>
<dt>Favourites</dt>
<dd data-key="favourites_count"></dd>
</dl>
</template>
<mastodon-post>
<a href="https://mastodon.design/@DavidDarnes/109824258017750161">
Discuss on Mastodon
</a>
</mastodon-post>mastodon-post with custom template example
In the above example only the reposts, replies and favourites are being shown. Here's a demo of it in action.
Further reading
If you'd like try the Web Component for yourself or learn more about templating you can check out the documentation and further examples on GitHub:
daviddarnes