2020-07-23
embed-tiktok-to-website

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

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

目次

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

TikTokから埋め込みコードを取得して埋め込む(一般ユーザー向け)

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

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

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

埋め込みたい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-web-account-search

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

ハッシュタグからも動画を検索ができます。こちらのURLをリンクバーに入力して、表示された関連動画の中から埋め込みたい動画を探します。以下のURLのタグ名の部分を該当するハッシュタグに変えてコピーし、リンクバーに貼り付けてください。
https://www.tiktok.com/tag/タグ名
例えばハッシュタグ「犬」を入力するとこのような画面が表示されます。
tiktok-search-by-hashtag

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

動画が見つかったら、再生ボタンをクリックして、動画再生画面に移動します。
この画面上右側に表示されるボタンの中から、埋め込みマーク</>のボタンをクリックします。
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対応埋め込みツールとは

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

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

ツールの一例として、ワードプレスのプラグインの中でTikTokが埋め込めるものをピックアップしてみました。詳しくはそれぞれのページでご確認ください。

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

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

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


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

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


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

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


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

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

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

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

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

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

ホームページ上にTikTokを埋め込むことで、ページでの滞在時間を伸ばす効果が期待できます。TikTok動画を見るだけでなく、動画がきっかけで他のページを見るなど回遊も促しやすくなります。TikTokが皆さんのブログやホームページに読者をひきつけるお手伝いをしてくれる、というわけです。

サーバに負担をかけず動画をホームページに表示できる

動画をたくさん埋め込むとサーバーの負荷が気になる方もいるかもしれません。しかしTikTokを埋め込んだ場合、その動画の再生はTikToKのプラットフォーム上で再生されることになるため、みなさんの契約しているサーバーに負担をかけず、リッチな動画コンテンツを提供できます。動画をアップロードする必要もありませんので、その時間も省くことが出来ますね。

さいごに SNS埋め込みツール「エンベッドソーシャル」がTikTok対応開始でSNS系動画埋め込みをほぼ網羅

個人事業主から大手企業まで、様々なユーザーに使われているSNS埋め込みツール「EmbedSocial(エンベッドソーシャル)」が、TikTokの対応を開始しました。
エンベッドソーシャルは、今回追加されたTikTokをはじめ、Youtube、Vimeo、Instagram(フィード、ストーリーズ)、Twitter、Facebookなど写真・動画を集めて、まとめてブログやウェブサイトに表示することが出来ます。

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

このツールを使って集めた写真や動画は、先ほどご紹介したTikTokまとめのデザイン事例の様にいろいろなタイプのデザインで表示できます。ここではVimeo、Instagram、TikTok、Youtubeから集めた動画を並べて表示させてみました。(現在TikTokの動画再生はTikTokプラットフォーム上でのみ可能です。ほかのSNSは本ウィジェット上で再生可能です。サムネイルとクリックするとポップアップが出てきますので、各動画の再生ボタンをクリックしてお試しください。)


コード不要でSNS系動画や写真を簡単に埋め込め、価格もリーズナブル、日本だけでなく世界中で様々なユーザーに愛されているSNS活用ツールです。
ご興味のある方はぜひ無料トライアルから試してみてはいかがでしょうか。

関連記事

8月 06, 2020

【2020年8月版】EmbedSocia…

目次 新たにTikTok動画の埋め込みが可能に Youtubeから動画収集にハッシュタグが追加 新機…

7月 30, 2020

インスタグラムストーリー サイト埋め込み…

インスタグラムのフィード投稿は、個別に埋め込みコードを取得して埋め込んだり、外部ツールを使用してハッ…

7月 29, 2020

【初期費用なし・月額6,500円〜】ハッ…

EmbedSocialのフィード機能を活用すると、InstagramやTwitterからハッシュタグ…

7月 28, 2020

Googleマイビジネスの口コミをサイト…

Googleマイビジネスの口コミをサイト上に埋め込んで活用したい場合、APIを活用して独自に開発を行…