Tiktokのタイムラインや特定の動画をウェブサイトに埋め込んで表示する方法を紹介します。
Tiktokでは特定の動画だけでなく、プロフィールをタイムラインのような形で表示することができます。どちらの方法もコードを取得して貼り付けるだけなので簡単に埋め込むことができます。
特定のTiktok動画を埋め込む方法
特定のTiktok動画を埋め込むと以下の画像のような表示になります。
特定の動画を埋め込む手順は以下の通りです。
- PCブラウザから埋め込みたい動画の「埋め込む」アイコンクリック
- コードをコピー
- コードを貼り付け
1.PCブラウザから埋め込みたい動画の「埋め込む」アイコンクリック
まずはPCブラウザ（Chromeなど）でTiktokにアクセスします。
動画の右側にあるシェアアイコン一覧から「埋め込む」アイコンをクリックします。
2.コードをコピー
アイコンを押すと、コードが表示されたパネルが出てくるので「コードをコピー」を押します。
3.コードを貼り付け
コードを取得したらホームページのTiktok動画を表示したい位置にコードを貼り付けます。
例えばホームページのサイドバーに表示したい場合はこんな感じになります。
<body>
<header>
<!-- ヘッダー省略 -->
</header>
<main>
<!-- メインコンテンツ省略 -->
</main>
<aside>
<!-- サイドバー -->
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@tiktokcreators/video/7088391409597795626" data-video-id="7088391409597795626" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@tiktokcreators" href="https://www.tiktok.com/@tiktokcreators">@tiktokcreators</a> Ever wonder how @tiktok really works? 🤔 Check out @creatorportal's new series for an insider's scoop on the For You feed 🔥 <a title="howtiktokworks" target="_blank" href="https://www.tiktok.com/tag/howtiktokworks">#HowTikTokWorks</a> <a target="_blank" title="♬ original sound - tiktok creators" href="https://www.tiktok.com/music/original-sound-7088391366643862315">♬ original sound - tiktok creators</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
</aside>
</body>Tiktokのタイムラインを埋め込む方法
Tiktokではプロフィールの埋め込みと言われている機能で、新着の動画一覧を表示することができます。
タイムラインの埋め込みをするとこちらのような表示になります。
手順は特定の動画を埋め込む場合とほぼ同じです。
- PCブラウザでTiktokのユーザーページにアクセス
- 矢印アイコンから「埋め込む」を選択
- コードをコピー
- コードを貼り付け
1.PCブラウザでTiktokのアカウントページにアクセス
PCブラウザからタイムラインを表示したいアカウントのページを開きます。
2.矢印アイコンから「埋め込む」を選択
アカウント名の右にある矢印アイコンをマウスオーバーすると出てくるメニューから「埋め込む」を選択します。
3.コードをコピー
コードが表示されたパネルが出てくるので「コードをコピー」を押します。
4.コードを貼り付け
コピーしたコードはタイムラインを表示したい位置に貼り付けるだけで表示されます。
先ほどと同じようにサイドバーに表示する場合は次のような感じになります。
<body>
<header>
<!-- ヘッダー省略 -->
</header>
<main>
<!-- メインコンテンツ省略 -->
</main>
<aside>
<!-- サイドバー -->
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@tiktokcreators" data-unique-id="tiktokcreators" data-embed-type="creator" style="max-width: 720px; min-width: 288px;" > <section> <a target="_blank" href="https://www.tiktok.com/@tiktokcreators?refer=creator_embed">@tiktokcreators</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
</aside>
</body>そのほかのSNS埋め込み
Tiktok以外のSNS埋め込み方法はこちら。複数のSNS運用されている方はぜひ。
まとめ
Tiktokの動画埋め込みはコードを取得するだけで簡単に表示できます。Wordpressで表示したい場合はブロックやHTMLウィジェットを使うとコーディングしなくても簡単に動画の表示ができます。
あと、ホームページのSNSリンクはアイコンやボタンリンクが主流でしたが、タイムライン動画を埋め込むことで雰囲気が伝わりやすくクリック率が上がるのでアイコンリンクから動画リンクに変えるサイトもたくさん出てきてます。
動画やタイムラインをを埋め込めるのはTiktokだけでなく、インスタグラムやTwitterでもできるのでSNS運用している場合は積極的に活用したいコンテンツです。