☰

SyncX

0 KB Social Media Embeds Chris Coyier

November 1, 2023

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.

    🤘

    ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdhZnxxfY5pZKSaXai8pLXApWSmnZSerm6xzJucnatf

    Aldo Pusey

    Update: 2024-02-19

    << 28 Funny New Year's Resolutions 2023

    Why more and more women are changing their engagement rings >>