Oembed, Webmentions, Twitter, Threads & Bluesky

Many months back now, I excitedly wrote up an article about custom twitter embeds. Much more recently, I wrote a follow up where I lamented the fact that I had redesigned the wheel with so much of my site and how leaving Twitter had impacted my reach. What followed was an extreemly busy period in my life with wedding planning, team lead responsibilities and a prolonged bout of madness wherin I decided I would learn nothing and attempt to build a fully hosted blogging solution that others could use as well as myself.

Needless to say, I kiboshed that last one. I realised quite quickly that I neither had the time nor the care to finish the project. Especially as I would likely be it's only user for a not insignificant amount of time and the whole AI thing was quite quickly rendering the whole blogging scene into a mess.

That left me with 2 real options. Move this blog over to something more standard, loosing me the ability to use it as proof of my ability to write scalable systems, or start the painful process of fixing my mistakes.

Long rambling introduction of negativity over, let me introduce step 1 - fixing those blasted embeds.

Oembeds

You may have seen the term Oembed before but you may or may not know what one actually is. Oembed is a standard (defined here) for embedding content from other websites within your own. The official twitter embed that you may have used previously uses the Oembed standard as does youtube, imgur and many other sites that you have included when positing on forums, reddit or medium.

What's nice about Oembed is that, like any other standard, is that it's consistant. This means that if you implement it well, you can support any site that offers an oembed with zero additional work.

Long story short, every oembed contains at very least a json object with a type and the oembed version (never progressed past 1.0 though so this is kind of pointless).

From here, we can use the type to determine how it should be rendered. Photos are required to include a width, height and url value and from there can be rendered as any standard image tag. Links, should be converted to a tags (although I've never actually seen this Oembed Type) and then we get to video & rich.

The types for video & rich both include a html field containing the code needed to render content to your page. This can obviously lead to potential cross site scripting attacks if implemented poorly but the html field is also what allows Oembeds to be so versitile as it can ensure that any site's embed will be given in a format that you can display easily.

While there is an official part of the standard for discovery - allowing you to find out if a site supports oembed by firing a single request. The official standard's site also publishes a registry that includes the data for many of the popular oembed supported websites. This means that we can add support for these sites simply by downloading the list and referencing it. Majorly decreasing how many requests we will need to send.

The point to all of this, I really should have added a full oembed implementation from the get go as it also solves my non standard markdown [tweet tweet-id] formating debacle that would prevent me moving to a prebuilt blogging software in future. So that's exactly what I've done - I'm using standard markdown embed code for everything ![alt text](url-here).

Webmentions

You may have noticed (or not) that the webmentions here on mikevdv.dev haven't been arriving from twitter for some time. A very unfortunate side-effect of the aforementioned twitter API changes breaking the bridgy integration. As a result of my leaving Twitter, I've ended up with both a Bluesky account and a Threads account (as previously written).

For a while, webmentions were entirely unsupported by Threads and had been killed by Twitter which meant that I wasn't getting comments on my site from any source other than github and couldn't get likes at all, not an ideal situation but one I dealt with for the the period.

Thankfully, Bluesky and bridgy seem to get along like a house on fire allowing webmentions to work fully once more. All comments and likes from bluesky will show up as they did back when I was a hardline twitter user. If Threads ever gets supported in bridgy then I'll add that too. If you have a Bluesky account, try liking the post I made about this article and see your profile show up down below.

Bluesky

On the topic of Bluesky, there's another reason to handle Oembeds. Implementing it properly means that I can have Bluesky embeds with absolutely no additional code. Bluesky supports Oembed natively, meaning that if I've done this correctly, you should see my post about this very article just below here!

Conclusions

There's a lot more I need to do to sort my blog out. It's been many things over the years. Much of the code was weird and messy as I've added and tweaked everything about it. With my continued progression into management as well as my various life changes, I'm not as happy to sit there fixing every tiny issue that crops up on this site anymore. I simply want to write posts about the technologies that excite me without hinderance.

As such this will at very least resolve 2 of the issues that have bothered me and I look forward to seeing interactions from social media once more.