最終更新日 2022/05/20 投稿日 2020/07/23

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

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

目次

    1. TikTokから埋め込みコードを取得して埋め込む(一般ユーザー向け)
    2. Tiktok対応埋め込みツールを使って埋め込む(Webデザイナー、プロブロガー向け)
    3. 【Tiktokまとめ】デザイン事例
    4. TikTokをブログやウェブサイトに埋め込むメリット
    5. SNS埋め込みツール「エンベッドソーシャル」はTikTok API対応ーSNS系動画埋め込みを網羅

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

Tiktok対応埋め込みツールを使って埋め込む(Webデザイナー、プロブロガー向け)

TikTok対応埋め込みツールとは

一つ一つの動画を埋め込み表示するだけではなく、たくさんの動画を集めたい、また、デザインにも凝りたい、という場合は、専用の埋め込みツールの利用をお勧めします。公式ページから1つ1つ埋め込みコードを取得するよりも、効率的に動画を集められるほか、表示デザインのオプションが豊富であったり、さまざまな付加機能が付いているためです。
TikTok専用のツールのほか、他のSNSの動画や写真も一緒に埋め込めるツールもあります。有料のツールもリーズナブルな価格のものがあるので、プロのWebデザイナーだけでなくブロガーなど一般の方でも利用しやすいと思います。

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

ツールの一例として、ワードプレスのプラグインの中で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の自動収集に対応し自社サイト上でTikTok動画の一覧表示が可能に

TikTokをはじめ、Youtube、Vimeo、Instagram(フィード、ストーリーズ)、Twitter、Facebookなど写真・動画を集めて、まとめてブログやウェブサイトに表示することが出来ます。

  こちらも読む SNSの投稿をWEBサイトに埋め込むことができるツール

このツールを使って集めた写真や動画は、先ほどご紹介したTikTokまとめのデザイン事例の様にいろいろなタイプのデザインで表示できます。以下に、TikTok、Instagram、Youtube、Twitterをまとめて埋め込んでみました。各サムネイルをクリックすると各投稿が見られますので試してみてください。(現在TikTokの動画再生はTikTokプラットフォーム上でのみ可能です。)


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

embedsocial

SNS投稿埋め込みツール
- エンベッドソーシャル -

簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。

お問い合わせ

関連記事

12月 07, 2022

成功するInstagramキャンペーンの…

Instagramを使った集客では多くの企業が工夫を凝らしています。中でもInstagramキャンペ...

social-media-marketing-campaigns
12月 05, 2022

海外有名企業ソーシャルメディアマーケティ…

多くの企業がSNSを活用している今、様々なソーシャルメディアマーケティングキャンペーンが展開されてい...

social-media-listening
11月 25, 2022

ソーシャルリスニングを始めるためのステッ…

マーケティングに関わる多くの担当者が様々なデータに興味を持っていることはご存知のことと思います。良い...

hashtag-campaign-global-examples
11月 19, 2022

ハッシュタグキャンペーン海外の成功事例1…

InstagramやTwitterの浸透に伴い、ハッシュタグキャンペーンはSNSマーケティング担当者...