How to Add a TikTok Feed to Your Divi Website (Step-by-Step Guide)
tiktok-icon

Embed TikTok feeds on your website with our TikTok Plugin–for free!

Get Plugin angle-right
Home Blog How to Add a TikTok Feed to Your Divi Website (Step-by-Step Guide)

How to Add a TikTok Feed to Your Divi Website (Step-by-Step Guide)

add a tiktok feed to divi

Looking for a simple way to boost your engagement and get more TikTok followers?

You can simply add TikTok feeds to your Divi website. After all, TikTok is a fantastic source of bite-sized video content that can keep your visitors engaged.

But manually adding TikTok content to your website can be time-consuming and complicated.

To give you a better option, we’ve used our experience in social media marketing to put together this simple code-free guide on embedding TikTok feeds in Divi.

Why Embed TikTok Video Feeds in Divi?

As a popular website builder, Divi makes it super easy to create a beautiful website to promote your business online.

If you want to make your website even more engaging, an easy solution is to embed TikTok video feeds. That way, you can showcase relevant, bite-sized videos to keep people interested in your website.

[…] TikTok users are 1.8x more likely to agree that TikTok introduces them to new topics they didn’t even know they liked.

TikTok What’s Next Report 2024

And that’s just the start! Embedding TikTok feeds on your Divi WordPress site can also help you:

  • Promote your own TikTok videos to get more views, likes, and TikTok followers with ease
  • Boost your website’s SEO by adding keyword-rich captions so you can reach more people
  • Add video reviews and testimonials to the checkout page of your Divi e-commerce site to boost conversions
  • Display product demonstrations, tutorials, or unboxing videos on your product pages to inform potential customers
  • And much more!

How to Add a TikTok Feed to Your Divi WordPress Site

Just follow the step-by-step tutorial below and you can have a feed of TikTok videos on your Divi website in no time.

Step 1: Download the TikTok Feed Pro Plugin

For the easiest way to embed TikTok content, you can use the #1 TikTok feed plugin in the market: TikTok Feed Pro.

Using this simple tool, you can add beautiful TikTok feeds that automatically match your site’s look in just minutes – no need for HTML, Custom CSS, or any kind of code.

tiktok feed pro pricing

Since the plugin is lightweight and fast, you can embed as many videos and your site will load as fast as ever. This means you can boost your SEO and give your visitors a better experience.

The best part? Ths plugin comes with a dedicated team of experts who are ready to help you out or answer your questions whenever you like.

First, get your copy of TikTok Feed Pro here before installing and activating it on your website.

You can take a look at this beginner’s guide on how to install WordPress plugins if you need a quick refresher on how to do that.

Step 2: Create a New TikTok Feed

You can now open the plugin’s 3-step guided flow to quickly create a new TikTok feed.

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

open live feed editor tiktok feed

After that, TikTok Feed Pro will show you all the accounts or sources you’ve connected so far. Your new feed will fetch videos from these sources and display them on your site.

In my case, I haven’t connected a source yet so I can just add a new one.

Click on the Add Source button to start doing that.

tiktok feed pro add source

Step 3: Connect Your TikTok Account

On the new page, click on the Connect with TikTok button to proceed.

This will open https://www.tiktok.com/ on your web browser so you can connect your account.

connect with tiktok

To display your videos, TikTok Feed Pro will ask for read-only access to your account. This means the plugin can only view your content and won’t be able to make any changes.

You can click on the Authorize button to connect your account.

Doing that will open your website once more. Here, you’ll now see your TikTok account listed as a source.

You can freely reuse this source for any of your future TikTok feeds without leaving your website.

For now, select the source and click on Next.

select your tiktok source

Step 4: Customize Your TikTok Video Feed

To help you create unique TikTok feeds easily, the plugin gives you feed templates that you can import:

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

Once you pick a template you like, click on Next.

For this example, I’ll just go with the Default template here.

select your feed template tiktok

Once you pick a template, TikTok Feed Pro will automatically create your feed and open it in the visual customizer.

On the left, you can find the options to change your layout, header, video elements, buttons, and much more. Plus, the live preview on the right can help you track all the changes in real time.

live feed editor tikto feed pro

To get started, we can change the layout of the videos on your website.

Go ahead and select the Layout option on the left to start doing that.

open layouts tiktok feed pro

Next, TikTok Feed Pro will show you 4 different layouts to choose from:

  • Grid: Display tons of TikTok videos at once in different rows and columns
  • List: Highlight each video by showing your feed in a single column instead
  • Masonry: Show a masonry gallery that keeps the original video proportions
  • Carousel: Embed your TikTok video feed on your site as an interactive slider
layout options for tiktok feed pro

To continue, select your template and click on Save.

You can also change the number of rows, columns, displayed videos, and more from the options here. Once you finish changing the layout settings, click on the Customize button to return to the main options.

customize button live feed editor tiktok feed pro

Next, let’s change how the header above the TikTok feed looks.

First, select the Header option from the left.

open header options for tiktok

Next, you can see the option to Enable or Disable your feed header on the left.

Under that, you have the option to show or hide header elements like:

  • Profile Picture
  • Name
  • Username
  • Description
  • Stats
  • Button

Just select the elements you want to show and then click on the Save button.

You can also click on each of these elements and customize them in detail from this page. For our example, let’s customize the Profile Picture.

If you do that, you can change the Size of the profile picture, the spacing options, as well as the margins around the picture.

customize header profile titok feed

Once you’re happy with your TikTok video feed, click on Save to confirm your changes.

Just like that, you can use the rest of the options to change how your button, video elements, captions, and more will look. Just remember to Save your changes afterward.

Step 5: Add TikTok Feed to Divi

You can start adding this TikTok feed to Divi by clicking on the Embed button in the top right corner.

embed tiktok feed live feed editor

You’ll then see a popup with the different ways to embed your videos. For example, you can add it to a web page, show it on your footer, or add it to your website’s sidebar area.

To continue, you can just Copy the shortcode here.

copy shortcode tiktok feed pro

Next, you can create a new Divi page to embed this TikTok video feed.

Just open the Pages » Add New menu from your dashboard and click on the Use the Divi Builder button.

To show the TikTok feed on a post instead, you can open the Posts » Add New menu before selecting the Use the Divi Builder option.

You can even use any of your existing Divi posts or pages if you like.

add new post in divi

Divi will now give you 3 ways to start creating your page.

  • Start Building: Start designing your page from a blank template
  • Browse Layouts: Import a pre-designed layout that you get with Divi
  • Choose Page: Copy one of your existing designs and use it instead

You can select whichever option you prefer here.

choose divi builder option

If you selected the Start Building option, Divi will immediately let you start designing the new page or post.

start building with divi editor

With the Browse Layouts option, you’ll see a new popup with different pre-built designs that you can check out.

Just select a layout that you prefer from here.

load layout pack from library divi

If you like the design, you can just click on Use This Layout to import it for your current page or post.

import layout for divi

In case you selected the Choose Page option, you’ll see a list of templates that you already created using Divi.

All you have to do is select the template that you’d like to use.

load from library divi theme

Once you’re in the Divi editor, you can create a new row where you can insert your TikTok feed.

For that, click on the green plus icon (+) and select a row design.

insert row into divi website

Once you’ve added a row, you can insert a new module by clicking on the plus (+) icon here.

This opens a popup with the different modules that you can add. For now, use the search bar to find the “Code” module and click on it below.

code module for divi theme

Inserting a module will open a popup with some additional options. There, you can just paste your shortcode from earlier into the Code field.

After that, click on the check icon to save your changes.

insert tiktok feed shortcode divi

Finally, you can click on Publish, and your TikTok video feed will be live on your WordPress Divi site. Just open the page or post, and you can see how it will look to your visitors.

example of tiktok divi feed

And that’s it!

As you can see, it’s super easy to add TikTok feeds in Divi if you’re using the right tool. You can now engage visitors, boost your social media following, and grow your businesses using TikTok content.

With the TikTok Feed Pro plugin, integrating TikTok with your website is simpler than ever before – no need to touch a single line of code!

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

Want to promote your YouTube channel on your Divi site? Here’s a guide on how to embed YouTube videos in Divi easily.

And don’t forget to 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.