TikTok ←→ WordPress: How to Embed a TikTok Feed in WordPress

TikTok ←→ WordPress: How to Embed a TikTok Feed in WordPress

Looking for a way to add a TikTok WordPress feed so that you can display an automatically updated feed of videos from a TikTok hashtag or username?

TikTok is a newer social network that specializes in 15-second videos. Many of the videos have been known to feature dances, music, lip-syncing, and karaoke. It’s also especially popular with teenagers.

With the free plugin that we’ll show you in this post, you can easily add one or more TikTok feeds that pull content from either a hashtag or a specific TikTok account. You’ll also be able to configure lots of settings for how your feed functions, such as how many videos to display and whether or not to show like counts.

How to add a TikTok WordPress feed to your website

To add a TikTok WordPress feed, you can use the free QuadLayers TikTok Feed plugin, which is supported by a reputable team of developers that has plans to develop and support the app far into the future.

Here’s how to set everything up…

1. Install the plugin from WordPress.org

To get started, install the plugin on your WordPress website. Make sure you activate the plugin as well. If you’re not sure of the best method, then follow our guide.

2. Create or edit a feed

After activating the plugin, you’ll find the TikTok Feed tab in your WordPress dashboard. Go to TikTok FeedFeeds.

The plugin creates a default feed for you to begin with, but you can also make a completely new one. Either click the Edit button for the previously created feed or click the +Feed button.

edit the feed

3. Configure the feed settings

Once your feed is ready, you can edit the feed settings.

First, you need to choose what content to include.

In the General tab, choose either a hashtag or username to pull videos from:

  • Hashtag – the plugin will pull any content that has that hashtag, regardless of which user account it comes from.
  • Username – the plugin will just display a feed of the specific user’s latest posts.

Type in the hashtag or username in the field below. Then, select a masonry or gallery format, along with the number of videos and columns to display.

Note: Showing a hashtag is a great idea for industry-related content. However, you’ll have to keep an eye on the feed, since it could result in unrelated or inappropriate content being shown on your website.

edit general settings for TikTok WordPress

In the Video tab, choose the desired video type, if you’d like to display video controls, and if you want autoplay to occur.

The standard video display spacing is 10 and the radius is 0, but you can adjust these if they don’t look good on your site. You can also have a video mask and color.

edit feed video

Also in the Video tab, select whether or not you’d like to show the number of video likes and comments.

Click the Save button once you’ve made changes.

likes

The Popup tab has settings for what the videos look like when clicked on. For instance, you may want the videos to appear in a popup window when clicked on.

There are also checkboxes for showing user profiles for the videos, the text that goes with the video, the likes, and comments. The final setting asks for the alignment of the popup video.

Again, we recommend testing out how these settings look on your own website. In general, the default settings have looked nice during our testing.

Click the Save button to proceed.

popup for TikTok WordPress

The last tab is titled Button. It’s for giving your site visitors a clickable button to see the videos on TikTok instead of your website.

Remove the button if you’d rather people remain on your site. You can also change the button text if you plan on keeping it. The other settings affect the button color and hover color.

Click the Save button once you’ve made your choices.

button making for TikTok WordPress

4. Embed your feed to display it on your site

Once your settings are ready, you’re ready to embed it on your site at the spot where you want your feed to appear.

To do that, go back to the Feeds page.

To embed it on a page or post, copy the shortcode associated with that feed.

copy the code for TikTok WordPress

Navigate to a new or published WordPress post or page (or a widget, if preferred).

Using the Gutenberg editor and its blocks, search for the Shortcode block. Select and insert the Shortcode block wherever you want on the post or page.

shortcode button

Paste the shortcode that you copied from the Feeds tab into the Shortcode block field.

paste shortcode

Once you publish or update the page, you should see your TikTok feed on the front-end of your site.

5. Test your TikTok WordPress feed

To finish things out, you’ll want to open the post or page where you added your feed and play around with it to make sure everything is working.

Our example uses a sample page, but it comes out exactly the way we wanted.

All #wordpress hashtags from TikTok now appear on this page, in a masonry, three-column format.

example frontend for TikTok WordPress

Scrolling over a video reveals the like and comment counts. We also see the number of views per video.

scroll over

After clicking the video, it reveals a larger popup window so that your visitors see the majority of the post and can watch the video with audio. There’s a link on each popup window to view this post on the actual TikTok website.

popup for TikTok WordPress

Alternative: Use the block editor to embed individual TikTok videos

You may notice that the WordPress block editor comes with its own TikTok block.

The block isn’t as versatile as the plugin, but it allows you to embed one TikTok video per block – not a regularly-updating feed like the plugin allows. So, if you have a TikTok video that relates to a blog post, feel free to try this out.

Warning: The block hasn’t been that reliable for me during testing. I do suggest trying it out on your own website, because it may work better for you. However, a few times I’ve only seen blank white boxes instead of the videos.

To use it, search for the TikTok block in the editor:

shortcode - TikTok WordPress

Copy an individual TikTok video URL and then paste that URL into the TikTok block field.

Click on the Embed button.

TikTok url

This should present the video and additional information like the username, hashtags, and description.

But if you see something like the following, the built-in TikTok block may not be the ideal solution for you.

frontend test - TikTok WordPress

Do you plan on adding a TikTok WordPress feed?

TikTok isn’t for everyone, but that’s often how every social network was seen during the growth stages.

Yes, TikTok is mainly being used for short music-based videos by teenagers. However, there are marketing benefits to engaging this demographic and finding ways to include short, fun videos on your website.

If you’re creating content on TikTok, adding a feed to your website also gives you a great opportunity to enhance your social media strategy.

Do you still have any questions about how to add a TikTok feed to WordPress? Let us know in the comments and we’ll try to help!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Keep reading the article at ThemeIsle Blog. The article was originally written by Joe Warnimont on 2020-07-23 06:39:17.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top