TikTok
Display TikTok videos with thumbnails, inline playback, engagement counts and profile data.
Use FeedSpring to display TikTok videos on your site, thumbnails, playable video, engagement counts, and profile information.
Feed ID prefix: tiktok_...
Render TikTok with
Attributes, add TikTok to any HTML page
React & Next.js, use the GraphQL API or attributes in a React app
Framer, use the TikTok component in Framer
GraphQL API, fetch TikTok data directly — see the query below
Post fields
In the GraphQL API, post fields are on each item in videos.nodes.
feed-field="img"
cover.url
image URL
The video thumbnail. Sets the src of an <img>.
feed-field="video"
embedUrl
derived embed URL
Inline video player. Sets the src of an <iframe> to the TikTok embed URL.
feed-field="link"
url
URL
Canonical TikTok link. Sets the href of an <a>.
feed-field="title"
title
string
Video title. Written with innerHTML.
feed-field="description"
description
string
Video description. Written with innerHTML.
feed-field="duration"
durationSeconds
number
Video length.
feed-field="view-count"
viewCount
number
View count, formatted with compact locale notation (e.g. 1.2K).
feed-field="like-count"
likeCount
number
Like count, formatted with compact locale notation.
feed-field="comment-count"
commentCount
number
Comment count, formatted with compact locale notation.
feed-field="share-count"
shareCount
number
Share count.
Profile fields
In the GraphQL API, profile fields are on the feed itself.
feed-field="avatar"
profile.avatar.url
image URL
Profile avatar.
feed-field="name"
profile.displayName
string
Profile display name. Written with innerHTML.
feed-field="bio"
profile.bio
string
Profile bio. Written with innerHTML.
feed-field="profile-link"
profile.url
URL
Link to the profile on TikTok. Sets the href of an <a>. See the known issue below.
feed-field="follower-count"
profile.followerCount
number
Total followers, formatted with compact locale notation.
feed-field="following-count"
profile.followingCount
number
Total accounts followed, formatted with compact locale notation.
feed-field="total-likes"
profile.likeCount
number
Total likes across all the account's videos, formatted with compact locale notation.
feed-field="verified"
profile.isVerified
boolean gate
Element is kept in the DOM if the account is verified, removed entirely if not. Use this to conditionally render a verified badge.
Inline video playback
TikTok has a dedicated video attribute that renders the video inline using TikTok's embed player. Apply it to an <iframe>:
FeedSpring sets the src to https://www.tiktok.com/embed/v2/{video-id}. The TikTok player handles all controls, audio, and fullscreen behaviour.
If you prefer to link out instead of embedding, use feed-field="link" on an <a> and show the thumbnail with feed-field="img". This is lighter-weight and faster to render.
Verified badge
The verified attribute works as a conditional gate. Place it on any element that should only show for verified accounts, and FeedSpring removes the element for unverified ones:
Known issue: feed-field="profile-link" does not currently work. The TikTok script registers the field with a trailing space, so only feed-field="profile-link " matches. A fix is in progress; until then, link to the profile with a static URL.
TikTok-specific notes
9:16 is native. TikTok videos are always portrait 9:16. Layouts that crop to square or landscape will look wrong. Respect the aspect ratio in your CSS.
titleanddescriptionmay be identical. TikTok uses both fields, often populated with the same value (the video caption). Most layouts use one or the other.Inline video loads the TikTok player. Using
feed-field="video"pulls in TikTok's embed script, which adds weight to the page. For performance-sensitive pages, use thumbnails with click-through links instead.durationis a raw number. Format it yourself if you want0:15style output.
Example
A video grid using the attributes delivery method:
GraphQL API
Fetch TikTok feeds with the GraphQL API. The feed returns TikTokFeedData, with items under videos.nodes.
TikTok feeds contain profile information and a list of videos.
Field notes
profile
Profile represented by the feed.
videos.nodes
Videos in the order configured by FeedSpring. The list is always present and may be empty.
url
Public TikTok URL for the profile or video.
embedUrl
URL intended for embedding the video.
embedHtml
Embed markup supplied for the video. Treat it as third-party HTML before inserting it into a page.
cover
Optional video cover image.
publishedAt
Publication time, or null when unavailable.
durationSeconds
Video duration in seconds.
Typical use cases
Creator homepage video grids
Brand campaign landing pages
Product reveal pages with inline playback
Event or launch highlight feeds
Next steps
Choose your setup to render TikTok
Feed Options for
limitandskip, and Filtering for dashboard filters
Last updated