In a fit of desperate desire to not be awash in social media slush of the twitter muskification as explained via ChatGPT, I am resorting to perhaps the worst blog post title since… (searching them all in vain) ever.

Yes, to be honest yesterday’s foray into coding some means to extend what WordPress could do with automatic embedding of media was a need for one site, but also a prelude to the elephant from the fediverse room.

In the interest of… well curiosity, I have been mulling over the ways to embed mastodon posts (TheThingsFomerllyKnownButInSomePlacesStillAreToots) in WordPress.

The Old Skool HTML Embed Code

What I first demonstrated a few fediclicks ago and what I have used for a few [blog] posts, is copying the embed code you can get directly from a [mastodon] post, just under the ••• menu, for say, this kind reply from Wayne Mackintosh where the embed code is:

rendering

What is interesting is that the embed source url is generated by appending /embed to any mastodon url, or in this case, compare the difference between the post URL https://social.fossdle.org/@mackiwg/109356412565062751/ to the embed one https://social.fossdle.org/@mackiwg/109356412565062751/embed.

What’s Going on WordPress With a Faux Embed?

Something funky is happening in WordPress! I am certain that there is no support for auto embeds of mastodon URLs, but something is happening when you try it– the same url for Wayne’s toot gets rendered with a giant version of his avatar and an even bigger mastodon logo!

This is not the embed you were looking for (but close)

I’m curious if the mastodon urls are getting intercepted by some other oembed code OR if WordPress is in process of supporting embedded toots. It looks like the content is there but is lacking the CSS to display it?

Inspecting the source shows it has the full Mastodon embed code, and the class name suggests it recognizes the instance as a provider.

Source HTML for a sort of embedded toot.

I’m only guessing from what I can see.

The Auto Embedding Toot Challenge

The thing that makes it possible for WordPress to do an auto embed is to identify from the URL where it came from. This is easy for a single source media, it;s a tweet if it has twitter.com in it (well,and matching for a username followed by /status/ and a bunch of numbers.

But from fediland, how can you determine just from a URL that it is a mastodon post? My guess was that it’s a pattern of

https:// then a domain like some.fediverse.domain then /@username then a whole string of numbers like 109356412565062751

This would call for some PhD level regex. Maybe. I gave it my best shot with this example you can find and dabble with at https://regex101.com/r/QmxvbS/1

Test,some,toots here https://regex101.com/r/QmxvbS/1

Now, I have something I can dabble with in my own blog by adding this to my functions.php

Does it work?

Here I try! So put again Wayne’s toot url on a blank line in my block editor.

And ugh, I am seeing the same giant images and icon in my editor preview. Babar, is sad.

But then I view it in a preview (and what you see above) is perfect! Toot in bed…. er, Toot embed!

Success!

So there is something missing to view it in the editor preview, but published, it seems to be working.

Something is still wrong CORS et al wise as the browser console is reporting this error:

Content Security Policy Error

Not Quite Ready for Prime Time

I am just doing my low skill grade experiments here, I would not suggest my approach is viable, I might guess WordPress will eventually do it better (there are issue requests for this going back to 2017).

But I am close!

The Chat Sidetrack

When initially thinking about an approach, I considered building a WordPress custom embed block that would take as input a mastodon URL. I’ve not done anything like it, but got a bit daunted by comprehensive guides starting with Node and React, and often, the examples created were pretty simple (for good reason).

cue trumpet sounds…

AI! AI! AI!

It was the first week of ChatGPT mania and I came across this almost unreal to good to be close to true sounding post from WP Tavern– ChatGPT Creates a Working WordPress Plugin on the First Try. Could this work?

I sent out my orders to ChatGPT:

Create a custom WordPress plugin called “Toot Embedder Block” that creates a editor block offering a field to input the URL of a Mastodon post and publishes it as an iframe embedded media.

in which I issue commands to the AI mystery machine

And it spits out Stuff That Looks Legit.

Often it would just stop in mid line. I later found I could get more by typing in “finish javascript”– but also noted re-issuing the command generated slightly different code. But sometimes it left out javascript. The embed code did not create the correct url to use in the iframe’s src. And it rarely included block.json. And nothing worked. I got no block, and after too much time trying to guess what it was missing, I kicked the bot to the curb.

“Very soon, describing the WordPress plugin you need to ChatGPT will generate a new one faster than searching for an existing one in the plugin directory,” Williams said. “This won’t be true for all types of plugins, of course. But for relatively simple plugins performing established tricks … well *very soon* should probably read ‘right now.’”

https://wptavern.com/chatgpt-creates-a-working-wordpress-plugin-on-the-first-try

Not now, maybe just for me.

Toot This

I just tooted to this URL https://social.fossdle.org/@cogdog/109506785930744037 and I am going to paste it in below. Let’s see what my magic sloppy code will do

Toot, the posted message, published in Mastodon
Maybe frolicked in directly here, embedded with code by Alan

Again I am going to count on a better solution, but figuring this out now is more fun that twitterwailing.

Update: Medium-tizing

In a Mastodon reply Geoff Gevalt reported trying to use one of the links here in Medium (a platform I was last in years before the pandemic). I have to share a screen shot since I think Geoff deleted his post, or maybe it’s the settings on his instance.

A mastodon post from Geoff Gevalt where he describes trying to use one of my example links at medium.com. Also shown is the Maston menu under the 3 dot menu and it has no option to copy the URL.
Geoff’s post seems to lack a means to copy its URL. Nor ant embed code. Weird. Federated weirdness.

The only link I can get is from the time stamp, and it’s a URL referencing passing through MY instance (I doubt these would work to embed):

https://social.fossdle.org/@gg@writing.exchange/109509428533426578

To me, to find a direct link to Geoff’s post, I untangle it to be a link on his instance:

https://writing.exchange/@gg/109509441849554648

But that just provides the Failphant (not found). To me it means either Geoff deleted it, or writing.exchange has some strict security. But I did have to scratch a curiosity itch, and log in to medium.

Even more weird, my reply to Geoff lacks a link that I can use/post, does not offer under the 3 dot menu a means to copy the URL or embed:

A Mastodon ersponse to Geoff with an explanation and a link to a post. The menu under the 3 dot menu lacks a copy URL or embed feature.
My reply to Geoff also lacks any means to get its URL or embed code

The direct link on the time stamp? https://social.fossdle.org/@cogdog/109509574393475677 also yields the Failphant. It does not show up in my profile either.

Now my understanding of Fediverse is turned a bit. Not everything I do is the same.

Anyhow, with all the delay, the post I wrote in medium shows that indeed, one can get an autoembed (using the embed option) just from a Mastodon URL, but only if it is one that offers an option to copy its url from the 3 dot menu. Otherwise, it fails.


Featured Image: The internet cannot be all bad when I can use “elephant bed” to find this image– Elephant towel animal.jpg a Wikimedia Commons image by Littleinfo licensed  Creative Commons CC BY-SA

A bath towel folded into the shape of a sitting elephant with snout up in air, sits atop a hotel bed
https://commons.wikimedia.org/wiki/File:Elephant_towel_animal.jpg
[Media description: A bath towel folded into the shape of a sitting elephant with snout up in air, sits atop a hotel bed]
If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for cogdog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *