I just saw Stefan Bohacek made a WordPress plugin for Mastodon embeds. As Dave noted, the <iframe> for a Mastodon embed is very big, the resources aren’t cached across instances. With Stefan’s plugin, it brings the size way down, and I notice it’s not using an <iframe> at all which will help.
A question to ask yourself though is: what do you actually get from a social networks “embed”? It’s not nothing:
- You get the author’s current display name, handle, and avatar.
- You get the text itself.
- You get however “attachments” work, like showing a preview of one of the URLs in the text.
- You get functionality like perhaps a “Follow” button and a link to share it.
- You get metadata like likes, shares, and the date and such.
- Plus you get the “official vibes”. Like I’m putting this social media post here on purpose and look it’s as real as can be.
But there are downsides:
- The pretty-bad performance, as mentioned.
- The user could disappear one day, along with your embed.
- The text could change.
- The user avatar could be updated into a penis.
I’m starting to feel like the upsides are pretty minimal compared to the downsides.
Here’s another way. An HTML <blockquote>:
<blockquote>
<p>What was said.</p>
<cite>Who said it and a link.</cite>
</blockquote>Code language: HTML, XML (xml)I don’t think I’m using <cite> perfectly there, but that’s how WordPress does it and honestly, I think it’s fine. Be as useful in there as you can, like:
I love everything about this (fake joke viral tourism site by a small town tourism board but it’s still good) https://www.miamiofminnesota.com/
Matt Haughey (@mathowie@xoxo.zone) ā Sep 20, 2023
The text on this won’t change or disappear. There are no relevant performance implications. A little bit of HTML is “fast”, let’s say. I’d go as far as saying it’s better because it’s not distracting. I’d prefer you read it not judge it based on how many likes it has and such.
There is always screenshots too, but that’s not my favorite either as it’s a bunch of kilobytes for little gain, you only get one linking opportunity, and you have to get the alt text really right.
Yes. Exactly this. I always loved the way old Twitter (RIP) coded its embeds: they were blockquotes, with a progressive layer of JavaScript that turned them into interactive widgets. They looked and acted like Twitter, but if the Twitter code ever went away, the blockquote remained on the page.
Yeah that was a good approach!
Until they screwed it up: https://chris-coyier.mystagingwebsite.com/2022/06/20/tampering-with-the-public-record/
While that works, it is worth to consider that this approach has some limitations when it comes to posts with images inside (let’s say, the image is a creation from the author, they are showcasing their work on mastodon).
Hosting the image on my server, to embed it “as theirs” in the blockquote doesn’t feel right to me, so I’d consider that edgecase when I would make mastodon posts a part of my website /2c
I can see how images feels weird.
Absolutely I agree.
Sometimes I see great content on platforms like YouTube or Twitter that no one really knows about before, and usually the number of likes does not exceed 1k. I used to prefer content based on the number of likes and views, but I think this culture should be destroyed.
I like the Mastopoet (https://mastopoet.raikas.dev/) tool too.
It can create a nice image, with alt text embedded in EXIF.
Can also be used in an iframe if wanted, for ease of use (see Github repo for details)
All that to say, there are options :)