ウェブサイトにTikTokウィジェットを設置する方法(2026年)
ホーム ブログ ウェブサイトにTikTokウィジェットを設置する方法(2026年)

ウェブサイトにTikTokウィジェットを設置する方法(2026年)

Tiktokウィジェットの作り方

カスタムウィジェットを使って、TikTokの動画をウェブサイトに掲載しませんか?

TikTokウィジェットをサイトに追加することで、訪問者の興味を引き、コンテンツを新鮮に保ち、ウェブサイトのトラフィックを忠実なTikTokフォロワーに変えることができます。

このプラットフォームには17億人以上のユーザーがいるため、TikTok動画を埋め込むことで、御社のブランドがより多くの視聴者にリーチし、ソーシャルメディアとウェブサイトの両方で存在感を高めることができます。

しかし、ウェブサイト用のTikTokウィジェットを作成するのは簡単ではありません。特に、コードやさまざまなプラグインオプションに精通していない場合はなおさらです。

初めて自分のサイトにTikTokの動画を追加しようとしたとき、手早く初心者に優しい方法を見つけるまでにいくつかの問題にぶつかった。

Smash BalloonでTikTokのフィードをWordPressに簡単に表示するお手伝いをした経験から、この仕事を成し遂げるための最もシンプルなソリューションを見つけました。

この記事では、WordPressやソーシャルメディア連携が初めての方でも、ウェブサイトにTikTokウィジェットを簡単に作成できる手順を段階的にご説明します!

この記事で

ウェブサイトにTikTokウィジェットを追加する理由

総ユーザー数が17億人を超えるTikTokは、人気のソーシャルネットワークであり、魅力的なビデオコンテンツを見つけるには絶好の場所である。

ウェブサイトに関連性の高いTikTok動画を表示することで、ウェブサイト訪問者の注目を集め、興味を持続させることができます。また、検索エンジンの検索結果で上位に表示されるため、サイトのSEOにも役立ちます。

さらに、TikTokウィジェットを使って自分の動画を表示し、サイトのトラフィックを再生回数や「いいね!」数、ソーシャルメディアのフォロワー数に変換することもできる。

それではさっそく、TikTokフィードウィジェットをWordPressに埋め込む方法を見ていきましょう。

ウェブサイトにTikTokウィジェットを追加する方法(ステップバイステップ)

あなたのウェブサイトにTikTokウィジェットを無料で作成する準備はできましたか?以下の簡単なステップに従ってください。

ステップ1:TikTok Feed Proをインストールしてアクティベートする

WixやWeeblyのようなプラットフォームとは異なり、WordPressには大量のプラグインが用意されており、簡単にサイトに機能を追加することができます。

TikTokウィジェットに関しては、TikTok Feed Proプラグインを使うのがベストだ。

tiktok feed pro ホームページ

WordPressウェブサイト用TikTokフィードプラグインの第1位であるこのツールを使えば、わずか数分でTikTokコンテンツを作成、カスタマイズ、埋め込むことができます!

使いやすいだけでなく、WordPressの達人たちがあなたの質問に答え、必要なときにはいつでも手を差し伸べてくれる。

TikTok Feed Proをあなたのウェブサイトにインストールし、有効化する前に、まずはこちらからTikTok Feed Proを入手してください。

方法がわからない? WordPressプラグインのインストールに関する初心者ガイドをご覧ください。

プラグインの準備ができたら、ステップ2に進み、ウィジェットを作成します。

ステップ2:新しいTikTokウィジェットを作成する

これで、プラグインのガイド付きフローを使ってTikTok動画ウィジェットを作成できます。

まず、ダッシュボードからTikTokフィード " すべてのフィードメニューを開き、新規追加ボタンをクリックします。

ライブ・フィード・エディターを開く tiktok feed

ステップ3では、このウィジェットをTikTokアカウントに接続することで、TikTokの動画をサイトに表示することができます。

ステップ3:TikTokアカウントに接続する

新しいTikTokウィジェットのソースとしてTikTokアカウントを追加できます。一度ソースを追加すれば、新しいウィジェットにも自由に再利用できます。

準備はいいですか?ソースの追加ボタンをクリックしてください。

tiktok feed pro 追加ソース

次に、「TikTokと接続する 」ボタンをクリックして次に進みます。

そうすることで、あなたのウェブサイトにhttps://www.tiktok.com、アカウントを接続することができます。

Tiktokとつながる

次のページで、プラグインはあなたのTikTokアカウントへの読み取り専用 アクセスを要求します。これにより、プラグインはあなたの情報を閲覧し、ウェブサイトに動画を埋め込むことができます。

実際、プラグインはあなたのアカウントに一切変更を加えることができません。つまり、完全に安全なのです!

続行するには、ここでAuthorize ボタンをクリックしてください。

これで、あなたのアカウントがTikTok Feed Proプラグインのソースとして追加されました。

このアカウントを選択し、「次へ」をクリックしてソースを選択する。

Tiktokソースを選択

このように、あなたのTikTokアカウントに接続された新しいTikTokウィジェットができました。次のステップでは、あなたのウェブサイト上でどのように見えるかをカスタマイズできます。

ステップ4:TikTokウィジェットをカスタマイズする

開始するために、TikTok Feed Proはウィジェットにインポートできるさまざまなテンプレートを表示します。

各テンプレートには、ワンクリックでコピーできるユニークなデザインが付属しています。6種類のテンプレートからお選びいただけます:

  • デフォルト
  • カード
  • リスト
  • 最新ビデオ
  • カルーセル
  • ショーケース・カルーセル

次に進むには、テンプレートを選択して「Next」 ボタンを押します。

フィードテンプレートの選択

ビジュアルカスタマイザーでTikTokウィジェットが開きます。左側には、ヘッダー、ロードモアボタン、レイアウトなどを変更するオプションが表示されます。

また、右側にウィジェットのライブプレビューがあり、リアルタイムですべての変更を追跡することができます。

ライブフィードエディター tikto feed pro

ウィジェット上でTikTokビデオをどのようにレイアウトするかを変更できます。

左側のレイアウトオプションを 選択して続行します。

レイアウトを開く tiktok feed pro

TikTokウィジェットに選択できる4種類のレイアウトが表示されます:

  • グリッド
  • リスト
  • 石工
  • カルーセル

以下、これらのレイアウトを見てみよう:

tiktok feed proのレイアウトオプション

まず、TikTokの動画を正方形のサムネイルに整然とした行と列で表示するグリッドレイアウトが あります。その結果、同時に大量の動画を埋め込むことができます。

Tiktokビデオフィードの例

リストレイアウトを 使えば、TikTokの公式ウェブサイトやアプリと同じように、TikTok動画を1列に表示することができます。

tiktokのリストレイアウトの例

次に、TikTokのビデオをさまざまな列に表示するメイソンレイアウトが あります。さらに、動画のサムネイルは元の比率を保ちます。

石工ティクトックフィード例

最後に、TikTok動画をスライドショーのカルーセルで表示するカルーセルレイアウトが あります。TikTokウィジェットを使って、サイトをよりインタラクティブにする素晴らしい方法です。

ティクトック・カルーセルの例

レイアウトを選択したら、Saveを クリックして変更を保持します。

その後、カスタマイズをクリックして、もう一度メインのカスタマイズオプションに戻ることができます。

カスタマイズボタン ライブフィードエディタ tiktok feed pro

カスタマイズオプションから、次にTikTokウィジェットのヘッダーを設定できます。

そのためには、左側のヘッダーオプションを クリックします。

tiktokのオープンヘッダーオプション

左上には、TikTokウィジェットのヘッダーを有効 または無効に するオプションがあります。

その下にあるチェックボックスで、どのヘッダー要素を表示するかを選ぶことができる:

  • プロフィール写真
  • 名称
  • ユーザー名
  • 説明
  • 統計
  • ボタン
Tiktokヘッダーのカスタマイズ

前回同様、変更後は「Save 」をクリックする。

また、これらのヘッダーオプションのいずれかをクリックして、詳細にカスタマイズすることができます。さらに、残りのカスタマイズオプションを使って、フィルター、ボタンスタイル、TikTokビデオ要素などを設定することもできます。

TikTokフィードウィジェットに満足したら、もう一度「保存」をクリックしてください。

最後に、ステップ5に進み、このTikTokフィード・ウィジェットをあなたのサイトに追加します。

ステップ5:TikTokウィジェットを埋め込む

このプラグインは、あなたのウェブサイトにTikTokウィジェットを埋め込む2つの方法を提供します。

  • ウェブページにTikTokウィジェットを追加する
  • サイドバーまたはフッターにTikTokウィジェットを追加する

どちらを選べばいいかわからない?以下、両方の方法について説明します。

ウェブページにTikTokウィジェットを追加する

ビジュアルカスタマイザーから、このTikTokフィードウィジェットを埋め込むのはとても簡単です。

まずは、上部の埋め込み ボタンをクリックしてください。

tiktokフィードを埋め込む ライブフィードエディタ

TikTokウィジェットを埋め込むことができるすべての方法がポップアップで表示されます。

オプションを選択する前に、ウィジェットのショートコードをコピーするためにコピーをクリックしてください。

コピーショートコード tiktok feed pro

次に、下のボタンを使ってTikTokウィジェットの設置場所を選択します。

とりあえず、「ページに追加 」オプションを使うことにしよう。

tiktok feed pro ページに追加する

それをクリックすると、あなたのウェブサイトで利用可能なWordPressページのリストが開きます。

リストからページを選択し、「追加」 ボタンを押すだけで、次に進むことができます。

ページを選択 Tiktok feed pro

すると、ブロックエディターでWordPressページが開き、そこにウィジェットを埋め込むことができます。

まず、プラス(+) アイコンをクリックして新しいブロックを追加します。

ブロックtiktokビデオフィードを追加

上部の検索バーを使って、「ショートコード」 ウィジェットを探すことができます。

次に、下の検索結果のウィジェットをクリックしてください。

ショートコード・ブロック

最後に、先ほどコピーしたショートコードをショートコード ・ブロックに貼り付けます

そうすると、プラグインが自動的にこのWordPressページにTikTokウィジェットを埋め込みます。

tiktok feed pro 用ショートコード

このように、TikTok Feed Proを使えば、WordPressを初めて使う方でも、TikTokウィジェットをこれまで以上に簡単に表示することができます。

このページを開くと、TikTokの埋め込み例のように動画が表示されます。

Tiktokビデオフィードの例

では、TikTokウィジェットをサイトに埋め込む別の方法を見てみましょう。

以前と同様に、ビジュアルカスタマイザーを使って、ウェブサイトのサイドバーやフッターエリアにTikTokウィジェットを埋め込むことができます。

まず、ダッシュボードからTikTokフィード " すべてのフィードメニューに移動し、先ほど作成したウィジェットをクリックします。

tiktokフィードをもう一度開く

ビジュアルカスタマイザーにソーシャルメディアウィジェットが再び表示されます。

続行するには、Embedボタンをクリックするだけです。

tiktokフィードを埋め込む ライブフィードエディタ

そうすると、TikTokウィジェットを埋め込むためのすべてのオプションがポップアップで表示されます。

先ほどと同じように、ポップアップのコピー ボタンをクリックする。

コピーショートコード tiktok feed pro

ショートコードをコピーしたので、ウィジェットを埋め込む場所を選択できます。

サイドバーまたはフッターに追加するには、ここでウィジェットに追加オプションを選択します。

次に、サイトのウィジェットページが表示され、数回クリックするだけでWordPressウィジェットを追加、編集、削除することができます。

ここでは、TikTokウィジェットの設置場所を2つから選ぶことができます:サイドバーまたはフッター

サイドバーパネルを開く

このチュートリアルでは、サイドバーパネルを使います。

プラス(+)アイコンをクリックして新しいウィジェットを追加し、ショートコードオプションを選択できます。

最後に、TikTokウィジェットのショートコードを新しいショートコード・ウィジェットに貼り付けます

後はプラグインが自動的にあなたのサイトのフッターまたはサイドバーパネルにウィジェットを埋め込みます。

tiktok feed proのショートコードを貼り付ける

全体として、TikTok Feed Proは、あなたのウェブサイトに最適なTikTokウィジェットを作成し、数回クリックするだけで埋め込むことができます。

あなたのサイトを開くと、TikTokウィジェットが訪問者にどのように見えるかがわかります。

tiktokフィードサイドバーの例

それで終わりだ!

ご覧のように、適切なWordPressプラグインを使用していれば、あなたのウェブサイトにTikTokウィジェットを作成するのはとても簡単です。

TikTok Feed Proを使えば、美しいTikTokフィードで訪問者を魅了し、TikTokのフォロワーを増やし、ビジネスを簡単に成長させることができます。

TikTokフィードウィジェットを埋め込む準備はできましたか?こちらからTikTok Feed Proを入手してください!

フォロワーを惹きつけるソーシャルメディア投稿のベストタイプのリストもご覧ください。

お役に立ちましたか?あなたのビジネスを成長させるソーシャルメディアのヒントやトリックについては、Twitterや Facebookで私たちをフォローすることができます。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。