動画共有アプリとして急速に存在感を増しているTikTok。若い世代を強力に引きつける力を持つTikTok動画をもっと活用したい、とお考えの方も多いと思います。
そこで今回は活用の幅を広げる第一歩として、TikTokブログやウェブサイトへの埋め込みを取り上げます。TikTokはどうやって埋め込むのか？、見やすい【TikTokまとめ】デザインとは？、そしてTikTokを埋め込むとどのようなメリットがあるのか？、あわせて解説します。
TikTok公式サイトから、一つ一つ動画の埋め込みコードを取得して、ブログやウェブサイトの編集画面に貼り付ける方法です。TikTokを埋め込む方法としては、これが最もシンプルなやり方で、埋め込みたい動画が少ない場合に向いています。
以下、ステップごとに見ていきましょう。
ブログやウェブサイトにTikTokを埋め込むためには、まずパソコンでTikTokのサイトを開きます。
TikTokのウェブサイト上で、埋め込みたい動画を開きます。筆者が使ってみたところTikTokのパソコン用サイトは動画の検索がしづらい印象でしたので、以下の3つの中からお好みの方法を使って動画を探してみてください。
一見面倒そうなのですが、スマホのほうが見たい動画に早くたどり着きやすいため最初に紹介します。
まずスマホ上で動画を再生したときにスクリーン右側に出てくるシェアボタンをクリックし、次にリンクのコピーボタンをクリックします。その後、メールやメッセージアプリなどでパソコンに送ります。
送られたURLをパソコン上でクリックすると、お気に入りの動画が表示されます（URLもパソコン用のURLに自動変換されます）。
埋め込みたい動画のユーザーIDを含むURLをリンクバーに入力し、該当のアカウントに表示された動画一覧の中から欲しい動画を見つけることができます。
下のURLを、@ユーザーIDを埋め込みたい動画をアップしているユーザーIDに変えて、リンクバーに入力してください。
https://www.tiktok.com/@ユーザーID
例えばこちらは、ユーザーIDに @tiktokjapan を入力した場合に表示されるページです。
ハッシュタグからも動画を検索ができます。こちらのURLをリンクバーに入力して、表示された関連動画の中から埋め込みたい動画を探します。以下のURLのタグ名の部分を該当するハッシュタグに変えてコピーし、リンクバーに貼り付けてください。
https://www.tiktok.com/tag/タグ名
例えばハッシュタグ「犬」を入力するとこのような画面が表示されます。
埋め込みたい動画が見つかったらクリックして、動画再生画面に移動します。
この画面上右側に表示されるボタンの中から、埋め込みマーク</>のボタンをクリックします。
ボタンをクリックすると、埋め込み用コードが表示されますので、「コードをコピー」をクリックします。
これで埋め込みの準備が完了しました。コピーしたコードの情報をキープするために、途中で他の動作をせずに、埋め込みたいブログやウェブサイトの作成ページに移りましょう。あるいは、メモ帳などにコードを貼り付けておきましょう。
コピーしたコードを、ブログやウェブサイトの作成画面に貼り付けます。以下の画面は、ワードプレスの場合です。テキストタブを選択して、本文の中に貼り付けます。
これで埋め込み完了です。埋め込んだTikTok動画はブログなどでこのように表示されます。
@tiktokjapan夏祭りや花火など素敵な夏の思い出を投稿して、##TikTok夏祭り を楽しもう！♬ オリジナル楽曲 – TikTok Japan
一つ一つの動画をウェブサイトに埋め込み表示するだけではなく、たくさんの動画を集めたい、また、デザインにも凝りたい、という場合は、専用の埋め込みツールの利用をお勧めします。公式ページから1つ1つ埋め込みコードを取得するよりも、効率的に動画を集められるほか、ウェブページ上でのデザインのオプションが豊富であったり、さまざまな付加機能が付いているためです。
TikTok専用のツールのほか、他のSNSの動画や写真も一緒に埋め込めるツールもあります。有料のツールもリーズナブルな価格のものがあるので、プロのWebデザイナーだけでなくブロガーなど一般の方でも利用しやすいと思います。
SNS埋め込みツールEmbedFeedを使うと簡単にTikTokをウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します
まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、7日間無料トライアルを始めて、以下のステップに進んでください。
ログインすると、TikTokをソースとして追加するためのソースセクションに移動します。
ソース（収集元）選択画面で、TikTokを選びます。
みなさんのTikTokアカウントとEmbedSocialの接続を行います。もし１つの動画のみを埋め込みたい場合は、動画のURLを入力するだけでOKです。
ここではTikTokアカウントにあるたくさんの動画を収集するため、アカウントに接続してみましょう。TikTokを接続するをクリックすると、皆さんのTikTokアカウントとEmbedSocialを接続する画面に進みますので、指示に従って進んで下さい。
接続が完了すると、TikTokアカウントの選択画面に戻りますので、表示されたアカウントから動画を収集したいアカウントを選択して、次へをクリックします。
TikTokを埋め込むためのデザインテンプレートを選びます。テンプレートを使うボタンをクリックして選んでください。
ウィジェット（TikTokの埋め込みパーツ）の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
注：コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。
ウェブページのコードを編集できるプラットフォームを使用している場合、TikTokウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
以上で設定は完了です。以下の様にウェブサイトにTikTokが表示されます。
EmbedFeedの他にも、ワードプレスのプラグインの中にTikTokが埋め込めるものもあります。詳しくはそれぞれのページでご確認ください。
お気に入りのTikTokをブログやウェブサイトに埋め込んだあとは、効果的な見せ方を検討してみましょう。ここでは先ほどご紹介したツールの一つ「エンベッドソーシャル」を使って、【TikTokまとめ】のデザイン例をいくつかご紹介します。
こちらは、動画のサムネイルと、テキストの冒頭の部分が整然と並んだデザインです。必要な情報が一覧できるので、しっかりと、堅めな印象を与えるウィジェット（ウェブサイト上の部品）になっていますね。
こちらは、インスタグラムのウォール風のデザインです。文字がない分ビジュアル的なパワーが増すので、ソーシャルメディアウォール（SNSの壁紙）として使うと、集合体として集めた動画を表現しやすく、独自の世界観が伝わりやすくなる印象です。
こちらは、動きのあるデザインです。ブログやウェブサイト上で動きのあるウィジェットがあるとぱっと目を引き、クリックしたくなるものです。ページ訪問者の滞在を長くしつつ、しかもたくさんの動画を紹介しやすいというメリットがあるデザインです。
ところで、TikTokを一か所にまとめられるということ以外に、TikTokをブログやウェブサイトに埋め込むとどんなメリットが考えられるのでしょうか。
WEBサイトの訪問者に対し、 TikTokで積極的な情報発信を実施していることをアピールできます。 動画を一覧で表示させることで内容により興味を持たせることができ、 サイト上からTikTokへの流入を増加させ新たなフォロワーやファンの獲得に役立てることができます。
近年、SNS上での広告が嫌われる傾向があると言われています。そのような状況の中、SNSを通じて自社の商品やサービスをどのようにアピールすればよいのか悩んでいらっしゃる方も多いかもしれません。その悩みを解決する一つの方法が、一般ユーザーが作ったコンテンツUGC（ユーザー生成コンテンツ）で商品やサービスを紹介する手法です。インスタグラムのハッシュタグキャンペーンなどがその一例です。ユーザーが商品やサービスを自由に使ったり楽しんだりしているTikTok動画を集めれば、広告らしさを出すことなくアピールできるUGCツールになることが期待できます。
ホームページ上にTikTokを埋め込むことで、ページでの滞在時間を伸ばす効果が期待できます。動画が一覧表示されていることで、ディスプレイをスクロールしながら動画を探す行動を誘発しやすいためです。またTikTok動画がきっかけで他のページを見るなど回遊も促しやすくなります。TikTokが皆さんのブログやホームページに読者をひきつけるお手伝いをしてくれる、というわけです。
TikTokは利用者が急増しているSNSですが、NTTドコモ モバイル社会研究所が実施した「スマホ・ケータイ所有者のSNS利用動向」（2021年1月調査）によれば、TikTokの利用者率は他のSNSと比較するとまだ多くなく、さらに主な利用者は若い世代です。TikTokに投下したコンテンツをウェブサイトに埋め込めば、TikTok非利用者にコンテンツを届けることができ、そこから新たなフォロワーやファンを獲得する機会にもなるでしょう。
私たちの製品「EmbedSocialエンベッドソーシャル」は、TikTok APIに対応、TikTokビジネスアカウントから自動で動画を収集し、ウェブサイトやブログに埋め込み可能なツールです。
TikTok、Instagram、Youtube、Facebook、Pinterest、X（Twitter）をひとつにまとめて、ウェブサイトに埋め込み表示した例がこちらです。
コード不要でSNSの動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。
TikToKや、その他SNSを活用したマーケティングやPRにご興味のある方は、ぜひ一度お問い合わせください。
