Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-06-17 11:04:37

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 320
Website

Shortcode for youtube embed and schema

Hi all! I’m so excited today because my husband put together a bit of js for me with the YouTube API that lets me put the id of a video into an input field, and then generate a shortcode that works with a dedicated form to output YouTube videos:

- From the ‘nocookie’ embed url
- In a format that my js can hook into that replaces the video with the thumb (page speed)

In my js I’m looking for the class youtube, then using the data-embed attribute to build the iframe for the YT embed.

Posting the code below, I’m thinking I’ll upload the tag generator to Github also, it’s not checked for security or anything, it’s something you’d just run on your local machine and you need a Google developer API key to make the calls (very easy to get)

In a form called media_video (thanks for the very helpful example with html5 video tag!)

<div class="youtube" data-embed="<txp:yield name="dataembed" />" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="<txp:yield name="duration" />" />
<meta itemprop="uploadDate" content="<txp:yield name="uploaddate" />"/>
<meta itemprop="thumbnailURL" content="<txp:yield name="thumbnailurl" />" />
<meta itemprop="embedURL" content="<txp:yield name="embedurl" />" />
<div class="play-button"></div>
<meta itemprop="name" content="<txp:yield name="name" />" />
<meta itemprop="description" content="<txp:yield name="description" />" />
</div>

My shortcode (generated by an API call and copied/pasted into article):

<txp::media_video name="Local business SEO tips & tricks" description="In today’s blog, I discuss ranking your website well in Google Search Engine Result Pages specifically. We call these SERPs. Maps listings are also covered which are managed by Google my Business." embedurl="https://www.youtube-nocookie.com/embed/EnzBdKXiqe0" thumbnailurl="https://i.ytimg.com/vi/EnzBdKXiqe0/hqdefault.jpg" uploaddate="2021-06-15T19:52:17Z" duration="PT1M54S" dataembed="EnzBdKXiqe0"/>

I’m just putting a drive link here where you can see how I’m generating the tag: drive.google.com/file/d/1qBMQEQIZbRNz74sjkwVDS-ZLFm4Xk717/view?usp=sharing

You can run it through the rich content tester with Google and see it returns positive for video mark up and is eligible for any enhanced listings for that.

Now the caveat, if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit I think as to what even is that lol, so if you do have emojis in your video description you’d just need to re-write it in the tag first. Otherwise it works really well and I could see myself using custom tag generation a lot as a time saver as the way you’d need things is so specific.

Shortcodes are GREAT!

Edit: added code formatting.

Hilary edit: Emoji sitch looks to be just a utf issue, wouldn’t happen with newer txp installs so possibly could have emojis in description on newer build. :)

Last edited by hilaryaq (2021-06-17 16:13:46)


…………………
I <3 txp
…………………

Offline

#2 2021-06-17 11:44:40

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,520
Website GitHub

Re: Shortcode for youtube embed and schema

Very cool!

hilaryaq wrote #330524:

if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit

Remember you have access to the escape attribute in all tags now, so if certain things are causing hassle, you can strip them out.

Shortcodes are GREAT!

I concur :)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2021-06-17 11:46:11

etc
Developer
Registered: 2010-11-11
Posts: 4,517
Website GitHub

Re: Shortcode for youtube embed and schema

hilaryaq wrote #330524:

Now the caveat, if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit I think as to what even is that lol, so if you do have emojis in your video description you’d just need to re-write it in the tag first.

Txp itself is emoji-friendly, isn’t it rather <meta /> tag that is complaining?

Offline

#4 2021-06-17 11:53:47

etc
Developer
Registered: 2010-11-11
Posts: 4,517
Website GitHub

Re: Shortcode for youtube embed and schema

Bloke wrote #330525:

Remember you have access to the escape attribute in all tags now

Currently escape="html" encodes only HTML special chars. Should we consider tidy, html as htmlentities()?

Offline

#5 2021-06-17 11:54:49

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,520
Website GitHub

Re: Shortcode for youtube embed and schema

etc wrote #330528:

Should we consider tidy, html as htmlentities()?

That’s a neat idea.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#6 2021-06-17 12:06:47

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 320
Website

Re: Shortcode for youtube embed and schema

Thanks all!

We did test an emoji on it’s own with text before and after in a normal txp article, and when published none of the text displayed so I figured it was a txp thing, but maybe it was a versioning thing? I wonder would an upgrade give me emojis?!


…………………
I <3 txp
…………………

Offline

#7 2021-06-17 12:24:01

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,520
Website GitHub

Re: Shortcode for youtube embed and schema

How did you put the emoji into your article? Paste it in as-is? As a unicode sequence?

Certainly support wasn’t added to Txp until, what, 4.6 or 4.7 (I think), but it might also be to do with your table collation. utf8-mb4 is standard now.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#8 2021-06-17 12:38:42

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 320
Website

Re: Shortcode for youtube embed and schema

Pasted it in, like copy paste and it shows as a visual emoji on the article, I am on 4.7 but must upgrade to 8 alright!


…………………
I <3 txp
…………………

Offline

#9 2021-06-17 12:54:04

etc
Developer
Registered: 2010-11-11
Posts: 4,517
Website GitHub

Re: Shortcode for youtube embed and schema

Bloke wrote #330529:

That’s a neat idea.

Even maybe mb_encode_numericentity(), to encode emojis too.

Offline

#10 2021-06-17 13:05:01

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,520
Website GitHub

Re: Shortcode for youtube embed and schema

etc wrote #330534:

Even maybe mb_encode_numericentity(), to encode emojis too.

Whatever you think is best is fine with me!


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#11 2021-06-17 13:10:37

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 320
Website

Re: Shortcode for youtube embed and schema

Oooo I sense toys coming thanks etc and stef!!!


…………………
I <3 txp
…………………

Offline

#12 2021-06-17 13:11:39

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 320
Website

Re: Shortcode for youtube embed and schema

Is there anyway to fix the utf8-mb4 Stef do you know and would that fix emojis in a normal article usage or is it an upgrade you think?


…………………
I <3 txp
…………………

Offline

Board footer

Powered by FluxBB