Embedding TikTok Content in Your WordPress Website

TikTok is a big deal, you know it, and we know it. Being No. 6 among global social networks by sheer size is no laughing matter, so it would make perfect sense for you to want to embed videos from TikTok into your WordPress website.

The good news is that WordPress lets you easily insert a video into any of your WordPress pages (or posts). A TikTok feed, on the other hand, needs a little bit more work.

Let’s hop in and tackle both scenarios!

Two No-Hassle Methods to Embed TikTok Videos

1. Copy in the TikTok URL

This first method is straightforward and simple – visit the Tiktok video in question in the browser, copy its URL, and paste it into the WordPress post or page you wish.

When the URL is pasted into the edit screen, WordPress will preview the video directly in the post editor. Save the page and load it in your browser to ensure that the TikTok video is working correctly.

2. Using the TikTok Block/WordPress Widgets

On the same WordPress editor screen, click ‘+’, and search ‘TikTok’ to add the block. Add in this block, paste the video URL in the block options, and as before, the video will be immediately previewed.

Similarly, if you want TikTok videos to show in the sidebar, widgets can be used to achieve exactly that. Under ‘Appearance’, then ‘Widgets’, select the ‘Text’ widget to be added in the sidebar. In the text area of the widget, paste the URL we copied earlier. Save the widget settings, and you’re good to go.

Use a Plugin to Display TikTok Feed in WordPress

Neither of the above methods can display a feed of your latest TikTok videos in WordPress, which is where the QuadLayers plugin comes in. Install and activate the plugin, and then locate ‘TikTok Feed’. Here, in ‘Feeds’, you’ll notice that the plugin displays a placeholder TikTok feed. The ‘+Feed’ option will let you add in your TikTok feed here and will display a popup for you to finish creating the feed with either a #hashtag or a username from TikTok.

There’s a variety of options to display the videos the way you like – ‘Masonry’ for portrait videos, ‘Gallery’ for square thumbnails, and a choice of the maximum number of videos and columns to display so that the feed looks sleek and gels well with the rest of the page.

Copy the shortcode you see here and paste it into the page or post you wish. To do this, you begin by clicking on ‘+’ in the content editor, searching for ‘shortcode’, and adding in the shortcode widget. Thereafter, you can paste in the shortcode and save it.

If you load up the page, there will be a ‘View on TikTok’ button along with the video feed you just inserted, and clicking on it will take you to the right feed on TikTok. If you don’t want this button to be displayed, you can edit the feed-in post editor. Open up the editor and to the left, look for ‘Button’, click on it, and disable the checkbox that says ‘TikTok button’, and the button will no longer appear. Further settings you can change include:

• ‘Popup options’ that control the popup behavior when clicking on a video in the gallery.
• The ‘Video’ tab where you can tweak the feed to your liking, deciding whether controls are displayed, how autoplay behaves, or even how much space needs to be inserted between each thumbnail.

And just like in the regular method, you can also use this shortcode to show the TikTok feed in a sidebar widget. Instead of pasting the TikTok video URL into the ‘Text’ widget as we did before, we just need to paste the shortcode, click ‘Save’, and the TikTok feed will be displayed neatly within the sidebar.

That concludes our tutorial on all the different ways to insert TikTok content into your WordPress site and to do it well. Meet us back here at Vipe Studio for even more useful how-tos and tips!

More on The Topic

• Enhancing User Interaction on WordPress Sites with Innovative Design
• Custom WordPress Themes: Crafting Unique Digital Identities for Businesses
• Navigating the Future of Web Design with WordPress at the Helm
• The Advantages of Custom WordPress Themes for High-Performance Websites
• Unlocking the Full Potential of Gutenberg for Corporate Website Design