Tiktok embed support - Something for the plugin, or custom scripting?

[jerclarke]

Feature description

Tiktok has an embed code and oEmbed endpoint that works with core WP, but so far it does nothing in AMP and I can't find anyone on the internet talking about the issue.

What's the right approach for me to take if I want to support it? Wait for an amp-tiktok script like the Twitter/Instagram ones?

Should I be trying to support their iframe directly somehow?

Thanks for any feedback. Sorry if the question doesn't belong here. I realize there's a never-ending list of potential embeds for AMP to support, just trying to figure out if this one is a reasonable goal for one person to tackle, or if I should just forbid my users from embedding Tiktok until AMP supports it (if they ever do).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

Thanks for the report. Since WordPress now has direct support for TikTok, it's something that the AMP plugin should be directly supporting as well.

Nevertheless, in the current version of WordPress I'm not able to embed a TikTok embed in the block editor:

So is this working for you? If so, how?

This will be the prerequisite, which I know will for sure will be coming in WordPress 5.4, but I'm curious how you are seeing it work now.

I don't believe an amp-tiktok element will be required and that the AMP plugin can just use amp-iframe instead.

---

Example TikTok URL: https://www.tiktok.com/@scout2015/video/6718335390845095173

Example embed code:

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@scout2015/video/6718335390845095173" data-video-id="6718335390845095173" style="max-width: 605px;min-width: 325px;">
	<section><a target="_blank" title="@scout2015" href="https://www.tiktok.com/@scout2015">@scout2015</a>
		<p>Scramble up ur name & I’ll try to guess it😍❤️
			<a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage">#foryoupage</a>
			<a title="petsoftiktok" target="_blank" href="https://www.tiktok.com/tag/petsoftiktok">#petsoftiktok</a>
			<a title="aesthetic" target="_blank" href="https://www.tiktok.com/tag/aesthetic">#aesthetic</a></p>
		<a target="_blank" title="♬ original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬
			original sound - 𝐇𝐚𝐰𝐚𝐢𝐢𓆉</a></section>
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>

What is needed here is an AMP_TikTok_Embed_Handler similar to how today we have a AMP_Instagram_Embed_Handler.

[pierlon]

Nevertheless, in the current version of WordPress I'm not able to embed a TikTok embed in the block editor

Support for Tiktok embeds will be available in WordPress 5.4, and can be tested for by using any of the 5.4 betas.

This is also related to #4286, with the addition of the Tiktok embed block in Gutenberg.

[pierlon]

Here's the iframe that's generated from https://www.tiktok.com/@scout2015/video/6718335390845095173:

<iframe name="__tt_embed__v37580789727738020" src="https://www.tiktok.com/embed/v2/6718335390845095173?lang=en-US" style="width: 580px; height: 0px; display: none; visibility: hidden;" data-origwidth="" data-origheight=""></iframe>

One thing to note is that the iframe src is generated client side and is not apart of the returned embed HTML. The main concern here is the lang query param that being added; I'm not sure if this will alter the embed in any way.

[jerclarke]

What I have working is the <blockquote class='tiktok-embed'>+<script> code that you (@westonruter) posted. Putting that in the HTML editor already works fine, since it uses the same method as Twitter, where there's a simple, stable bit of content in the post itself, and the script converts it into an iframe at load time (as @pierlon points out).

That's how TikTok recommends users do it, so really that's what my users are going to do and that's what I need to support (though of course supporting the full oEmbed version is good too).

The other reason I prefer the <blockquote> format is the same as for Twitter: At least some of the embed content is in the post itself, rather than having only the URL. If the object goes offline, we still have the blockquote for future readers to peruse.

I'm not sure if that causes problems for AMP or not, but I suspect it might be part of the reason for the amp-twitter script (to make sure it's loaded in the AMP way and not relying on the blockquote and script tag being next to each other).

[westonruter]

@jerclarke Please test this build: #4357 (comment)

[westonruter]

Note that the implementation is not perfect. It's about as good as it's going to get until AMP has specific support for TikTok (or better TikTok directly supports amp-iframe). See ampproject/amphtml#27080.

[pierlon]

Testing instructions:

1. Create a new post and add a Embed block with the following URL: https://www.tiktok.com/@scout2015/video/6718335390845095173

2. Verify the TikTok embed is shown on the AMP page and is identical to the non-AMP version

[csossi]

Verified in QA

[carloshhr]

Hello guys, I'm jumping here with a possible alternative to use amp-iframe component, I used and worked for me.

[westonruter]

@carloshhr ok? So what is it?

[carloshhr]

Apologies😅, I used this amp tag https://amp.dev/documentation/components/amp-embedly-card/

[westonruter]

Wow, yes, you're right! This totally should have used amp-embedly-card card. The iframe resizes itself perfectly. We'll revise.

[westonruter]

Filed issue here: #4633.