BrowseHosting

How to embed TikTok videos in WordPress

How to Embed TikTok Videos in WordPress (3 Easy Methods)


Do you want to easily embed TikTok videos on your WordPress website?

If you’re already creating successful, viral TikToks then it makes sense to post these videos to your website too. In this way, you can get more views, engagement, and social media followers with very little extra effort.

In this article, we’ll show you how to easily embed TikTok videos in WordPress.

Why Embed TikTok Videos in WordPress?

According to our ultimate list of blogging stats, posts with videos get 83% more traffic than those without video. That said, if you’re already posting TikToks then it makes sense to embed these videos on your WordPress website.

An example of a TikTok video, embedded in a WordPress website

In this way, you can get more visitors, without having to spend a ton of time creating new content. These videos can also help capture the visitor’s attention and keep them on your website for longer, which will increase pageviews and reduce bounce rate in WordPress.

At the same time, these videos will promote your TikTok channel to people who visit your website. This can get you more engagement and followers on TikTok.

With that said, let’s see how you can embed TikTok videos in WordPress. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Using the TikTok Block (Works With Any Theme)Method 2. Using the Full-Site Editor (Works With Block-Based WordPress Themes)Method 3. Using QuadLayers (Embed Your Entire TikTok Feed)

Method 1. Using the TikTok Block (Works With Any Theme)

The easiest way to embed TikToks on your WordPress site is by pasting the video’s URL into the page or post editor. WordPress will then detect the video and fetch it for you automatically.

First, you need to visit the TikTok video that you want to embed. Then, copy the video’s URL.

Adding a TikTok video to a page or post using the WordPress block editor

Next, open the WordPress page or post where you want to show the TikTok video. You can then simply paste the URL into the WordPress block editor.

WordPress will automatically detect that you’re embedding a TikTok video, and add a TikTok block with the video already embedded.

Embedding TikTok videos on a WordPress blog or website

By default, WordPress will resize the TikTok video automatically for smaller screens, including smartphones and tablets. It will also preserve the video’s ratio when the browser gets resized.

This is a good user experience, so we recommend leaving the setting enabled. However, sometimes you may want to keep the video at the same size, no matter what. In that case, click to select the TikTok block and then disable the ‘Resize for smaller devices’ toggle.

Resizing a TikTok video on mobile devices including smartphones and tablets

If you do disable this setting, then it’s a good idea to test the mobile version of your WordPress site from the desktop, to check you’re happy with the visitor experience.

You can get similar results by adding the TikTok block to a page or post. After that, you can add the TikTok video’s URL at any point.

This is useful if you’re unsure what TikTok video you’re going to embed, or if the video hasn’t been published yet. This is also a good way to plan your layout, particularly if you’re designing a landing page or sales page.

To add a TikTok block, simply click on the ‘+’ icon and then type in ‘TikTok.’

Adding the WordPress TikTok block to a page or post

When the right block shows up, click to add it to the page or post.

After that, you can simply paste the TikTok URL into the block and click on ‘Embed.’

The TikTok WordPress block

Another option is to embed the TikTok video in a widget-ready area such as the sidebar or similar section. This allows you to show the same video across your entire site. For example, if you’re trying to create a viral giveaway in TikTok, then you might embed the video announcing the contest.

To do this, go to Appearance » Widgets in your dashboard. Here, you’ll see all the different areas where you can add widgets in WordPress.

Adding widgets to a sidebar or similar section

Simply find the area where you want to embed the TikTok video.

Then, click on the ‘+’ icon.

Adding a block to a widget-ready area in your WordPress theme

In the popup that appears, type in ‘TikTok.’

When the right block shows up, click to add it to the widget-ready area.

Embedding TikToks in a WordPress website or blog

You can now paste the URL of the TikTok video you want to embed.

With that done, click on the ‘Embed’ button.

How to embed TikTok videos in WordPress

When you’ve finished, don’t forget to click on ‘Update’ to make the changes live.

You can now visit your WordPress blog or website to see the TikTok video live.

Making a TikTok video live on your website

Method 2. Using the Full-Site Editor (Works With Block-Based WordPress Themes)

If you’re using a block theme then you can add a TikTok to any widget-ready area or template using the full-site editor. This allows you to show TikTok videos on pages and posts that you can’t edit using the standard content editor. For example, you might use TikTok videos to improve your 404 page template.

In your WordPress dashboard, go to Themes » Editor.

Opening the WordPress full-size editor (FSE)

By default, the full-site editor will show your theme’s home template.

If you want to add the TikTok video to a different area, then click on either ‘Template’ or ‘Template Parts.’

Editing template parts using the full-size editor (FSE)

You’ll now see all the templates or template parts that make up your WordPress theme.

Simply find the template where you want to embed a TikTok video and click on it. As an example, we’ll be adding a TikTok to the Archive page template but the steps will be largely the same no matter what template you’re using.

Customizing the archive template using the WordPress block-based FSE editor

WordPress will now show a preview of the template.

To go ahead and edit the layout, click on the small pencil icon.

Editing a block-based template using the full-site editor (FSE)

With that done, click on the ‘+’ button towards the top left of the screen.

In the search bar that appears, type in ‘TikTok.’

Adding a TikTok block to a WordPress site template

When the right block shows up, drag and drop it onto the layout.

You can now paste the video’s URL into the TikTok block, and click on the ‘Embed’ button.

Adding a TikTok video to any part of your website or blog

When you’re happy with how the template looks, click on the ‘Save’ button. Now, simply visit your WordPress website to see the TikTok in action.

Method 3. Using QuadLayers (Embed Your Entire TikTok Feed)

If you just want to add a few TikToks to your WordPress website, then method 1 and method 2 are both great choices. However, sometimes you may want to show all your latest TikToks in a feed that updates automatically.

This is an easy way to keep your website fresh and interesting, while promoting your newest TikTok videos at the very same time.

The best way to embed a TikTok feed in WordPress is by using QuadLayers TikTok Feed. This free plugin allows you to connect WordPress to your TikTok account, and then show all your videos in a gallery or masonry layout.

An example of an embedded TikTok feed, on a WordPress website

Just be aware that you can only show TikToks from your own account.

First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

The first step is creating an access token using your TikTok account. In the WordPress dashboard, head over to TikTok Feed » Accounts and click on ‘Add TikTok Account.’

Connecting TikTok to your WordPress website or blog

Next, click ‘Login with TikTok.’

You can now type in your TikTok email address and password, and follow the onscreen instructions to connect QuadLayers to your TikTok account.

How to connect your TikTok social media account to WordPress

When you’re done, QuadLayers will take you back to the WordPress dashboard automatically.

Now, go to TikTok Feeds » Feeds and click on the ‘+ Feed’ button.

Adding a TikTok feed to your WordPress website or blog

In the popup that appears, open the ‘Account’ dropdown and select your TikTok account.

You can now choose between Gallery and Masonry layouts for the TikTok feed. Masonry shows the videos in portrait mode, while Gallery displays the videos as square thumbnails.

Connecting a social media account to your WordPress website

By default, QuadLayers will show the most recent 12 TikToks posted to your account. To show more or fewer videos, simply type a different number into the ‘Limit’ field.

You can also change how many videos QuadLayers shows in each row, by typing into the ‘Columns’ field.

Showing TikTok videos in an organized layout

There are some more settings you can configure, but this is all you need to create an eye-catching TikTok feed.

When you’re happy with your settings, click on ‘Save.’

Creating a live TikTok feed for your website or blog

QuadLayers will now create a shortcode that adds the feed to your website.

Simply go ahead and copy the value in the ‘Shortcode’ column.

Adding a TikTok feed to your website using shortcode

Now, just paste this shortcode into any page, page, or widget-ready area. For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

With that done, simply visit your website to see the TikTok feed in action.

An example of a TikTok feed, embedded on a WordPress website

We hope this article helped you learn how to embed TikTok videos in WordPress. You may also want to check out our guide on how to embed a Facebook video in WordPress, or see our expert pick of the best social media plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Embed TikTok Videos in WordPress (3 Easy Methods) first appeared on WPBeginner.



Source link

Leave a Comment

Your email address will not be published.