DEV Community

Cover image for A 🦣 opportunity for developers
Andy Piper
Andy Piper

Posted on • Updated on

A 🦣 opportunity for developers

(I'm mostly writing this to talk about playing with embedding Mastodon content, skip to that part if that is interesting to you)

Mastodon?

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 @andypiper@macaw.social. I recently moved there from @andypiper@mastodon.social, 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.

GitHub logo andypiper / mastodon-embeds-examples

Examples of different ways to embed Mastodon timelines (and posts/toots) in HTML

Examples of Mastodon embeds

mastodon-embeds-examples

Trying out various means to embed Fediverse content - Mastodon posts 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.

More information

I wrote about this on DEV

Useful links

Remix on Glitch

Follow me on Mastodon -> @andypiper@macaw.social




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):

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
  • bots...!

More about Mastodon

A couple more things of my own, to share...

Top comments (3)

Collapse
 
thomasbnt profile image
Thomas Bnt β˜• • Edited

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.

favicon gitlab.com
Collapse
 
wjplatformer profile image
Wj

OMG WOAH THIS IS SO AMAZIN-

Collapse
 
tr11 profile image
Tiago Rangel

Cool post, thanks!