Get started building your own beautiful TikTok Feed.
Learn how to get started with this guide below.
In this guide we will outline how you can get started building your own feed for TikTok. These guides are focused for Webflow users, but the principles can be applied to any development platform or approach that will support HTML attributes.
In general, you should understand the following simple concept - FeedSpring connects the structural <HTML> elements of your site with the live data from your favourite services. We do this through the use of attributes. This means that you can build any design with any layout you want, then add attributes to elements in order to render the live content.
To get started, select add a new feed from your dashboard and select the TikTok Feed.
From here, you can authorize your account and get started connecting it with FeedSpring. FeedSpring uses your platform's authentication & official APIs to ensure the most secure, fast and effective service for your feeds.
With FeedSpring, you can choose from two implementation types - Attributes or Widget. Our attributes method is currently available, however the widget builder will be coming soon. Remember to keep an eye out for the in application prompts and tips for further help along the way.
Add the FeedSpring script to the <head> tag of your project.
If you are using Webflow, you can add this to your page settings, or globally through your project settings.
<script src="https://scripts.feedspring.co/tiktok-attrs.js" async defer></script>
We will now begin to build the foundation of your feed by adding two core elements - the Feed & Post Wrappers.
The Feed Wrapper Attribute helps us identify where your feed is located on the page. This attribute should be attached to something that will wrap all your feed content. In most cases this might be a section (div) or the container <div>. You can also add a new div-block and use this to wrap the feed.
Simply add the attribute Name: feedspring and your unique attribute value Value: tiktok_xxxx
You will find these values from your build page in app.
Want a visual example? Check out this read-only demo.
Now we can add the Post Wrapper Attribute. Think of this as an individual item from one of your feeds - for example, an Instagram post, a Google review, a Youtube video. Inside this feed item is where we will have most of our content like images, captions, reviews etc.
Simply add the attribute Name: feedspring and your attribute value Value: post
Want a visual example? Check out this read-only demo.
In this section we will now add additional attributes to our elements to start rendering content. You can check the table for a full list of available attributes and learn more about each of them down below.
This table outlines all the attributes you can add to build your feed. For example, to display the description from a TikTok post, you will add the attribute Name: feed-field and the attribute value as Value: description
To show the video title from a TikTok post, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: title
To show the video description, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: description
Lorem ipsum dolor sit amet, consectetur adipiscing elit
To show the cover image / thumbnail, add the attribute to an <img> on your page.
Add the attribute Name: feed-field and add the attribute value Value: img
To display the actual video from TikTok, you will need to add your attribute to an <iframe>.
FeedSpring will automatically prepare the TikTok video embed inside this <iframe>. If you are using Webflow, you can add an embed block, and paste the following into the code-box.
<iframe feed-field="video" height="500px"></iframe>
Add the attribute Name: feed-field and add the attribute value Value: video
To link directly to the original post, add the attribute to a <link> on your page.
Add the attribute Name: feed-field and add the attribute value Value: link
To show the timestamp, add the following attribute to a <text-block> on your page. By default, your timestamp will be displayed like this - October 09, 2023.
Add the attribute Name: feed-field and add the attribute value Value: timestamp
Bonus tip: You can add a custom timestamp, by using the formats here. You can also use our pre-set format, which renders in the following format - 12 days ago. To add this pre-set, simply add an additional attribute Name: feed-timestamp and add the attribute value Value: from-now Add this attribute as well as the original attribute listed above.
To display the post like count, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: like-count
To display the post view count, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: view-count
To display the share count, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: share-count
To display the comment count, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: comment-count
To display the duration in seconds, add the attribute to a <text-block> on your page.
Add the attribute Name: feed-field and add the attribute value Value: duration
To add the profile avatar, add the following attribute to an <img> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: avatar
To add the profile name, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: name
To add the profile bio, add the following attribute to a <text-block> on your page. Please consider the length of your bio text and how this displays in your feed. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: bio
Lorem ipsum dolor sit amet, consectetur adipiscing elit
To link directly to the TikTok profile, add the following attribute to a <link> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: profile-link
To display the following count, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: following-count
To display the total like count across all videos, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: total-likes
To display the follower count, add the following attribute to a <text-block> on your page. It is recommended that this attribute is added to the Feed Wrapper instead of the Post Wrapper.
Add the attribute Name: feed-field and add the attribute value Value: follower-count
Once you have completed the core build, you can continue on to add Additional Settings to your feed - including naming your feed, choosing the number of images you want to display and adding whitelist domains.
You can can test your feed by publishing your website and reviewing the live link. If something doesn't look right and you need to troubleshoot errors, right click on your page and click 'Inspect', then navigate to the console tab at the top. Here we will display any errors we found with your setup. If you need assistance, reach out to our friendly team for help.
Powerful feeds ⚡️ for your Webflow sites.
