(I'm mostly writing this to talk about playing with embedding Mastodon content, skip to that part if that is interesting to you)
There's a lot of interest in Mastodon at the moment, For Reasons. I've been using Mastodon on-and-off since 2017, although I've only recently started to use it in much more earnest. It is an interesting social network with some similarities to Twitter (at least in terms of the initial impression), but Open Source and crucially, federated via established technologies like ActivityPub and WebFinger.
You can find me over at @email@example.com. I recently moved there from @firstname.lastname@example.org, you can still find my older content on the original profile. I wanted to be on a smaller instance partly to lighten the load on one of the larger and most visible servers / invest in the federation concept and away from a centralised system, also to try out the ability to move between instances, and finally because the instance I'm now, on is a community of folks that I know. I followed this guide to migrate between Mastodon instances.
The 🦣 opportunity for Developers
Although Mastodon is already 6 years old, there has been relatively limited activity around it in terms of the API - this makes it an exciting time to be getting involved and taking a look!
One of the first things I did when I got back into the Mastodon groove recently, was to take a look at some of the API libraries that the community has built. This is slightly complicated by the fact that there's no formal published spec for the Mastodon API (although there are a couple of efforts to build an OpenAPI specification), and that there's a new version of the server software that came out a couple of weeks ago, that has a few significant updates.
I usually reach for Python for my hacks of choice, and so far I've been using Mastodon.py which has been working nicely. I've made a GitHub list of projects that are interesting (to me).
My friend Terence Eden has also been building some fun tools around the API, and has a series of blog posts that are worth checking out.
I'd love to learn more about what the community is doing around the API!
Embedding Mastodon content
One of the big demonstrations of Twitter's value was the way that Tweets have had an enormous reach - whether or not you had a Twitter account, the network is public by default and because it is very easy to embed Twitter content, you are very likely to see Tweets in day-to-day life (on TV, in other websites, or on billboards, for example). There's a publisher portal to grab embedded Tweets and timelines code, and many CMS platforms have the ability to embed Twitter content with simple markup - including DEV!
side note: I worked with the teams that built Twitter's publishing tools and embeds for nearly 8 years, and they were (and are) an incredibly talented and dedicated team of folks 💙 shout-out to that crew!
In the case of Mastodon... things are not quite so straightforward. This is partly due to the nature of the network (federated vs centralised, with portability, so things like user IDs can change if a user moves instances, as I did recently); and, I guess, partly because until recently, it was less popular, and there was less interest in embedding Toots and timelines.
I've spun up a quick demo project on Glitch to try out some of the ways that I've found to embed Mastodon content - you can take a look at the code on Glitch, or you can fork it on GitHub.
andypiper / mastodon-embeds-examples
Examples of different ways to embed Mastodon timelines (and toots) in HTML
Examples of Mastodon embeds
Trying out various means to embed Fediverse content - Mastodon Toots and Timelines (and combinations of other things, API, buttons, etc), images from Pixelfed, more to come.
Toots are straightforward to embed (Mastodon supports oEmbed, and has an embed code option on the web UI), timelines need a bit more work.
- https://github.com/SamTherapy/fedifeed (fork of mastofeed)
Follow me on Mastodon -> @email@example.com
Posts / Toots are reasonably straightforward to embed, because Mastodon supports oEmbed, and you can copy-and-paste the code to embed a Toot in an iFrame in your webpage directly from the default web UI. There's no default support for embedding any kind of timeline, however, so for that, you'll need to use someone else's code, or build something for yourself.
Quick demos (click through to the example hosted on Glitch):
- a single Toot via the default embed option - note that this only supports the default Mastodon color scheme / darkish mode
- a user timeline, via the Mastofeed project - with a couple of customisations
- a user timeline, via the Maplefeed project - this one shows a lighter alternative.
There are some other things to play with or dig into in the example project.
I can see a few opportunities here, just on the website integration side of things:
- greater customisation in terms of theming
- finding a simple (?) way to embed posts in Markdown / Liquid e.g. for DEV
- embeddable user profile widgets
- additional sharing options
If you've been doing anything in this area, let me know, as I'd love to take a look and have a play 🙂
I'm not into web stuff - what else is there?
There is so much more space for developers to contribute, here!
- improving the core code
- building clients and apps
- fun things! visualisations and explorer apps
- integrations for live streamers (think of all the Twitch and related add-ons that allow posting a link to a channel, changing a user handle or header, etc)
- IoT gadgets powered by Toots (more to come on this from me...)
- tools for exploring the API
More about Mastodon
A couple more things of my own, to share...
I gave an impromptu overview / workshop at the Makeroni meetup this weekend, and although it was not recorded, the bullet points and reference notes are available here. I'm considering building this into something more substantial in the future.
My co-host Michael Rowe and I had a deep-dive discussion about the Fediverse on our weekly podcast 🎧 Games at Work dot biz, this week - I'd love to know what you think!
Latest comments (4)
Cool post, thanks!
Ow I didn't know that about integrations! Sooo cool!
i.j / Mastodon timeline feed · GitLab
Displays Mastodon timeline with toots embed in your website. Very easy to setup, no dependencies and fully responsive.
OMG WOAH THIS IS SO AMAZIN-