Product and Feature Updates about Kinja
Product and Feature Updates about Kinja

URL support for TikTok embeds were added to the editor on 24/02/20. You don’t have to go into the HTML editor anymore, just paste the link into the editor.


Advertisement


Previously, when TikTok generated the code to embed one of their videos onto an external site it used an iframe and an embed url that looked like this:

https://www.tiktok.com/embed/6761957450296954117

This implementation worked on Kinja, allowing users to add TikToks to their post using this process.

Unfortunately, they have since changed to their implementation in a way that doesn’t currently work with our editor. That being said, the old “/embed” endpoint is still currently functional and can be used to embed them into posts.

First, click on the “HTML” button in the toolbar to switch to the editor to code view

Advertisement
Illustration for article titled TikTok Embedding

Then, paste in the following snippet of code, replacing the #s with the ID of the video you want embedded. For example, the ID that would be used for this video would be 6761573060001811718.

Advertisement

Some things to note, the size & alignment can’t be adjusted and this doesn’t really handle TikToks that aren’t shot vertically very well (see example).

Advertisement



Notes for Nerds

The new implementation TikTok’s embeds is incredibly similar to how Twitter embeds tweets, basically by providing a snippet that includes a basic element with some information about what is being embedded (which also acts as a fallback) and a script tag referencing a library that consumes and replaces that element with the embed.

Advertisement

With that in mind, it should be relatively simple to repurpose what we’re doing to embed Tweets into posts, especially considering that TikTok provides an endpoint that returns the HTML that we would require for the initial render on the page.

Share This Story

Get our newsletter