Dieser Beitrag ist derzeit nur in Englisch verfügbar.

TikTok videos are a lot of fun to watch. People get super creative with the limited amount of time they have. No wonder some of our clients requested being able to embed TikTok videos into their CMS pages, mainly blog articles.

The Wagtail docs do cover adding custom embeds to your configuration, but at first glance it's not completely straight forward. So we hope to clear things up a bit, by example, in a couple of minutes.

Adding support for TikTok oEmbed

First, a big and loud "thank you!" to TikTok for supporting the oEmbed standard. There are platforms that don't and it makes embedding less trivial, but let's not get into that.

First, fire up your Django settings (settings.py) and then add the following:

# CUSTOM OEMBED PROVIDERS
tiktok_provider = {
    "endpoint": "https://www.tiktok.com/oembed",
    "urls": [
        # 'https://www.tiktok.com/@memmesson/video/6797323084085890309'
        r"^http(?:s)?://(?:www\.)?tiktok\.com/@\w+/video/\d+$",
    ],
}

This specifies the provider itself. It also tells Wagtail which URLs are considered valid, via the regular expression pattern above.

Now, we need to add that provider to the list of valid providers:

WAGTAILEMBEDS_FINDERS = [
    # Register tiktok
    {"class": "wagtail.embeds.finders.oembed", "providers": [tiktok_provider],},
    # Handles all other oEmbed providers the default way
    {"class": "wagtail.embeds.finders.oembed",},
]

That's it! If you now fire up any CMS page that supports embeds, you can simply paste the direct TikTok video link and the embed will load right away.

Andere Beiträge

  • Neon Mode: Building a new Dark UI

    We recently added a darkmode to our website. It's not just white text on a black background though - this one has a few extra tricks up its sleeve. Here's how we built it.

  • How to build a language switcher in Wagtail / Django

    A switcher enables users to seamlessly transition between different languages. But how can we achieve this functionality in a Wagtail project? We need a way to link pages together.