TikTok埋め込みウィジェットで、撮った縦長の動画を、切り取らずにホームページへ

フィードを作ってソースにTikTokを追加し、TikTok自身の許可画面で連携を許可します。最近の動画がカードとして取り込まれるので、表示するものを選び、レイアウトとテーマを決めたら、埋め込みの画面が設置先に合ったコードを1つ渡します。それをフィードを表示したい場所に貼り付ければ完了で、それ以降はコードに触れなくても、新しい動画が自動でページに反映されます。画面ごとの手順は、スクリーンショット付きの設置ガイド（英語）にあります。

TikTokの動画の「埋め込む」で手に入るのは、選んだ動画1本のプレーヤーをページに置くコードで、貼った動画はそのまま変わりません。プロフィールを埋め込む公式の方法もあり、こちらはTikTokが用意した枠に、そのアカウントの最新の動画が最大10本並びます。ウィジェットは動画ではなくアカウントを指しているので、連携した時点の最新の動画を取り込み、その後も同期のたびに新しい動画が加わります。表示する動画を選べ、レイアウトとテーマで見た目をサイトに合わせられます。カードは訪問者がクリックするまでカバー画像と再生ボタンのままで、TikTokのプレーヤーはクリックしてから読み込まれます。公式の動画の埋め込みがページを開いた時点で何を読み込むかは、TikTok公式の埋め込みを実測したガイド（英語）で公開しています。

カバー画像は全体が表示され、カードの形はレイアウトによって変わります。GridやMasonry、Listのようなグリッド、ウォール、リストでは、カードがTikTokから届いた縦横比のまま表示されるので、縦長のカバーはカードの幅いっぱいに、上が削られることも左右に帯が付くこともなく並びます。横にスクロールする帯のレイアウト（Carousel、Marquee、Conveyor、Coverflow、Slider、Ribbon、Facebook Slideshow、Platform Feed）では、カバーは正方形の枠に収まり、9:16のカバーには左右に帯が付きます。帯のカードは行の高さを共有するため、写真が読み込まれるたびに行の高さが変わると、読んでいる人のページが下へずれてしまいます。それを防ぐためです。どちらの場合も切り取られる部分はありません。Classic TikTokのレイアウトは、すべての枠を9:16ちょうどに固定します。切り取りが起きるのは2つの場合だけです。TikTok Collageのレイアウトは、ベント型のセルが意図的に正方形、縦長、横長になっているので、カバーをセルに合わせて切り取ります。もう1つは、独自の縦横比を固定したカードテンプレートに切り替えた場合です。

カードはカバー画像で、クリックされるまで動きません。標準の設定では、クリックするとページの上にライトボックスが開き、その中でTikTok自身の埋め込みプレーヤーが読み込まれるので、再生はコピーではなくTikTokのプレーヤーで行われます。自動で再生されるものも、訪問者が求める前に音が出るものもありません。有料プランとトライアル中に使えるライブプレビュー（カードの中でのミュート再生）をオンにしても、TikTokのカードはカバー画像のままです。TikTokのAPIが返すのは再生できる動画ファイルではなく、埋め込み用のURLだからです。この点は、TikTokの埋め込みガイドの自動再生の節（英語）でも説明しています。

いいえ。標準のカードに載る数字は、いいね、コメント、シェアの3つです。再生回数はTikTokのAPIから届き、投稿と一緒に保存していますが、ウィジェットの描画にその値を読む部分はありません。表示していない数字をモックアップやこのページに描けば、ない機能をあるように見せることになるので、描いていません。動画の長さも同じで、保存していますが表示しません。使われた楽曲の名前は、そもそもTikTokに求めていないので、ホームページに出ることはありません。

連携したときに最新の100本、その後は同期ごとに20本です。20本はTikTokの動画一覧のAPIが1回のリクエストで返す最大数なので、最初の取り込みではそれを5ページ分たどります。取り込み済みの動画は置き換えずに残すので、同期を重ねるごとに、プランの保存上限までフィードは増えていきます。そのうち何本をウィジェットに表示するかは、デザインスタジオの設定です。同期の間隔はプランで決まり、無料プランは24時間ごと、Proは1時間ごと、Businessは15分ごと、Scaleは10分ごとです。

権限は2つです。カードに使う表示名とアイコンを含む基本的なプロフィールと、自分の動画の一覧。求めるのはそれだけで、許可は私たちの画面ではなく、TikTok自身の許可画面で行います。パスワードを私たちが見ることはありません。TikTokが発行するアクセストークンは自動で更新されるので、毎日連携し直す必要もありません。

アカウントの連携で取り込めるのは、許可したアカウント自身の動画です。求める権限がプロフィールと自分の動画の一覧の2つだけなので、ハッシュタグでほかの人の動画を集めることはできません。ほかのアカウントの動画を載せたい場合は、アカウントを連携せずに、公開されている動画のURLを1行に1本ずつ貼って作る固定のフィード（Custom Feed）が使えます。URLは短縮のvm.tiktok.comではなく、動画を開いてコピーした完全なものを貼ってください。載せる許可を得た動画に使うためのもので、貼った動画だけで構成され、勝手に動画が増えることはありません。

選べます。取り込んだ動画はすべて、Collect（取り込んだ投稿）の画面にカードで並び、除外の操作が付き、キャプションはその場で編集できます。標準では取り込んだ動画がそのまま表示され、除外した動画は表示されません。承認した動画だけを表示したい場合は、フィードの設定で事前承認（Pre-approve posts）をオンにします。すると動画ごとに承認のボタンが付き、承認した動画だけが表示されます。承認・除外・編集とキーワードルールはすべてのプランで使え、キーワードルールに当たったキャプションの動画は、自動でウィジェットに表示されなくなります。ピン留めは有料プランとトライアル中に、カバー画像そのものを見て判断するAIのビジョンモデレーションはBusiness以上で使えます。

WordPress、Shopify、Wix、Squarespace、Webflow、Notion、Googleサイト、素のHTML、Reactには、それぞれに合ったコードを埋め込みの画面が渡します。外部のスクリプトをサンドボックスに入れるビルダーもあれば、取り除くビルダーもあるからです。STUDIO、Jimdo、ペライチなど一覧にないビルダーでも、HTMLを貼り付けられるブロックがあれば、Plain HTMLのコードをそのまま試せます。スクリプトが取り除かれてしまう場合でも、iframeを貼り付けられるサービスなら、WixかSquarespaceを選んだときに出るiframe形式のコードでフィードを表示でき、高さの自動調整はスクリプトが動くときだけ働きます。WordPressなら、当社のプラグインを使えばコードを貼る必要もありません。

はい。TikTokは有料オプションではなく、X（旧Twitter）を除くほかのすべてのプラットフォームと同じく、無料プランに入っています。Xだけが有料なのは、XがAPIの利用に料金を課しているという1つの理由からです。無料プランには40種類のうち7種類のレイアウト、16種類のテーマすべてとテーマビルダー、承認・除外・編集とキーワードルールのモデレーション、そしてトライアル終了後に1つの連携ソースが含まれます。TikTokの名前が付いた2つのレイアウトは有料プランです。7日間のトライアルでは、クレジットカードなしでデザインスタジオのすべてを使えます。

できます。1つのフィードに10のプラットフォームを組み合わせられるので、縦長のクリップを、Instagramの写真、Googleの口コミ、YouTubeの動画と同じセクションに並べられます。お店やバーなら、たいていその組み合わせこそが狙いです。クリップは作っているところを見せ、口コミは「並んでよかった」と伝えてくれます。なお、無料プランで連携できるソースは1つなので、複数のプラットフォームを組み合わせるのは7日間のトライアル中か有料プランです。