There’s some textbook theory of design as a thing where some entity identifies a need, some objectives, stuff is scoped, and handed in a neat handy packet to a developer.

I had that happen.

Sort of.

Once.

That’s not even a fun process; the ideas I like most and work from are unanticipated, and often come from seeing someone else’s practice or when they bring a situation your way. And the solutions are hardly linear.

Here’s a small one. But one I just could not let go.

Although she wrote “pallets” I was pretty sure she meant padlets – those nifty collaboration sites where educators can create bulletin board like walls.

WordPress sites offer a number of support for sites to automatically embed full media when you just paste a URL for content into the editor. Many people know this works for YouTube, but there are a lot more (and for a while I knew they supported Giphy but it was not documented until recently).

This is even more critical for WordPress sites hosted inside a multisite configuration. The troubling truth is that even if you are an administrator level user on your own site there, unless you are a network admin, WordPress strips out embed codes that contain iframe tags and script links (it’s all about S-E-C-U-R-I-T-Y though not explained).

So having auto embeds is a nice way around this. If a site is supported.

I’ve been working through ways of extending the support for things WordPress does not (e.g. Internet Archive Audio, video) for the SPLOTbox theme. It takes pattern matching mojo to convert a link to an embed code, but it’s possible. Looking at a really trivial padlet of my own, at a url of https://padlet.com/cogdogblog/aos9fosbbwk4 I see from the share link that the embed code is:

From the padlet share page, a long chunk of HTML that says it can be used in self hosted WordPress; the bit "aos9fosbbwk4" is highlighted

It means the code task is to extract this part of the original URL aos9fosbbwk4 that is obviously a database ID, and use in the middle of all that gunk.

But than a little bit down the page I see this curious bit of information:

"N.B. The following method only works on wordpress.com sites. For self-hosted wordpress.org sites, please use the code above.
Just paste the padlet URL in the post and the padlet will be embedded automatically."

Now this strikes me weirdly. WordPress.com, running the same core WordPress software, supports something on the Dot Com side that is left out of the self hosted. Why? Is this the upsell game?

I tried it there and yes, it works.

If you search the support site for embed padlet you get nada. If you search the forums, you see people have been asking for this since 2013.

So I started rolling up my own code, using the wp_embed_register_handler() function to create a custom embed support.

It worked in the front end editor of the SPLOT and the classic editor inside WordPress, but it just kept borking on the Gutenberg block editor, with a big old fail.

The Gutenberg Embed Grey Screen of Death, the auto embed failed in the block editor.

I could have shrugged, since it worked in the SPLOT, but I was really hoping I could have something that worked more widely.

Back to Embed Basics

The way all this works is not a WordPress thing, but a protocol called oEmbed. What happens when you type in that YouTube URL into WordPress, is that under the hood, via JavaScript, it sends that URL to a special oembed provider link at YouTube, which returns a bit of json data that specifies everything WordPress needs to write an embed code.

Curious? This is the response to one of my videos (well worth watching, BTW), see https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DJFjigsXHuyY&format=json

So Padlet might have one of these, right? It would help because adding to WordPress would be maybe one line of code. Well… I see nothing in their developer documentation. I could not find them on the provide list at https://oembed.com/#section7 (it might show up as I submitted a change via github).

The Google failed.

So I tried the other approach. I guessed.

Following the YouTube example above, and my padlet link https://padlet.com/cogdogblog/aos9fosbbwk I tried out:

https://padlet.com/oembed?url=https%3A//padlet.com/cogdogblog/aos9fosbbwk4&format=json

Bingo, the machine lights lit up as I got a valid response. This means that Padlet does have built in oEmbed support, it’s just ot documented.

This blob of json data indicates padlet has a built in means to support media embeds.

Getting this to work in a self hosted WordPress means slipping this bit of code into functions.php

What About H5P?

Last week I attended the webinar eCampusOntario held to announce their H5P Studio and wonderful resource available for Ontario educators to create and use H5P content (interactive stuff usable in platforms like WordPress, drupal, and those LMS things).

They did make note of a feature, that any content like say, this one on the 5 Rs of Open offers an embed code (if the creator allowed it). This looks something like:

And since I have a self hosted single site WordPress, I can actually enter that code (though it must go into the text editor of old school wordpress or Custom HTML of the Shiny New Block Editor. See?

But again a point is- if you are running in say, a multisite environment, which is a lot of what people are doing Pressbooks as — the iframe and script code will be stripped out, leaving nothing (note, it would help if they provided a link inside the iframe tag which will be displayed if the iframe fails, but that’s even too tangential for this sprawling post).

I am looking at that and saying… why a plugin could add an oembed handler, so that someone would merely need to paste in the URL for the source to get an embedded version.

So this is my working version:

And I have it working in everywhere… except the darn Block Editor. See it for yourself in the beta TRU Writer SPLOT (where I end up trying things first) running as an barebones plugin.

What’s Next?

The plugin is not quite ready for prime-time. I’d like to see it with an options screen where a site owner could pick from an array of services to enable.

For the H5P ones, there would need to be a field for the web address of the H5P source site, as now it is hardwired to eCampusOntario’s. Actually would would be even better would be if H5P or eCampusOntario set up an oembed endpoint call.

I could just bake these into the SPLOTs but it seems more of a general need. If I can work out that Block Editor bug, it would be almost ready.

Got any other sites worth adding support for? Line are open.

And yes, all magic is sleight of hand, plus in this case, lucky guessing, blind web searching, and banging at code til it works.


Featured Image: Added some screens of Padlet embed code and a padlet view atop Wikimedia Commons image File:P. T. Selbit sawing a woman in half trick.png a work that is in the public domain.

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka 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 *