Toot in/em bed

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!

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.

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

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

add_action( 'init', 'cdb_register_embeds' );

function cdb_register_embeds() {
	// handler for mastodons		
	wp_embed_register_handler(
		'mastodon',
		'#^https?:\/\/((?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9])\/@([a-zA-Z0-9\_]+)\/(\d+)$#i',
		'cdb_handler_mastodon'
	);
}

function cdb_handler_mastodon( $matches, $attr, $url, $rawattr ) {
	// handler for mastodon embeds
	$embed = '<iframe src="https://' . esc_attr($matches[1]) . '/@' . esc_attr($matches[2]) . '/' . esc_attr($matches[3]) . '/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="800" allowfullscreen="allowfullscreen"></iframe><script src="https://' . esc_attr($matches[1]) . '/embed.js" async="async"></script>';

	return $embed;
}

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:

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.

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:

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