近年、SNSの中でも特に勢いのあるTikTokは、今や個人だけでなく企業の情報発信ツールとしても活用されるようになってきました。
Webサイト上でも「TikTokの投稿を表示したい」「SNSと連携して情報発信力を高めたい」といったニーズが高まっています。特にモバイルファーストな時代においては、TikTokのような縦型動画が1つあるだけでも十分に目を引くコンテンツになります。
そこで今回は、TikTokが公式に提供している埋め込み機能「TikTok Embeds」を使って、投稿動画をWebサイトに表示させる方法を調査しました。
TikTok Embedsのページで実際の表示画面を簡単に確認することができるので、動画やプロフィール画面の埋め込みを検討している方はぜひ参考にしてみてください！
TikTokの投稿をWebサイトに表示させる準備段階として、TikTok公式が提供している「TikTok Embeds」を活用する方法があります。このページにアクセスすると、埋め込みの形式やレイアウトを確認でき、埋め込み用のコードを取得することができます。
TikTok Embedsのページにアクセスします。
埋め込みパターンは「基本の埋め込み」「独自に作成」の2つありました。
ひとまず「基本の埋め込み」を選択してみます。すると「動画」「プロフィール」「ハッシュタグ」「楽曲」の4つの項目が選べる画面が表示されます。
それぞれの項目に応じて、表示される内容やレイアウトが異なるため、目的に合った形式を選ぶことで、より効果的にTikTokの動画をサイトに組み込むことができます。
それでは、ひとつずつ表示を確認していきましょう！
「動画」にチェックを入れ、TikTokから表示させたい動画のURLを貼り付けます。
URLはアドレスバーのURLでも、動画の右側にある「リンクをコピー」で取得したリンク、どちらから取得しても大丈夫です。
↓TikTok Embedsのページに戻り、URLを貼り付けると動画の表示イメージが反映されました。
さらに、Webサイトに表示するため、「下のコードをコピーして貼り付ける」からコードをコピーします。WebサイトのHTMLを直接編集できる場合はコピーしたコードをそのまま表示させたい位置に貼り付けします。
本ブログは、WordPressを使用しているため、ブロックエディタの「カスタムHTML」を追加し、コピーしたコードを貼り付けると・・・
@tiktokjapan 2024年TikTokで最も活躍したクリエイターを表彰する #TikTokAwardsJP2024 開催決定🏆 ノミネート61組を発表★ 今年の「Creator of the Year」は誰の手に？ ユーザー投票は11月17日まで毎日投票可能！ あなたが最も活躍したと思うクリエイターにぜひ投票を😉
♬ オリジナル楽曲 - TikTok Japan - TikTok Japan
TikTok Embedsの表示と相違なく反映されました！
TikTok Embedsを使うことで、コーディングの知識が無くても実際の表示の確認が手軽に出来るということがポイントですね！
縦型の動画が画面いっぱいに表示されるため、特にスマートフォンで閲覧するとやはりインパクトを与えることができます。
また、埋め込んだTikTok動画には再生ボタン（▶）が表示されていますが、実際にはページをスクロールして動画が画面に表示されると、自動で再生が始まります。この場合、音声はミュートになっているため、ユーザーに突然音が出て驚かせるような心配はありません。ボタンを操作すると音声付きで動画が再生されます。
同じ要領でプロフィールも表示してみます。
TikTokのプロフィール（アカウント）のURLをコピーして、TikTok Embedsの枠の中に貼り付けます。表示確認が出来たら、先ほどと同様にコードを取得してWordPressのブロックエディタに反映します。
@tiktokjapan
こちらもイメージ通りに表示されました（簡単・・！！）
プロフィールの埋め込みでは、アカウント名やフォロワー数、アカウントの説明文に加えて、投稿動画が横一列に並んで表示されます。横にスクロールバーが表示されるレイアウトになっているため、複数の動画があることが一目で分かります。
先ほど紹介した動画1件を埋め込む形式では、その動画が自動再生されていましたが、この場合は少し仕様が異なります。初期状態では、一番左に表示された動画だけが再生されており、マウスをホバーすると、該当の動画に切り替わって再生が始まり、繰り返し再生される仕組みになっています。
また、TikTokのプロフィール画面でピン留めされた動画があっても、埋め込んだときの表示では投稿日時が新しい順に並び替えられ、ピン留めの順序は反映されないことも分かりました。
次に、埋め込みタイプを「ハッシュタグ」にしてみます。TikTokで特定のキーワードをハッシュタグ検索し、そのURLをTikTok Embedsに貼り付けると、該当ハッシュタグの投稿がプロフィールと同様のカード型レイアウトで表示されます。
例えば、イベントやフェスなどの盛り上がりをリアルタイムでPRしたいとき、来場者の投稿を表示することで、リアルな参加感や熱気を伝えられます。ユーザーが関心のある投稿をすぐに見つけやすくなり、より効果的な情報発信が可能です。
また、ブランドや商品のキャンペーンをアピールしたいときにも、ユーザーのハッシュタグ投稿を活用することで、参加型のコンテンツ展開ができファンとの繋がりを強化できます。
同じ要領で、特定の「楽曲」付きの動画を表示させることができます。
表示レイアウトはプロフィール埋め込みと同様で、アカウント名やフォロワー数、動画が横並びに表示される形式です。ただし、こちらでは動画が「いいね数（ハート数）」の多い順に並んでいるので、人気のある投稿が目立つ構成になっています。
基本の埋め込みについては、以上です。続けて、「独自に作成」の表示を確認してみます。
TikTok Embedsのページに戻り、「独自に作成」の方をクリックすると、動画リンクを入力できるポップアップ画面が表示されます。複数の動画を設定する場合は、URLをカンマ（,）で区切って貼り付けます。
すると・・・動画が、カード型レイアウトで表示されました！
表示の確認が取れたら、「コードをコピー」し、Webサイトに貼り付けるだけです。
通常、動画の表示順を変えるには埋め込みコードを直接編集する必要がありますが、TikTok Embedsを使えば画面上で簡単に並び替えができ、あとはコードをコピーするだけでOKです。HTMLを手動で書き換える手間が省けます。
TikTokの投稿をWebサイトに表示することで、視覚的に訴求力のあるコンテンツを簡単に追加できます。
動画コンテンツはユーザーの滞在時間を延ばし、離脱率の低下にもつながるため、サイトのパフォーマンス向上にも効果的です。
また、TikTokはアカウントがなくても視聴可能なので、誰でも気軽に再生できます。動画からアカウントページへの導線も自然に作れるため、ブランドや商品の認知拡大にも繋がります。
他にも、
このようなメリットが考えられます。
様々なメリットがありますが、注意点についても考えなければなりません。
例えば、動画が削除されたりアカウントが停止された場合、サイト上でも表示されなくなります。また、読み込み状況によっては動画がうまく表示されないケースもあります。実際、この記事を書いている時点でも、ハッシュタグ投稿の表示が不安定になる場面が見受けられました。
さらに、表示速度に影響を及ぼす可能性もありますので、こうしたリスクを踏まえた上で運用する必要があります。
今回は、TikTok公式が提供する「TikTok Embeds」を使って、動画の埋め込み方法や表示形式の確認手順についてご紹介しました。
動画を埋め込むことで、視覚的に訴求力のあるコンテンツを提供でき、ユーザーの興味・関心を引きつけることができます。TikTok Embedsは、手軽に埋め込み用のコードを取得できるうえに、様々なタイプの表示形式や並び替えといったカスタマイズも可能です。表示の不安定さなどに注意しつつ、サイトの目的やターゲットに合わせて上手に活用していきましょう。
TikTokおよびTikTokロゴは、ByteDance Ltd.（バイトダンス エルティーディー.）またはその関連会社の商標または登録商標です。
