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

jerclarke commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@jerclarke Please test this build: https://github.com/ampproject/amp-wp/pull/4357#issuecomment-596247679

westonruter commented 4 years ago

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 https://github.com/ampproject/amphtml/issues/27080.

pierlon commented 4 years ago

Testing instructions:

Create a new post and add a Embed block with the following URL: https://www.tiktok.com/@scout2015/video/6718335390845095173
Verify the TikTok embed is shown on the AMP page and is identical to the non-AMP version

csossi commented 4 years ago

Verified in QA

carloshhr commented 4 years ago

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

westonruter commented 4 years ago

@carloshhr ok? So what is it?

carloshhr commented 4 years ago

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

westonruter commented 4 years ago

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

westonruter commented 4 years ago

Filed issue here: #4633.

ampproject / amp-wp