How to Add a TikTok Feed to Your WordPress Beaver Builder Site
Home Blog How to Add a TikTok Feed to Your WordPress Beaver Builder Site

How to Add a TikTok Feed to Your WordPress Beaver Builder Site

how to add a tiktok feed to your wordpress beaver builder site

Want to add TikTok feeds to Beaver Builder and boost your engagement?

As the #1 platform for short videos, TikTok is a great place to find engaging content for your Beaver Builder site.

The downside is that adding TikTok videos to your website can be time-consuming and complicated. If you want to show lots of videos, it means dealing with a lot of embed codes.

To give you a better way, we’ve put together this tutorial on adding TikTok feeds to Beaver Builder easily – no coding needed!

Why Add TikTok Feeds to Beaver Builder?

Beaver Builder is a popular website builder and a great option for any business owner who wants to promote their business online.

By adding TikTok feeds to a Beaver Builder site, you’ll have an even easier time keeping visitors engaged and promoting your content.

In fact, here’s what you can do by adding TikTok feeds to your website:

  • Display your own videos so you can boost your engagement and TikTok followers easily
  • Showcase video reviews from TikTok on your website to boost your conversion rate and get more sales
  • Regularly add fresh content with keyword-rich captions on your site for better SEO
  • Inform people about your products with demonstration and unboxing videos so they’ll buy from you
  • And much more!

How to Add a TikTok Feed to Your Beaver Builder Website

Ready to start adding TikTok feeds to your site? We’ll walk you through all the steps below:

Step 1: Download the TikTok Feed Pro Plugin

If you’re looking for the easiest method of adding TikTok videos to your site, you can simply use TikTok Feed Pro.

tiktok feed pro pricing

As the best TikTok feed plugin in the market, you can use this tool to create, customize, and embed Tiktok feeds on your website in just minutes – no need to touch a single line of code.

Plus, you even get a support team of WordPress gurus who are always ready to lend you a hand.

To get started, grab your copy of TikTok Feed Pro here then install and activate it on your Beaver Builder website.

For more details on how to do that, you can look at this beginner’s guide on how to install WordPress plugins.

Step 2: Create a New TikTok Feed

Since the plugin comes with a 3-step guided flow, it’s super easy to create a TikTok feed of your own.

From your WordPress dashboard, open the TikTok Feed » All Feeds menu before clicking on the Add New button at the top.

open live feed editor tiktok feed

You’ll then see all the sources that you can use for your TikTok feeds. Each source is basically a TikTok account that you’ve connected to your site.

Since I haven’t connected a source so far, I can start adding a new one now.

To do that, click on the Add Source button here.

tiktok feed pro add source

Step 3: Connect Your TikTok Account

Next, click on the Connect with TikTok button, and the plugin will redirect you to TikTok.

There, you can quickly connect your account.

connect with tiktok

To connect your TikTok account, the plugin will ask for read-only access to your website.

This means TikTok Feed Pro won’t be able to make any changes and can only view your info. So, you can click on Authorize to continue.

After that, you’ll be redirected to your Beaver Builder website once more.

As you can see, you’ve just connected your account as a source for your TikTok feeds. Now you can reuse this source for any feeds you create.

So, let’s select this source before clicking on Next.

select your tiktok source

Step 4: Customize Your TikTok Feed

The next step is to pick a feed template for your TikTok feed. You have 6 templates to choose from and each option comes with a unique design:

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

All you have to do is select a template you like before clicking on Next.

In my case, I selected the Default template since I’m not going for anything fancy.

select your feed template tiktok

After that, TikTok Feed Pro will import this template and open your TikTok video feed in the visual customizer.

You can see all the customization options on the left here. These allow you to change your layout, header, video elements, and more.

Whenever you make any changes, you can use the live preview on the right to see how your feed looks.

live feed editor tikto feed pro

To get started, I usually change the layout of the TikTok videos.

For that, you can use the convenient Layout option on the left.

open layouts tiktok feed pro

Now, you can see 4 different layouts for your TikTok feed:

  • Grid: Use a clean grid design to show lots of TikTok videos on your site at once
  • List: Display your videos in a single column – just like in the official TikTok app
  • Masonry: Keep the proportions of the TikTok posts and show them in multiple columns
  • Carousel: Make your website more interactive with a TikTok video slider

Just select the layout you prefer and click on Save.

layout options for tiktok feed pro

Once you pick your layout, you can also change options like the number of rows, columns, and more from here.

After you’ve finished setting up your feed’s layout, click on the Customize option in the top left.

customize button live feed editor tiktok feed pro

Now that we’ve set up the layout, let’s change the header that shows up above the TikTok feed.

You can get started by selecting the Header option.

open header options for tiktok

Using the option in the top-left, you can Enable or Disable your header entirely.

If you enable your header, you can choose which elements to show below. Just select the checkbox to the left of the header elements that you want to display:

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

Once you’ve selected your header elements, click on the Save button.

Plus, you can also customize how each of these elements will look on your Beaver Builder site.

For example, if you click on Profile Picture, you’ll see more options for that header element.

That means you can change the Size, Padding, or Margins of your profile picture.

customize header profile titok feed

Like before, remember to click on Save once you’re happy with how your header looks.

As you can see, it’s super easy to customize your TikTok feed using the visual customizer. You can now change the design of your video elements, buttons, and more.

Step 5: Add TikTok Feed to Beaver Builder

The good news is that you can start embedding your TikTok feed directly from the visual customizer.

Just click on Embed to get started.

embed tiktok feed live feed editor

Next, you’ll see a popup where you can pick the location of the TikTok feed. Normally, you can add the feed to a page or widget-ready area of your site directly from here.

Since we’re adding the TikTok feed to Beaver Builder, you can click on Copy instead.

copy shortcode tiktok feed pro

Now, it’s time to create a new Beaver Builder page to embed this TikTok feed.

You can do that by opening the Pages » Add New menu from your dashboard. Then, click on Launch Beaver Builder.

open beaver builder page

If you’ve already created a Beaver Builder page for your TikTok feed, you can go ahead and open it instead.

Opening Beaver Builder will show you the drag-and-drop page builder. On the right, you can see all the modules you can add to your page.

beaver builder editor

To continue, look for the Text Editor module on the right

Then, you can just drag the module and drop it into your page.

text editor module for beaver builder

You’ll then see a new popup where you can change the options for the module

To embed your TikTok feed, just paste the shortcode that you copied earlier into the popup.

After that, click on Save to confirm your changes.

add tiktok feed to text editor block

Just like that, you now have a new TikTok feed on your webpage. To publish this page, click on the Done button at the top and then select Publish.

Now, you should have a feed of TikTok videos on this Beaver Builder page, just like in my example below.

example of tiktok feed on beaver builder

And that’s it!

With the TikTok Feed Pro plugin, it’s really easy to add your TikTok video feed to Beaver Builder – even if you’re a WordPress beginner.

By adding TikTok feeds to your site like this, you can engage your visitors, boost your TikTok following, and grow your business.

Ready to add TikTok feeds to Beaver Builder? Get TikTok Feed Pro for your site today!

Want to add even more engaging content to your Beaver Builder site? Then check out our guide on how to add Instagram feeds to your Beaver Builder site.

More Social Media Guides and Tips

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.