Add TikTok Videos To Your Website

Hi guys in this video I’m going to show you how you can add your TikTok videos to your WordPress website using Elementor. If you find this blog useful please do hit that like and subscribe button and let’s get into the blog.

Okay guys the first thing you need to do is head over to the TikTok website. It’s important you do this on a pc or a laptop as it doesn’t work with a mobile phone.

Now you’re going to need to select which video you want to copy to your website. You may be tempted to copy the link on the right hand side and drop it into Elementor like you would a YouTube video. Well I’m here to stop you from making that mistake and giving up in frustration.

As this method doesn’t work with TikTok videos. It doesn’t matter how much you try this method will not work.

So how do you add them?

Well the first thing you need to do is go back to the TikTok website and this time you want to click on the embed icon. You’ll be generated an embed code and all you need to do is copy it. Now what you’re going to need to do is go back into Elementor.

I’m going to just quickly delete this box and in the search widget section on the top left-hand side. you’re going to type in shortcode. Now you’re going to need to drag that widget onto your page and in the box on the left hand side you’re going to have to paste in your shortcode. What you’ll notice is your video starts to load onto your page.

This can take a couple of seconds to do. So be patient. There you have it your videos ready to play. So what if you want to display more than one video on your page at a time? The best way I’ve found to do this is by clicking on the plus button at the bottom of the page and choosing an even structure.

This may sound strange but I’ll show you why. So I’m going to select this one with six columns but I’m only going to add three videos to this section.

On the left-hand side I’m going to change this from box to full width. I’m now going to start adding our shortcode widgets. Unlike before in the widget search box I’m going to type in shortcode and I’m going to drag and drop it into the very first column.

My next shortcode widget is going to go in the third column and then my third shortcode widget is going to go into the fifth column. 

Once you have added all your widgets start pasting in your short code. I’m using the same code for all three examples but when you add yours you will need to go and get the embed code from each video and paste each one into its own widget.

There you have it it’s as simple as that. We added our widgets into every other column because the embed code overlaps to the next one.

If we would have added them next to each other they would have overlapped.

So what do we do if we don’t want full-size videos on our page? All we want to show is our TikTok username and a few thumbnails. Well we can do that by going back to our profile on the TikTok website. Once there we need to click on the share icon next to our username.

Like before we need to click on the embed button and click on the copy code button. Now head back over to Elementor. In the search widget box on the top left-hand side type in HTML. You can also use the shortcode widget for this but I always find the HTML code works better. Now on the left hand side all you need to do is paste in your shortcode.

Wait a couple of seconds and your profile page will load.

That’s it for this blog guys I hope you found it useful. Don’t forget to hit that like and subscribe button for future tutorials. For more useful tutorials hit that notifications bell and check out the rest of my Tutorials. 

If you’ve got any questions hit me up in the comments box and I’ll see you in the next tutorial.