How to Create a TikTok Widget for Your Website (2024)
Home Blog How to Create a TikTok Widget for Your Website (2024)

How to Create a TikTok Widget for Your Website (2024)

how to create a tiktok widget

Want to show a TikTok widget on your website?

Well, you’re not alone! Tons of people are looking for ways to integrate their site with one of the biggest social media platforms out there.

You can show bite-sized TikTok videos on your website’s sidebar or footer to engage visitors, boost your following, and even grow your business.

Let’s get started!

Why Add a TikTok Widget to Your Website?

With more than 1.7 billion total users, TikTok is a popular social network and a great place to find engaging video content.

Showing relevant TikTok videos on your website can be a great way to grab the attention of website visitors and keep them interested. This also helps your site’s SEO so you can rank higher in search engine results.

Plus, you can use TikTok widgets to show your own videos and convert your site traffic into views, likes, and social media followers.

With that, let’s get started and see how you can embed TikTok feed widgets in WordPress.

How to Add a TikTok Widget for Your Website (Step-by-Step)

Ready to create a TikTok widget for your website free of hassle? All you have to do is follow the simple steps below.

Step 1: Install and Activate TikTok Feed Pro

Unlike platforms like Wix or Weebly, WordPress comes with tons of plugins to easily add features to your site.

And when it comes to TikTok widgets, the best option is to use the TikTok Feed Pro plugin.

tiktok feed pro homepage

As the #1 TikTok feed plugin for WordPress websites, you can use this tool to create, customize, and embed TikTok content in just minutes!

On top of being easy to use, you even get a team of WordPress gurus to answer your questions and lend you a hand whenever you need it.

To get started, get TikTok Feed Pro here before installing and activating it on your website.

Not sure how? You can check out this beginner’s guide on installing WordPress plugins.

After the plugin is ready, you can move on to step 2 and create a widget.

Step 2: Create a New TikTok Widget

Now, you can use the plugin’s guided flow to create a TikTok video widget.

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

open live feed editor tiktok feed

In step 3, you can go ahead and connect this widget to your TikTok account so you can show TikTok videos on your site.

Step 3: Connect Your TikTok Account

You can now add your TikTok account as the source for your new TikTok widget. After adding the source once, you can freely reuse it for new widgets as well.

Ready? Click on the Add Source button.

tiktok feed pro add source

Next, you can click on the Connect with TikTok button to continue.

Doing this will open https://www.tiktok.com on your website where you can connect your account.

connect with tiktok

On the next page, the plugin will ask for read-only access to your TikTok account. This lets the plugin view your information and embed the videos on your website.

In fact, the plugin won’t be able to make any changes to your account at all. This means it’s completely safe!

To continue, you can click on the Authorize button here.

Just like that, you’ve added your account as a source for the TikTok Feed Pro plugin.

Now, simply select this account and then click on Next to select the source.

select your tiktok source

Just like that, you now have a new TikTok widget that’s connected to your TikTok account. In the next step, you can customize how it’ll look on your website.

Step 4: Customize Your TikTok Widget

To get started, TikTok Feed Pro will show you different templates that you can import for your widget.

Each template comes with a unique design that you can copy in just a single click. You get 6 different templates to choose from here:

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

To proceed, you can select a template and press the Next button.

select your feed template tiktok

You’ll then see your TikTok widget open in the visual customizer. On the left, you’ll see the options to change your header, load more button, layout, and much more.

There’s also a live preview of your widget on the right, which lets you track all of your changes in real-time.

live feed editor tikto feed pro

To get started, you can change how the TikTok videos are laid out on your widget.

Just select the Layout option on the left to continue.

open layouts tiktok feed pro

You’ll then see 4 different layouts that you can choose for your TikTok widget:

  • Grid
  • List
  • Masonry
  • Carousel

Let’s take a look at these layouts below:

layout options for tiktok feed pro

First, you have a grid layout that shows TikTok videos in square thumbnails with neat rows and columns. As a result, you can embed tons of videos at the same time.

example of tiktok video feed

Using the list layout, you can show your TikTok videos in a single column, just like on the official TikTok website or app.

list layout for tiktok example

Next, you have the masonry layout, which shows the TikTok videos in different columns. Plus, the video thumbnails will keep their original proportions.

masonry tiktok feed example

Finally, there’s the carousel layout that’ll show TikTok videos in a slideshow carousel. It’s a great way to make your site more interactive using a TikTok widget.

example tiktok carousel

After selecting a layout, click on Save to keep your changes.

Then, you can click on Customize to return to the main customization options once more.

customize button live feed editor tiktok feed pro

From the customization options, you can set up your TikTok widget’s header next.

For that, click on the Header option on the left.

open header options for tiktok

In the top left, you have the option to Enable or Disable your TikTok widget’s header.

Under it, you can use checkboxes to choose which of these header elements that you want to show:

  • Profile Picture
  • Name
  • Username
  • Description
  • Stats
  • Button
customize your tiktok header

Like before, click on Save after making the changes.

You can also click on any of these header options to customize them in detail. Plus, you can also use the remaining customization options to set your filters, button style, TikTok video elements, and much more.

Once you’re happy with your TikTok feed widget, click on Save once more.

Finally, you can move on to step 5 and add this TikTok feed widget to your site.

Step 5: Embed Your TikTok Widget

The plugin gives you 2 ways of embedding TikTok widgets on your website.

  • Add a TikTok widget to your webpage
  • Add a TikTok widget to your sidebar or footer

Not sure which option to pick? We’ll go through both of these methods below.

Add a TikTok Widget to Your Webpage

From your visual customizer, it’s super easy to start embedding this TikTok feed widget — no need to touch a single line of code.

To get started, click on the Embed button at the top.

embed tiktok feed live feed editor

You’ll then see a popup that shows all the ways you can embed your TikTok widget.

Before selecting an option, click on Copy to copy your widget’s shortcode.

copy shortcode tiktok feed pro

Then, you can use the buttons below to select the location of your TikTok widget.

For now, we’ll go with the Add to a Page option.

tiktok feed pro add to a page

Clicking on that will open a list of WordPress pages that are available on your website.

Just select a page from the list and hit the Add button to proceed.

select your page tiktok feed pro

You’ll then see the WordPress page open in the block editor, where you can embed the widget.

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

add block tiktok video feed

Using the search bar at the top, you can look for the “shortcode” widget.

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

shortcode block tiktok

Finally, you can paste the shortcode you copied earlier into the Shortcode block.

After you do that, the plugin will automatically embed your TikTok widget into this WordPress page.

shortcode for tiktok feed pro

As you can see, TikTok Feed Pro makes it easier than ever to showcase your TikTok widget — even if you’re new to WordPress.

If you open this page, you’ll see your videos displayed like in this TikTok embed example.

example of tiktok video feed

Now, let’s look at another way to embed TikTok widgets on your site.

Add a TikTok Widget to Your Sidebar or Footer

Like before, you can use the visual customizer to embed TikTok widgets on your website’s sidebar or footer areas.

First, navigate to the TikTok Feeds » All Feeds menu from your dashboard and click on the widget you just created.

open tiktok feed again

You’ll then see your social media widget open in the visual customizer once more.

To continue, you can simply click on the Embed button.

embed tiktok feed live feed editor

Doing that will open the popup with all the options to embed your TikTok widget.

Just like earlier, click on the Copy button on the popup.

copy shortcode tiktok feed pro

Now that you’ve copied the shortcode, you can choose where to embed the widget.

To add it to your sidebar or footer, select the Add to a Widget option here.

Next, you’ll see the widgets page of your site, where you can add, edit, or remove your WordPress widgets in just a few clicks.

Here, you can choose between two locations for your TikTok widget: Sidebar or Footer.

open sidebar panel

For this tutorial, we’ll go with the Sidebar panel.

You can now click on the plus (+) icon to add a new widget and then select the Shortcode option.

Finally, paste your TikTok widget’s shortcode into your new shortcode widget.

The plugin will then do the rest and automatically embed the widget on your site’s footer or sidebar panel.

paste shortcode for tiktok feed pro

All in all, TikTok Feed Pro lets you create the best TikTok widgets for your website and embed them in just a few simple clicks.

If you open your site now, you’ll see how your TikTok widget will look to your visitors.

tiktok feed sidebar example

And that’s it!

As you can see, it can be super easy to create a TikTok widget for your website if you’re using the right WordPress plugin.

With the help of TikTok Feed Pro, you can have a beautiful TikTok feed to engage visitors, boost your TikTok following, and help grow your business with ease.

Ready to embed TikTok feed widgets? Get your copy of TikTok Feed Pro here!

While you’re here, you can also check out our list of the best types of social media posts to engage your followers.

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

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.