• 投稿日 2020/07/23
  • 最終更新日 2024/01/16

TikTokをブログやウェブサイトに埋め込む方法とTikTokまとめデザイン事例

動画共有アプリとして急速に存在感を増しているTikTok。若い世代を強力に引きつける力を持つTikTok動画をもっと活用したい、とお考えの方も多いと思います。
そこで今回は活用の幅を広げる第一歩として、TikTokブログやウェブサイトへの埋め込みを取り上げます。TikTokはどうやって埋め込むのか?、見やすい【TikTokまとめ】デザインとは?、そしてTikTokを埋め込むとどのようなメリットがあるのか?、あわせて解説します。

TikTokから埋め込みコードを取得して埋め込む方法

TikTok公式サイトから、一つ一つ動画の埋め込みコードを取得して、ブログやウェブサイトの編集画面に貼り付ける方法です。TikTokを埋め込む方法としては、これが最もシンプルなやり方で、埋め込みたい動画が少ない場合に向いています。
以下、ステップごとに見ていきましょう。

パソコンでTikTokのウェブサイトを開く

ブログやウェブサイトにTikTokを埋め込むためには、まずパソコンでTikTokのサイトを開きます。
TikTok-desktop-screenshot

埋め込みたいTikTok動画を探して開く

TikTokのウェブサイト上で、埋め込みたい動画を開きます。筆者が使ってみたところTikTokのパソコン用サイトは動画の検索がしづらい印象でしたので、以下の3つの中からお好みの方法を使って動画を探してみてください。

スマホでTikTok動画のURLをコピーしてパソコンに送信し動画を開く

一見面倒そうなのですが、スマホのほうが見たい動画に早くたどり着きやすいため最初に紹介します。
まずスマホ上で動画を再生したときにスクリーン右側に出てくるシェアボタンをクリックし、次にリンクのコピーボタンをクリックします。その後、メールやメッセージアプリなどでパソコンに送ります。

send-link-from-phone-to-pc

送られたURLをパソコン上でクリックすると、お気に入りの動画が表示されます(URLもパソコン用のURLに自動変換されます)。

ユーザーIDで動画を探して開く

埋め込みたい動画のユーザーIDを含むURLをリンクバーに入力し、該当のアカウントに表示された動画一覧の中から欲しい動画を見つけることができます。
下のURLを、@ユーザーIDを埋め込みたい動画をアップしているユーザーIDに変えて、リンクバーに入力してください。

https://www.tiktok.com/@ユーザーID

例えばこちらは、ユーザーIDに @tiktokjapan を入力した場合に表示されるページです。
TikTok-id-search

ハッシュタグから動画を開く

ハッシュタグからも動画を検索ができます。こちらのURLをリンクバーに入力して、表示された関連動画の中から埋め込みたい動画を探します。以下のURLのタグ名の部分を該当するハッシュタグに変えてコピーし、リンクバーに貼り付けてください。

https://www.tiktok.com/tag/タグ名

例えばハッシュタグ「犬」を入力するとこのような画面が表示されます。
TikTok-tag-search

埋め込みコードをコピーする

埋め込みたい動画が見つかったらクリックして、動画再生画面に移動します。
この画面上右側に表示されるボタンの中から、埋め込みマーク</>のボタンをクリックします。
click-embed-button-for-tiktok-video
ボタンをクリックすると、埋め込み用コードが表示されますので、「コードをコピー」をクリックします。
copy-embed-code- of-tiktok-video
これで埋め込みの準備が完了しました。コピーしたコードの情報をキープするために、途中で他の動作をせずに、埋め込みたいブログやウェブサイトの作成ページに移りましょう。あるいは、メモ帳などにコードを貼り付けておきましょう。

ワードプレスなどのウェブサイト制作ツール上でコードを貼り付ける

コピーしたコードを、ブログやウェブサイトの作成画面に貼り付けます。以下の画面は、ワードプレスの場合です。テキストタブを選択して、本文の中に貼り付けます。
embed-tiktok-code-in-wordpress
これで埋め込み完了です。埋め込んだTikTok動画はブログなどでこのように表示されます。

@tiktokjapan夏祭りや花火など素敵な夏の思い出を投稿して、##TikTok夏祭り を楽しもう!♬ オリジナル楽曲 – TikTok Japan

SNS埋め込みツールを使ってTikTokを埋め込む方法

SNS埋め込みツールとは

一つ一つの動画をウェブサイトに埋め込み表示するだけではなく、たくさんの動画を集めたい、また、デザインにも凝りたい、という場合は、専用の埋め込みツールの利用をお勧めします。公式ページから1つ1つ埋め込みコードを取得するよりも、効率的に動画を集められるほか、ウェブページ上でのデザインのオプションが豊富であったり、さまざまな付加機能が付いているためです。

TikTok専用のツールのほか、他のSNSの動画や写真も一緒に埋め込めるツールもあります。有料のツールもリーズナブルな価格のものがあるので、プロのWebデザイナーだけでなくブロガーなど一般の方でも利用しやすいと思います。

SNS埋め込みツールEmbedFeedを使うと簡単にTikTokをウェブサイトに埋め込み・表示することができます。以下にそのステップをご紹介します

embedsocial

UGC活用ツール
- エンベッドソーシャル -

7種類以上のSNSから投稿を収集してウェブサイトで活用。初期費用なし・クレジットカード決済可能

無料トライアル

ステップ1: EmbedFeedアカウントの作成

まずスタートする前に、EmbedFeedアカウントを持っていることを確認してください。まだお持ちでない場合は、7日間無料トライアルを始めて、以下のステップに進んでください。
ログインすると、TikTokをソースとして追加するためのソースセクションに移動します。

ステップ2: 収集元プラットフォームとしてTikTokを選ぶ

ソース(収集元)選択画面で、TikTokを選びます。
embedfeed-select-platform-tiktok

ステップ3:TikTokアカウントに接続するか動画のリンクを入力する

みなさんのTikTokアカウントとEmbedSocialの接続を行います。もし1つの動画のみを埋め込みたい場合は、動画のURLを入力するだけでOKです。
ここではTikTokアカウントにあるたくさんの動画を収集するため、アカウントに接続してみましょう。TikTokを接続するをクリックすると、皆さんのTikTokアカウントとEmbedSocialを接続する画面に進みますので、指示に従って進んで下さい。
embedfeed-select-source-type-tiktok

ステップ4:TikTokアカウントを選択する

接続が完了すると、TikTokアカウントの選択画面に戻りますので、表示されたアカウントから動画を収集したいアカウントを選択して、次へをクリックします。
embedfeed-select-source-type-tiktok (1)

ステップ5 : ウィジェットのレイアウトを選択する

TikTokを埋め込むためのデザインテンプレートを選びます。テンプレートを使うボタンをクリックして選んでください。
embedfeed-select-widget-template-tiktok

ステップ6:TikTokの埋め込み用コードをコピーする

ウィジェット(TikTokの埋め込みパーツ)の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
enbedfeed-copy-code-embed-tiktok
注:コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。

ステップ7:コピーしたコードをウェブサイトに貼り付ける

ウェブページのコードを編集できるプラットフォームを使用している場合、TikTokウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます:
embed-code-instagram-feed

以上で設定は完了です。以下の様にウェブサイトにTikTokが表示されます。
Embed-TikTok-on-web-example

ワードプレスプラグインでTikTokが埋め込めるアプリ

EmbedFeedの他にも、ワードプレスのプラグインの中にTikTokが埋め込めるものもあります。詳しくはそれぞれのページでご確認ください。

【TikTokまとめ】デザイン事例

お気に入りのTikTokをブログやウェブサイトに埋め込んだあとは、効果的な見せ方を検討してみましょう。ここでは先ほどご紹介したツールの一つ「エンベッドソーシャル」を使って、【TikTokまとめ】のデザイン例をいくつかご紹介します。

TikTok動画をきっちり紹介 フィード式デザイン

こちらは、動画のサムネイルと、テキストの冒頭の部分が整然と並んだデザインです。必要な情報が一覧できるので、しっかりと、堅めな印象を与えるウィジェット(ウェブサイト上の部品)になっていますね。

TikTokをインスタのウォール風に見せる グリッド式デザイン

こちらは、インスタグラムのウォール風のデザインです。文字がない分ビジュアル的なパワーが増すので、ソーシャルメディアウォール(SNSの壁紙)として使うと、集合体として集めた動画を表現しやすく、独自の世界観が伝わりやすくなる印象です。

流れるTikTokスライドで注目を集められる カルーセルスライダー式デザイン

こちらは、動きのあるデザインです。ブログやウェブサイト上で動きのあるウィジェットがあるとぱっと目を引き、クリックしたくなるものです。ページ訪問者の滞在を長くしつつ、しかもたくさんの動画を紹介しやすいというメリットがあるデザインです。

TikTokをブログやウェブサイトに埋め込むメリット

ところで、TikTokを一か所にまとめられるということ以外に、TikTokをブログやウェブサイトに埋め込むとどんなメリットが考えられるのでしょうか。

サイト訪問者をTikTokへと誘引し、 新規フォロワーを獲得

WEBサイトの訪問者に対し、 TikTokで積極的な情報発信を実施していることをアピールできます。 動画を一覧で表示させることで内容により興味を持たせることができ、 サイト上からTikTokへの流入を増加させ新たなフォロワーやファンの獲得に役立てることができます。

広告嫌いのユーザーにも受け入れられやすいUGCで商品をアピールできる

近年、SNS上での広告が嫌われる傾向があると言われています。そのような状況の中、SNSを通じて自社の商品やサービスをどのようにアピールすればよいのか悩んでいらっしゃる方も多いかもしれません。その悩みを解決する一つの方法が、一般ユーザーが作ったコンテンツUGC(ユーザー生成コンテンツ)で商品やサービスを紹介する手法です。インスタグラムのハッシュタグキャンペーンなどがその一例です。ユーザーが商品やサービスを自由に使ったり楽しんだりしているTikTok動画を集めれば、広告らしさを出すことなくアピールできるUGCツールになることが期待できます。

ホームページ上でのユーザーの滞在時間を伸ばせる

ホームページ上にTikTokを埋め込むことで、ページでの滞在時間を伸ばす効果が期待できます。動画が一覧表示されていることで、ディスプレイをスクロールしながら動画を探す行動を誘発しやすいためです。またTikTok動画がきっかけで他のページを見るなど回遊も促しやすくなります。TikTokが皆さんのブログやホームページに読者をひきつけるお手伝いをしてくれる、というわけです。

TikTok非利用者へのリーチに活用

TikTokは利用者が急増しているSNSですが、NTTドコモ モバイル社会研究所が実施した「スマホ・ケータイ所有者のSNS利用動向」(2021年1月調査)によれば、TikTokの利用者率は他のSNSと比較するとまだ多くなく、さらに主な利用者は若い世代です。TikTokに投下したコンテンツをウェブサイトに埋め込めば、TikTok非利用者にコンテンツを届けることができ、そこから新たなフォロワーやファンを獲得する機会にもなるでしょう。

SNS埋め込みツール「エンベッドソーシャル」はTikTok API対応ーSNS系動画埋め込みを網羅

私たちの製品「EmbedSocialエンベッドソーシャル」は、TikTok APIに対応、TikTokビジネスアカウントから自動で動画を収集し、ウェブサイトやブログに埋め込み可能なツールです。

TikTok、Instagram、Youtube、Facebook、Pinterest、X(Twitter)をひとつにまとめて、ウェブサイトに埋め込み表示した例がこちらです。

コード不要でSNSの動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。
TikToKや、その他SNSを活用したマーケティングやPRにご興味のある方は、ぜひ一度お問い合わせください。

embedsocial

UGC活用ツール
- エンベッドソーシャル -

7種類以上のSNSから投稿を収集してウェブサイトで活用。初期費用なし・クレジットカード決済可能

無料トライアル

WEB制作 × SNS連携なら
まずはシステムを
無料でお試し!

ご導入完了までのご質問やご相談なども
お気軽にお問い合わせください。

お問い合わせ

導入に関するご不明点を
専門スタッフが解決します。

相談する
お見積り

ご導入内容に合わせた最適な
プランを選択できます。

料金表を見る
資料請求

製品概要をご紹介する資料をダウンロードいただけます。

請求に進む