TikTokは規制をめぐる最近の問題があるものの、ますます人気を集めており、あらゆるブランドやビジネスが活用すべきプラットフォームです。
そこで今回は、このプラットフォームを最大限に活かしてブランドの収益を伸ばすために、どんなウェブサイトビルダーにもTikTok動画を埋め込む方法をご紹介します。
以下では、TikTok動画やTikTokメンションをウェブサイトに掲載して訪問者のエンゲージメントを高め、TikTokをUGC戦略の一部にする方法を解説します。
まずは、その流れを説明した短いインタラクティブ動画をご覧ください。
完全ガイド：EmbedSocialでウェブサイトにTikTokフィードを埋め込む方法
TikTok動画やTikTokメンション、その他あらゆる種類のコンテンツを埋め込むなら、その目的のために設計された専用のサードパーティツールを使うのが最適です。
その一つがEmbedSocialです。TikTokとAPIで直接連携しているため、公式の方法であらゆる種類のTikTok UGCを表示できます。
EmbedSocialアカウントを作成したら、EmbedSocialでTikTok UGC widgetを作成するのはとても簡単です。次の手順に沿って進めてください。
- vibe codingでwidgetを記述する
- TikTokソースを接続する
- TikTok widgetテンプレートを選ぶ
- AI widgetをさらにカスタマイズする
- AI widgetのコードをコピーする
- コードをウェブサイトに貼り付ける
ステップ1：vibe codingでwidgetを記述する
まずは、widgetをどんな見た目にしたいかを定義することから始めます。AIによるvibe codingツールは、自然言語の説明をもとにソーシャルウォールのたたき台を作成します。
ステップ2：TikTokソースを接続する
レイアウトが生成されたら、実際のコンテンツを取り込む必要があります。エディター上部の接続リンクをクリックして、TikTokプロフィールをプラットフォームに接続してください。
TikTokアカウントをEmbedSocialに接続する際は、（初回のみ）必要な権限の許可を求められます。その後、対象のアカウントを選択できます。
ステップ3：TikTok widgetテンプレートを選ぶ
次に、すぐに使えるwidgetテンプレートの一つを選びます。各SNSプラットフォーム向けに専用のテンプレートを用意していますので、対象のプラットフォームを選択するだけです。
ステップ4：AI widgetをさらにカスタマイズする
widgetの見た目に完全には納得できない場合は、AI widgetエディターにプロンプトを入力し続けることで、色を変えたり要素を追加したりと、見た目をカスタマイズできます。
ステップ5：AI widgetのコードをコピーする
ウェブページに戻る前に、「Embed」タブに移動して「Copy code」を押します。これだけです。多くの場合、必要なのはJavaScriptのコードだけなので、コーディングのスキルは不要です。
ステップ6：コードをウェブサイトに貼り付ける
最後に、お使いのウェブサイトビルダーに移動し、空のHTMLボックスやコンテナ、要素などを配置して、widgetのコードを貼り付けるだけです。
メモ： widgetは、SNSプラットフォームに新しいコンテンツが届くたびに自動で更新されるため、ウェブサイトは常に新鮮な状態を保てます。
動画ガイド：数秒でウェブサイトにTikTokフィードを埋め込む
要点だけ知りたい方は、ウェブサイトにTikTok動画フィードを埋め込む方法を解説したこちらの短い動画ガイドをご覧ください。
さまざまなウェブサイトビルダーにTikTokフィードを追加する方法
TikTokの投稿フィードをウェブサイトに追加する手順はお使いのビルダーによって異なりますが、適切な埋め込みコードやwidgetがあれば、数クリックで簡単に完了します。
公式の方法：ネイティブ機能でウェブサイトにTikTok動画widgetを埋め込む
実は、TikTokではプラットフォームのネイティブ機能を使って、ユーザー自身が埋め込み可能なwidgetを作成することもできます。ただし、いくつか大きな制限があります。
- widgetのテンプレートを変更できない
- タイトル、サブタイトル、CTAをカスタマイズできない
- widgetのカラースキームを変更できない
とはいえ、それでもネイティブ機能を使いたい場合の手順は次のとおりです。
ステップ1：TikTok公式の埋め込みページにアクセスする
TikTokはコンテンツを表示するためのソリューションを提供しています。このリンクからTikTokの埋め込みページにアクセスすると、埋め込みのプレビューを確認し、TikTokの埋め込みリンクをコピーできます。
ステップ2：埋め込みたいTikTokコンテンツの種類を選ぶ
現在は、特定の動画、プロフィール、ハッシュタグページ、サウンドページから選べます。埋め込みたいコンテンツの種類にチェックを入れるだけです。
ステップ3：空欄に該当するURLをコピーする
次に、ブラウザでコンテンツを開いてそのURLを見つけます。下部の矢印アイコンを押し、「Copy」をタップしてください。
ステップ4：URLを貼り付けて埋め込み可能なwidgetコードをコピーする
TikTokの埋め込みページに戻り、取得したURLを貼り付けます。次に「Get code」を押すと、TikTokの埋め込みコードと埋め込みのプレビューが表示されます。
ステップ5：ウェブサイトにTikTok動画を埋め込む
最後に、動画を埋め込みたいウェブサイトの該当ページに移動し、対応するHTMLブロックを追加して、TikTokの埋め込みコードを貼り付けるだけです。主要なウェブサイトビルダー別の手順は、上のセクションで解説しています。
前の手順で「Create your own」をタップして複数の動画を追加した場合、TikTokの埋め込み例は次のような見た目になります。
メモ： この手順は、埋め込みたいTikTokコンテンツの種類に関係なく同じです。動画、プロフィール、ハッシュタグページ、サウンドページのURLをコピーするだけです。
また、TikTok動画を1本だけ埋め込みたい場合は、特定の動画からすぐに「埋め込みコード」を取得する方法を示した開発者向けリソースも用意されています。
ヒント： 上記と同じ方法ですが、動画の共有メニューで「Copy」の代わりに「Embed」をタップするだけです。あとは、それをウェブサイトに貼り付けます。
なぜTikTokをウェブサイトに埋め込むべきなのか？
TikTokは単なる娯楽以上のものです。
月間アクティブユーザーが8億人を超えると報じられて以降、ブランドはこのプラットフォームのマーケティングの可能性に注目し始めました。
これほど多くのユーザーが毎日1時間近くアプリに費やしている中で、TikTok動画をウェブサイトに埋め込めば、そのエネルギーを取り込んでコンバージョンに変えることができます。
実際、ユーザーは1日平均52分をアプリの閲覧や動画制作に費やしているので、ぜひその場で自社の製品やサービスを宣伝しましょう。TikTokフィードをウェブサイトに埋め込もうと決めれば、次のようなメリットがすべて得られます。
- リアルタイムのコンテンツ更新：サイトとTikTokアカウントを同期し、新しい動画が自動で表示されるようにすることで、ウェブサイトを常に新鮮に保ち、訪問者を引きつけ続けます。
- ユーザー体験の向上：埋め込んだ動画でページに動き、音楽、ストーリーを加え、閲覧をより躍動的で楽しいものにします。
- UGCの収集とソーシャルプルーフの表示：ブランドにまつわる実際のユーザーとその体験を見せることで、即座に信頼性と信用を築きます。
- より幅広い層へのリーチ：TikTokの世界的なリーチを活用して若い層を引き寄せ、顧客基盤とTikTokフォロワーを拡大します。
- SEOの改善：滞在時間とエンゲージメントを高め、ウェブサイトが価値あるコンテンツを提供していると検索エンジンに伝えます。
- クロスプラットフォームでのプロモーション：ウェブサイトとTikTokプロフィールの間でトラフィックを誘導し、両方のチャネルを同時に強化します。
- 時間とホスティング容量の節約：動画をTikTokから直接埋め込むので、大容量の動画ファイルをアップロードしたりホスティングしたりする必要がありません。
- ハッシュタグキャンペーンの促進：キャンペーン動画を埋め込んで参加を促し、ブランドハッシュタグのトレンドを維持します。
総じて、TikTok動画を埋め込んでウェブサイトをライブなソーシャルハブに変えることで、最も若くて熱量の高いオーディエンスからの信頼を築けます。
なぜUGCプラットフォームにEmbedSocialを選ぶべきなのか？
TikTok動画を埋め込むための信頼できるオールインワンのソリューションが欲しいなら、EmbedSocialが最適です。これは、TikTok、Instagram、Facebook、YouTube、Googleをはじめとする主要なSNSプラットフォームの公式APIと直接連携する本格的なUGCプラットフォームです。この連携により、ソーシャルコンテンツを自動で収集、モデレーション、表示することが簡単にできます。
EmbedSocialが優れている理由は次のとおりです。
- 公式API連携：EmbedSocialはTikTokをはじめとするSNSプラットフォームと直接連携し、安定性・安全性に優れたリアルタイムのコンテンツ更新を実現します。
- 自動化された動画フィード：TikTokアカウントを一度接続すれば、新しい動画はすべて自動で同期されるので、手動での埋め込みは不要です。
- カスタマイズ可能なウェブサイトwidget：グリッド、カルーセル、ウォール、popupのレイアウトから選び、ウェブサイトのブランディングやスタイルに合わせてデザインできます。
- ショッパブルUGCフィード：収集したUGC投稿をすべて既存の商品・サービスページにリンクできるため、消費者の意思決定プロセスを効率化できます。
- すべてのネットワークからのUGC集約：複数のプラットフォームの動画、投稿、レビューを一つのダイナミックなフィードにまとめ、ウェブサイトを活気あるものに保ちます。
- モデレーションとコントロール：キーワードやタグベースのモデレーションツールでサイトに表示する内容をフィルタリングしたり、各投稿を手動で承認したりできます。
- クロスプラットフォーム分析：すべてのUGCソースのエンゲージメント、インプレッション、パフォーマンスを一つのダッシュボードで測定できます。
- 多拠点ブランドにも対応できる拡張性：複数のアカウント、キャンペーン、店舗のUGCを一か所で管理でき、重複や混乱が生じません。
EmbedSocialは、TikTok、Instagram、Facebook、YouTube、Googleといったソーシャルプレゼンスのあらゆる要素を一つにまとめます。散在するユーザー生成コンテンツ（UGC）を、エンゲージメント、SEO、信頼を手軽に高めるブランド体験へと変えます。
TikTokフィードとInstagramフィードの両方を含む統合widgetがあり、新しいコンテンツが公開されるたびに自動で取り込まれる様子を想像してみてください。TikTokでターゲットオーディエンス向けに新しい投稿をするたびに、それがwidgetにも表示されるのです。
ウェブサイトにTikTokフィードを埋め込む：5つのベストプラクティス
ウェブサイトにTikTokフィードを追加したいなら、その効果を最大限に引き出すためのいくつかのコツを知っておくとよいでしょう。
1. TikTokフィードのデザインをブランドと統一する
埋め込んだTikTok動画は、ウェブサイトの一部のように感じられるべきです。widgetの色、タイポグラフィ、レイアウトをサイトのデザインと合わせて、統一感のある体験を作りましょう。
💡 例： あるファッションブランドは、ホームページと同じパステルカラーのパレットを使ってTikTokカルーセルを埋め込んでいます。シームレスな視覚の流れにより、訪問者はページから離脱せず、探索を続けます。
2. パフォーマンスの高いTikTok動画を表示する
すべての動画でフィードを埋め尽くさないようにしましょう。最も再生数、コメント、シェアを生んでいるパフォーマンスの高いコンテンツを厳選してください。ブランドの個性を表す動画や、現在のキャンペーンを宣伝する動画を強調しましょう。また、ウェブサイトにTikTokウォールを追加するのもおすすめです。
例： あるコーヒーショップは、トレンドのレシピ動画や顧客のリアクション動画を表示するようにフィードをフィルタリングし、ウェブサイトを活気があり関連性の高いものに保っています。
3. モバイル対応に最適化する
TikTokの視聴者の多くはモバイルで閲覧するため、埋め込んだフィードが小さな画面にも完璧に対応するようにしましょう。自動的にサイズ調整され、読み込み速度の速さを維持するレスポンシブなwidgetを使ってください。これはTikTok SEO対策の大きな一部です。
例： あるオンラインブティックは、スマートフォンでもタブレットでも同じように美しく表示されるレスポンシブなグリッドフィードを追加し、セッション時間が25%延びました。
4. TikTokを他のソーシャルプルーフと組み合わせる
TikTok単体でもエンゲージメントを高められますが、Instagramの写真やGoogleクチコミなど他のUGCと組み合わせることで、さらに信頼性と信憑性が増します。統一されたソーシャルメディアフィードを使って、完全なブランドストーリーを伝えましょう。
例： あるスキンケアブランドは、TikTokのチュートリアル、Instagramのビフォーアフター写真、5つ星のGoogleクチコミを一つの鮮やかなページにまとめた、UGCミックスウォールを埋め込んでいます。
5. TikTokのコンテンツを定期的に更新する
古いままのフィードは、ブランドが活動していないと訪問者に思わせてしまいます。定期的な更新をスケジュールするか、EmbedSocialのAPIを通じてTikTokアカウントを直接接続し、新しい動画が自動で表示されるようにしましょう。
例： あるフィットネススタジオのライブTikTok widgetは、新しいワークアウトチャレンジで毎日更新され、最新の動画を見に戻ってくるリピーターを呼び込んでいます。
まとめ：TikTok widgetを埋め込んでウェブサイトをよりダイナミックに
ウェブサイトに命を吹き込み、訪問者のエンゲージメントを高めて安心させる本物のソーシャルプルーフを提供したいなら、TikTok動画の埋め込みを検討してみてください。
1本の動画の埋め込みコードをコピーしてサイトに貼り付ける制限の多いネイティブの方法を使うか、EmbedSocialのようなTikTok widgetを使うことができます。プラグインのインストールやコーディングの習得すら必要ありません。どこにでもすぐにTikTokウォールを埋め込めます。
EmbedSocialのTikTokフィードwidgetなら、最新の動画を自動で同期し、widgetの見た目をサイトに合わせてカスタマイズすることで、さらに一歩進んだ活用ができます。
今日からTikTok動画の埋め込みを始めて、認知度を高め、オーディエンスとつながり、ウェブサイトをTikTokプレゼンスの生き生きとした延長へと変えていきましょう。
EmbedSocialに今すぐ登録するか、7日間の無料トライアルをお試しください。
T
