How to Embed TikTok Feeds on Your Website (Beginner's Guide)
Home Blog How to Embed TikTok Feeds on Your Website (Beginner’s Guide)

How to Embed TikTok Feeds on Your Website (Beginner’s Guide)

how to embed tiktok feeds on your website

Do you want to embed TikTok feeds on your website?

Showing a TikTok feed can be a great way to share your TikTok videos with your website visitors. Just like that, you can get more views, likes, and TikTok followers with ease.

In this post, we’ll show you the easiest way to embed a TikTok feed on your website – all with absolutely no coding!

Let’s get started.

Can You Embed a TikTok Feed on a Website?

Yes, you actually have 2 different ways of embedding TikTok feeds on your website:

  • Manual Way: Use the TikTok embed generator to create embed codes for each video and then insert the code into your website.
  • Automatic Way: Get a WordPress plugin that can automatically embed TikTok video feeds on your website for you.

If you choose to manually add TikTok embed codes to your website, it can end up taking a lot of effort and time.

After all, you’ll have to go through the whole process of generating embed code for a video, tweaking the code, and inserting it into your website.

add embed code to custom html block tiktok

If your TikTok embed is not working properly after all that, then you won’t have a support team to help you out.

For an easier way, you can use a WordPress plugin instead. Unlike other web platforms like Wix, WordPress has tons of plugins that can help add features to your site.

And if you want to integrate your website with TikTok, you can simply use TikTok Feed Pro!

tiktok feed pro homepage

In just a few clicks, you can use the plugin to create, customize, and embed TikTok feeds on your website. 

All you have to do is follow the plugin’s 3-step guided flow – no need for Javascript, HTML, or any kind of coding.

guided flow tiktok feed pro

You can then start engaging website visitors with relevant TikTok videos from your profile.

To help you create beautiful feeds, the plugin will automatically inherit your website’s design right out of the box.

On top of that, you can import a feed template or use the visual customizer to design your TikTok feeds with ease.

example of tiktik feed editing

Plus, the plugin has been optimized to be lightweight and fast. So, you can embed tons of videos at once to keep visitors interested, and your site will still load as fast as ever.

As you can see, TikTok Feed Pro comes with everything you need to create engaging TikTok video feeds for your site.

Ready to get started with TikTok feeds? Just get your copy of TikTok Feed Pro here!

How to Embed TikTok Feed on Your Website

Now, we’ll show you a step-by-step guide that you can follow to embed TikTok feeds on your site in just minutes.

Let’s get started!

Step 1: Install and Activate TikTok Feed Pro

To get started, you can get the TikTok Feed Pro plugin for your site here. Once you have the plugin, just install and activate it on your website.

If you want a quick refresher on how to do that, follow this guide on how to install plugins in WordPress websites.

You can then move on to step 2 and create your feed using the plugin.

Step 2: Create a New TikTok Feed

Using TikTok Feed Pro’s guided flow, you can now create your feed with ease.

From your dashboard, open the TikTok Feed » All Feeds menu and then click on the Add New button.

open live feed editor tiktok feed

In step 3, you can connect your TikTok account to this feed and start showing the videos on your website.

Step 3: Connect Your TikTok Account

After that, you can connect this feed to your TikTok account so it can show your videos on your website.

To get started, click on the Add Source button.

tiktok feed pro add source

Once you connect a source from here, you can freely reuse it for any of your future TikTok feeds.

To start adding your source, click on the Connect with TikTok button.

connect with tiktok

To connect your account, the plugin will now ask you for read-only access. Using this access, TikTok Feed Pro will view your TikTok info, but it can’t actually make changes at all.

So, using the plugin is 100% safe.

Ready to continue? Just click on the Authorize button.

Doing that will bring you back to your website once more. Here, you’ll see your TikTok account added as a source for your feed.

Just select your account here and then click on Next.

select your tiktok source

The plugin can now fetch your TikTok videos and display them on your WordPress website. Plus, the feed will automatically copy your site’s design and look beautiful right out of the box.

In step 4, you can customize how your TikTok feed will look before embedding it on your site.

Step 4: Customize Your TikTok Video Feed

To help you design beautiful TikTok feeds with ease, you get feed templates that you can import.

That way, you can instantly copy one of 6 different templates for your TikTok feed:

  • Default
  • Cards
  • List
  • Latest Video
  • Carousel
  • Showcase Carousel

After choosing the TikTok feed template, click on the Next button.

select your feed template tiktok

Next, the plugin will open your feed in the visual customizer, where you can change your TikTok layout, header, button design, lightbox options, and more.

Whenever you make any changes, the live preview on the right will show you how your feed will look in real time.

live feed editor tikto feed pro

To get started, you can simply click on one of the options on the left.

For example. we’ll start by editing the Layout of the TikTok feed.

open layouts tiktok feed pro

Next, you can choose from 4 different layouts for your TikTok feed:

  • Grid: Show tons of TikTok videos at once using a neat grid design
  • List: Embed videos in a single column so each video is more visible
  • Masonry: Use multiple columns to show TikTok videos in their original proportions
  • Carousel: Turn your TikTok feed into an interactive slideshow carousel
layout options for tiktok feed pro

Once you’re done setting up the layout, click on Save to keep the changes.

Next, click on Customize to continue designing your TikTok feed.

customize button live feed editor tiktok feed pro

From the main customization menu, you can now select any of the other options on the left.

This time, we’ll go with the Header option for our TikTok feed.

open header options for tiktok

At the top, you can choose to Enable or Disable your feed header.

Under that, the plugin lets you select the header elements you want to show and unselect the ones you want to hide:

  • Profile Picture
  • Name
  • Username
  • Description
  • Stats
  • Button
live feed editor change tiktok header

From here, you can also customize any of your header elements in detail. To do that, either click on the header element itself on the right or select any of the options on the left.

We’ll set up the Profile Picture for your TikTok feed from here.

customize header profile titok feed

On the left, you can now see the option to change the Size of the profile picture.

Underneath that, you can set up the margins and padding for your picture to change its location.

After setting up your header element, click on Save once more.

As you can see, TikTok Feed Pro makes it super easy to change how your feeds look. You can also use the remaining options to change your load more button, video player options, filters, and much more.

Like before, remember to click on Save once you’re happy with the TikTok feed.

After that, it’s time to embed your TikTok feed on your WordPress site in step 5.

Step 5: Embed TikTok Feed on Website

Using the visual customizer, it’s super easy to start embedding the TikTok feed — even if you’re a WordPress beginner.

First, click on the Embed button at the top.

embed tiktok feed live feed editor

You’ll then see the different ways to embed your TikTok video feed. The plugin lets you embed the feed on a page or add it to your sidebar or footer as a widget.

For our example, we’ll use a WordPress page to embed the TikTok feed.

Before you can do that, hit the Copy button on the popup.

copy shortcode tiktok feed pro

You’ve just copied your TikTok feed shortcode so you can embed the feed anywhere on your site.

Next, click on the Add to a Page button on the popup.

tiktok feed pro add to a page

TikTok Feed Pro will then show you a list of the WordPress pages available on your site.

You can select the page you prefer and click on Add to continue.

select your page tiktok feed pro

Now, you’ll see the page open in the WordPress editor so you can embed your feed.

First, add a new block to the page by clicking on the plus (+) icon.

add block tiktok video feed

Once you see the search bar at the top, type in “shortcode” to look for the widget.

Then, click on the Shortcode widget in the search results below.

To continue, simply paste your TikTok feed shortcode into the shortcode block.

Then the plugin will automatically embed your TikTok feed on this webpage.

shortcode for tiktok feed pro

Just like that, you now have a new TikTok feed to grab people’s attention and boost your social media engagement.

If you open this page, you can even see how your TikTok embed example will look to your visitors.

example of tiktok video feed

And there you have it!

Now you know how to embed TikTok feeds on your website the easy way. You can then engage your visitors with bite-sized videos, boost your following, and grow your business.

To do all that and more the easy way, all you need is the TikTok Feed Pro plugin. In just minutes, you can integrate your website with TikTok and start embedding videos.

Ready to embed TikTok feeds in WordPress? Get TikTok Feed Pro for your site today!

For more ways of integration social media with your site, check out our list of the best social media wall examples.

You can follow us on Twitter and Facebook for more social media tips and tricks to grow your business.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.