How To Embed TikTok Videos Into Your WordPress Website

SkyStra
May 7, 2021

TikTok has become one of the most popular social media platforms across the world. Depending on your niche or industry, it has the potential to bring massive amounts of traffic to your website. 

If you don’t have a TikTok profile yet – you should definitely consider creating one. If not to use it right away, claim your username, you never know when you’ll use it. 

WordPress supports embeds from TikTok by default, and it’s super easy to do; however, it won’t show your latest TikTok uploads automatically.

This article will teach you how to embed TikTok videos in your WordPress website posts and pages quickly and also how to display your TikTok videos automatically.

Embed TikTok Videos Manually

This method is pretty straightforward, and all you need to do is: copy the URL of a TikTok video and paste it into the WordPress editor.

Find the video you want to embed on TikTok, and copy the URL from the browser address bar:

Or from the TikTok’s page directly:

Next, create a new post/page or edit an existing post or a page, and paste the copied URL in the content area. WordPress will automatically render a preview of a video in the post editor:

Publish your post or a page, and you can see your video in action:

Alternatively, you can add your TikTok video using the TikTok block in the Gutenberg editor. 

Click + to add a new block, and then either scroll to find a TikTok block or use the search to find it:

Insert the block in the content area, and paste the TikTok video URL into the block settings:

Click Embed, and WordPress will automatically load a preview of the video.

Apart from posts and pages, WordPress also allows you to embed TikTok videos in your website sidebar, using Widgets.

Head to Appearance > Widgets, click + to add a new widget, search for TikTok and add it to your sidebar:

Paste the TikTok video URL and click Embed to finish adding the widget to your sidebar:

Click Update in the top-right to save changes, and visit your website to see the video in action:

As you can see, this method is very straightforward and lets you add your TikTok videos to your website easily, but it doesn’t allow you to show your latest TikTok videos. In order to do that, we’ll need to use a WordPress plugin. 

Embed TikTok Videos Using A Plugin

To embed your latest TikTok videos in WordPress, we’re going to use a free plugin called the  QuadLayers TikTok Feed plugin:

Head to your WordPress Dashboard > Plugins > Add New, fill in QuadLayers TikTok Feed in the top-right search bar, and click Install Now:

Next, click Activate to activate the plugin:

Head to TikTok Feed > Feeds, and you’ll see a demo TikTok feed that plugin automatically adds (with the WordPress hashtag). Click +Feed to add your new TikTok feed:

A new pop-up will open where you can create a TikTok video feed using a TikTok username (premium) or a hashtag and trending type (free). The free version of the plugin allows you to display videos in Masonry and Gallery style. In contrast, the premium version allows you also to use Carousel, Carousel Vertical, Highlight, and Highlight Square options.

Masonry style displays videos in portrait mode, while the Gallery style displays videos as square thumbnails.

In this example, we’ve configured the plugin to display videos from our Skystra TikTok feed, which means that any video from our profile will show in our feed on our website.

We’ve also decided to use the Masonry style, with a limit of 12 videos in total three columns. You can use the tabs on the left side of the pop-up to configure more settings if needed, and once ready – click Save to save changes.

Next, click the Copy button to copy the shortcode of the new feed to your clipboard:

Create a new post/page or edit an existing one, click + and search for a Shortcode block:

Add the Shortcode block to your post, and paste the copied shortcode into the block settings:

Save the post/page, and you’ll see the feed in action with the View on TikTok button at the bottom:

If you want to remove the TikTok button, edit the feed in TikTok Feed > Feeds, click the Button tab on the left, and uncheck the Display the button to open TikTok site link option:

You can also enable or disable the pop-up options (when someone clicks on a video thumbnail in the feed) in the Video Popup tab:

If you leave the first option checked – any time someone clicks on a video in the feed – it will open a pop-up video player instead of taking away the visitor from your website (to TikTok’s website).

Lastly, check the Video and Video Popup tabs to customize the video player settings. Here, you can enable lazy loading, adjust video spacing and radius, disable video controls, adjust text, display likes, and more.

Additionally, you can display the feed in your sidebar using widgets as well. Head to Appearance > Widgets, click + to add a new block, and search for Shortcode:

Add the Shortcode block and paste your feed shortcode into it:

Click Update in the top-right to save changes, and check your website to see it in action:

Final Words

As you can see, adding TikTok videos using only WordPress tools is very straightforward, and it doesn’t take much effort to display entire TikTok feeds in a gallery format using a free plugin either. You can use TikTok videos to promote your website, engage with your audience, and provide a video-based form of content to liven things up a bit on your website.