WordPressにTikTok風の動画フィードを追加する方法
ホーム ブログ WordPressにTikTok風の動画フィードを追加する方法

WordPressにTikTok風の動画フィードを追加する方法

WordPressにTikTok風の動画フィードを追加する方法:Instagram Reels、TikTok、YouTube Shorts、Facebook Reelsを一覧表示するカードの横で、Swipe Viewで動画を全画面再生しているスマートフォンの画像

皆さんはすでに、Instagram、TikTok、YouTube、Facebookなどに短い動画を投稿していることでしょう。ウェブサイト上では、こうした動画は通常、小さなボックスの中に表示されており、再生ボタンをタップした瞬間にアプリへと遷移してしまいます。

WordPressにTikTok風の動画フィードを追加するには、「Smash Balloon Pro」フィードプラグインをインストールし、「Swipe View」設定を有効にしてください。動画をタップすると音声付きで全画面表示され、スワイプすると次の動画が表示されるため、TikTokアプリと同じように、訪問者はページ上で動画を視聴し続けることができます。「Swipe View」はInstagram Reels、TikTok動画、YouTube Shorts、Facebook Reelsに対応しており、すべてのProプランに含まれています。

各アップデートの告知投稿を書いている間に、4つすべてを設定しましたが、プラットフォームごとに有効化の方法が少し異なります。Instagramは自動的に有効になります。Facebookは自分でスイッチを切り替える必要があります。YouTubeはまったく新しいフィードを作成する必要があります。そこで、各プラットフォームごとの簡単な手順を以下にまとめました。

この記事で

TikTok風の動画フィードとは?

TikTok風の動画フィードでは、ウェブページ上に縦型のショート動画が表示され、スマホアプリと同じように、全画面表示で音声をオンにした状態で、スワイプするだけで次の動画に切り替わります。Smash Balloonのプラグインでは、このビューアーは「Swipe View」と呼ばれています。

「Smash Balloon」は、コードを一切書かずに、Instagram、Facebook、TikTok、YouTube、Xのフィードをウェブサイトに表示できるWordPressプラグインのセットで、175万人以上のユーザーに利用されています。

訪問者が動画をタップすると、次のような画面が表示されます:

  • 動画は、スマートフォンの画面を端から端まで埋め尽くすか、パソコンの画面では暗い背景の中央に表示されます。
  • プレイヤーは音声を再生しようとします。ブラウザがミュート状態で起動した場合、「タップしてミュートを解除」というラベルをタップするだけで、音声をオンにできます。
  • スマートフォンでは、上にスワイプすると次の動画に、下にスワイプすると前の動画に戻ります。パソコンでは、動画の横にある矢印ボタン、スクロールホイール、または矢印キーを使います。
  • Instagram、TikTok、Facebookの動画には、あなたの名前と「フォロー」ボタンが表示されます。YouTube Shortsでは、フィードの下に「チャンネル登録」ボタンが表示されます。
スマートフォンで「Swipe View」モードで全画面表示されているSmash BalloonのTikTok動画。画面を上にスワイプすると次のヒントが表示され、フォローボタン、シェアボタン、閲覧ボタンが表示されている。

「スワイプ表示」機能は、ページ上のフィードの表示方法には影響しません。タイルはグリッドまたはリストの配置のまま維持され、異なるのはタップ時の動作だけです。以前のように表示されるのではなく、タップするとフルスクリーンプレイヤーが開きます。

当サイトでは、どのプラットフォームで全画面表示が可能ですか?

4大ショート動画プラットフォームはすべて利用可能です。違いは、どこで設定を有効にするかという点です。

インスタグラム・リールティックトックYouTube ShortsFacebook Reels
どのSmash Balloonプラグインが必要ですか?Instagram Feed Pro 6.14.0 以降TikTok Feeds Pro 1.8.0 以降YouTube Feed Pro 2.10.0 以降Facebook Feed Pro 4.14.0 以降
アップデートしたらすぐに使えるようになりますか?✅ はい、デフォルトではオンになっています⚠️ まだです。各フィードの設定で「スワイプ」を選択してください⚠️ まだです。Shortsフィードで「スワイプ表示」レイアウトを選択してください⚠️ まだです。スイッチを1つ切り替えるだけで、サイト全体で有効になります。
すでに持っているフィードはそのまま維持できますか?✅ はい、フィードのライトボックスがオンになっている限りは✅ はい、Grid、List、またはMasonryレイアウトを使用している場合はそうです❌ いいえ、新しい「Shorts」フィードを作成します✅ はい、リールが含まれているタイムラインのフィードならどれでも利用可能です
「スワイプビュー」では何が開きますか?リールのみ。写真は通常のポップアップ表示のままフィード内のすべての動画フィード内のすべてのショートリールのみ。その他の投稿では通常のポップアップが表示されます。
視聴者は動画からあなたをフォローできますか?✅ @ユーザー名と「フォロー」ボタン✅ @ユーザー名と「フォロー」ボタン⚠️ フィードの下にある「登録」ボタンをクリックすると、YouTubeでそのショート動画が開きます✅ ページ名と「フォロー」ボタン
セットアップにはどれくらい時間がかかりますか?約2分1分ほど約2分、さらに無料のYouTube APIキーが必要です1分ほど
最適すでに「Reels」を投稿しているレストラン、美容室、ショップTikTokを主な発信チャネルとしているクリエイターやブランド「Shorts」として投稿するチュートリアルやヒントFacebookページに「リール」を投稿している地元企業

私のアドバイス:まずは、最も頻繁に投稿しているプラットフォームから始めましょう。同じ動画をあちこちに投稿する場合は、そのうちの1つをホームページ用に選び、残りの動画はそれぞれ最もふさわしいページに追加してください。

WordPressにTikTok風の動画フィードを追加するにはどうすればいいですか?

WordPressにTikTok風の動画フィードを追加するには、Smash Balloon Proフィードプラグインを更新し、「Swipe View」を有効にして、そのフィードをページに配置してください。プラットフォームごとに「Swipe View」の有効化方法が若干異なるため、以下にそれぞれの手順を説明します。

自分のウェブサイトでInstagram Reelsを全画面表示するにはどうすればいいですか?

「Smash Balloon Instagram Feed Pro」をバージョン6.14.0にアップデートすると、リールが音声付きで全画面表示されるようになります。「Instagram Feed」>「設定」>「詳細設定」にある「リールのスワイプ表示を有効にする」という設定は、デフォルトでオンになっているため、特に設定を変更する必要はありません。

  1. 「ダッシュボード」»「アップデート」に移動し、Instagram Feed Pro を 6.14.0 にアップデートしてください。
  2. 設定を確認するには、Instagramのフィード » 設定 » 詳細設定に移動し、「リールのスワイプ表示を有効にする」を探してください。この設定はオンにしたままにしておいてください。
  3. Instagramのフィードが表示されているページを開き、リールをタップしてください。
Instagramフィード設定の詳細タブで、「リールのスワイプ表示を有効にする」トグルがオンになってハイライト表示されている。

「Reels」だけのフィードを表示したいですか?フィードエディタで、「設定」»「フィルターとモデレーション」を開き、「特定の種類の投稿を表示」の下で「Reels」のみにチェックを入れたままにしてください。

エディタを開かずにReels周辺のフィードを変更したいですか?この6.14.0アップデートでは、無料のWPVibeコネクタを通じてChatGPTやClaudeに指示を出すことで、Instagramのフィードを管理できるようになりました。「Instagramフィード」>「設定」>「一般」で「MCP書き込みアクセス」をオンにし、「1行につき2件の投稿を表示し、いいね!を非表示にする」といった内容を入力すると、アシスタントがリアルタイムのフィードを変更してくれます。 設定をくまなく探して1つのオプションを見つける必要がないので、ちょっとした調整にはこの機能が重宝します。

「Shoppable Feed」の機能を含め、詳細をすべて知りたいですか?「訪問者が音付きでInstagram Reelsを全画面表示できるようにする方法」をご覧ください。サイトでのReels活用が初めてですか?まずは「ウェブサイトにInstagram Reelsを埋め込む方法」から始めてみましょう。

訪問者がスワイプして閲覧できるTikTokフィードを埋め込むにはどうすればよいですか?

「Smash Balloon TikTok Feeds Pro 1.8.0」では、エディタでフィードを開き、「Video Player Experience」に移動して、「Swipe」を選択してください。ページ上のフィードの表示はこれまでと変わりませんが、タップするとフルスクリーンビューアが開くようになります。

  1. 「TikTok Feeds Pro」をバージョン1.8.0にアップデートしてください。
  2. 「TikTokフィード」»「すべてのフィード」に移動してフィードを開くか、「新規追加」をクリックしてTikTokアカウントを連携してください。
  3. フィードエディタで「ビデオプレーヤーエクスペリエンス」を開き、「スワイプ」を選択して、「保存」をクリックします。
  4. 新しいフィードの場合は、「埋め込み」をクリックし、「ページに追加」を選択してください。
TikTok Feeds Proのフィードエディタにある「Video Player Experience」パネルで、「Swipe」オプションが選択され、ハイライト表示されている状態

「スワイプ表示」は、グリッド、リスト、メイソンリーの各レイアウトで利用できます。フィードがカルーセルまたはギャラリー形式の場合は、まずこれらのいずれかのレイアウトに変更してください。後でテンプレートを変更する場合は、再度「スワイプ表示」を選択してください。

スクリーンショット付きの詳細な手順については、「ウェブサイト上で訪問者にTikTok動画をスワイプして閲覧してもらう方法」をご覧ください。一度に複数の動画を表示したい場合は、1つのページに複数のTikTok動画を埋め込む方法をご参照ください。

Swipeを使って、自分のウェブサイトにYouTube Shortsを埋め込むにはどうすればいいですか?

「Smash Balloon YouTube Feed Pro 2.10.0」では、新しいフィードを作成し、「Shorts」フィードタイプを選択して、レイアウトを「Swipe View」に設定してください。これにより、Shorts動画は通常の動画とは別の専用のフィードとして表示されます。

  1. YouTube Feed Pro を 2.10.0 に更新してください。プラグイン一覧では「Feeds for YouTube Pro」として表示されています。
  2. YouTubeフィード » すべてのフィードに移動し、「新規追加」をクリックして「Shorts」を選択し、@ハンドル名でチャンネルを追加してください。
  3. フィードエディタで、「フィードレイアウト」を開き、「スワイプビュー」を選択して、「保存」をクリックします。
  4. 「埋め込み」をクリックし、「ページに追加」を選択します。
YouTube Feed Proのフィードエディタにある「フィードレイアウト」パネル。ここでは「スワイプビュー」レイアウトが強調表示されており、その横には「ショーツ」フィードのプレビューが表示されています。

YouTube APIキーが必要です。これはGoogleから無料で取得できるキーで、プラグインが動画を読み込むために使用されます。まだお持ちでない場合は、セットアップ中にプラグインから入力が求められます。

APIキーを含む設定の全手順については、「YouTube Shorts専用のスワイプ可能なフィードを作成する」をご覧ください。Shortsに関するその他のオプション:「YouTube Shortsをウェブサイトに埋め込む方法」。

自分のウェブサイトでFacebook Reelsを全画面表示するにはどうすればいいですか?

「Smash Balloon Facebook Feed Pro 4.14.0」では、「Facebook Feed」>「設定」>「詳細設定」に移動し、「Reelsのスワイプ表示 」をオンにしてください。この機能は、オンにするまではオフになっていますが、一度オンにすると、サイト全体で機能します。

  1. 「Facebook Feed Pro」をバージョン 4.14.0 に更新してください。
  2. Facebookフィードの「設定」に移動し、「詳細設定」タブを開き、「Reelsのスワイプ表示」をオンにして、「変更を保存」をクリックします。
  3. Facebookページのタイムラインフィードがページに表示されていることを確認してください。すでにページの投稿が表示されている場合は、リールもそのフィードに含まれています。
「Facebook Feed Pro」の設定画面の「詳細」タブで、「Reelsのスワイプ表示」設定がオンになっており、ハイライト表示されている状態

「Only Reels」のみがスワイププレイヤーで開きます。同じフィード内の写真、リンク、通常の動画は、これまでと同様にポップアップで開きます。

その他の詳細については、「ウェブサイト上で訪問者にFacebook Reelsをスワイプして閲覧してもらう方法」をご覧ください。一から始める場合は、こちらの「ウェブサイトにFacebook Reelsを埋め込む方法」をご参照ください。

ご自身のサイトでも、このように動画を再生させたいですか?

「Swipe View」は、Instagram Feed Pro、TikTok Feeds Pro、YouTube Feed Pro、Facebook Feed Proの各プラン(Pro、Basic、Plus、Elite)すべてに標準搭載されています。「All Access Bundle」には、これら4つのプランすべてが含まれており、サイト数に制限なくご利用いただけます。14日間の返金保証付きです。

オール・アクセス・バンドル

動画フィードはどこに配置すべきか?

フルスクリーンの動画フィードは、ユーザーが何かを決定しようとしているページで最も効果を発揮します。まずは以下の場所から試してみるといいでしょう:

  • あなたのホームページ。初めて訪れた人は、わずか数秒の動画を通じて、あなたの顔、あなたの空間、そしてあなたの作品を見ることができます。
  • ご予約・ご注文ページ。ドッググルーマーの「施術前・施術後」の写真や、カフェの新メニューが、「予約」または「注文」ボタンのすぐ上に表示されています。
  • 商品ページ。「大きさはどれくらい?」「どうやって使うの?」といった疑問には、商品写真よりも20秒のデモ動画の方が的確に答えてくれます。
  • よくある質問(FAQ)ページ。簡単な操作ガイドの動画をすでに撮影済みですか? その動画が解説している質問の横に掲載しましょう。

どこに配置しても、フィードは常に最新の状態を保ちます。投稿した新しい動画はすべて自動的に表示されるため、忙しくて更新できないときでも、ページはあなたの投稿をリアルタイムで反映し続けます。

WordPressページ上の「Smash Balloon」アカウントのTikTokフィード。プロフィールヘッダー、TikTokの「フォロー」ボタン、キャプション付きの動画がグリッド状に並んでいる。

それぞれの動画を個別に埋め込めばいいんじゃないですか?

可能です。ただし、その場合は大量のコピー&ペースト作業が必要になります。埋め込まれた動画はそれぞれ独立したプレーヤーとして扱われます。次の動画へスワイプして移動することはできず、新しい動画は1つずつ手作業で追加する必要があります。

フィードが場違いに見えるのではないかと心配ですか?そんなことはありません。Smash Balloonのプラグインは、外部のウィジェットとしてではなくWordPress内部で動作するため、フィードはテーマのフォントやスタイルを反映し、サイトの一部のように見えます。

また、ソーシャルメディアの動画を表示するSaaS型のウィジェットツールも数多くあります。その多くは月額制またはサイト単位の課金制で、自社のサーバーから読み込むため、サービスが停止するとウィジェットが空白になってしまう可能性があります。Smash BalloonはWordPress内にフィードのコピーを保存しておくため、プラットフォームで障害が発生してもフィードは表示され続けます。このバックアップキャッシュ機能によってフィードが空白になるのを防ぐ仕組みについて、詳しくはこちらをご覧ください。

すでに175万人以上のユーザーがSmash Balloonを利用しており、あなたの動画は、そうしたユーザーに届けることができる最も説得力のあるコンテンツの一つです。

よくある質問

プラットフォームごとに個別のプラグインが必要ですか?

はい。各プラットフォームごとに専用のSmash Balloonプラグインが用意されています。「Instagram Feed Pro」、「TikTok Feeds Pro」、「YouTube Feed Pro」、そして「Facebook Feed Pro」です。これら4つすべてをご希望の場合は、「All Access Bundle」をご利用ください。初年度は299ドルで、これらすべてのプラグインが含まれています。

「Swipe View」が含まれているプランはどれですか?

すべてのProプラン。各プラグインの「Basic」、「Plus」、「Elite」プランにはすべてこの機能が含まれており、「All Access Bundle」も同様です。「Basic」プランは初年度49ドルからご利用いただけます。

「スワイプ表示」機能によって、フィードの表示は変わりますか?

いいえ。フィードのページ上のレイアウトはそのまま維持され、「スワイプビュー」では、ユーザーが動画をタップしたときの動作のみが変更され、フルスクリーンで開くようになります。TikTokでは、「スワイプビュー」は「グリッド」「リスト」「メイソンリー」の各レイアウトで機能します。YouTubeでは、「スワイプビュー」は「Shorts」フィードで選択するレイアウトであり、ページ上に「Shorts」がタイル形式で表示されます。

後で「スワイプ表示」をオフにすることはできますか?

はい。InstagramやFacebookでは、「設定」>「詳細設定」からこの機能をオフにしてください。TikTokでは、「動画プレイヤーの表示方法」で「ライトボックス」または「インライン」を選択し、YouTubeではフィードのレイアウトを別のものに変更してください。

フィードに「Reels」や「Shorts」だけを表示することはできますか?

はい、InstagramとYouTubeでは可能です。Instagramでは、「設定」>「フィルターとモデレーション」でフィードを「Reelsのみ」に絞り込むと、YouTubeでは「Shorts」フィードタイプを選択すると、Shortsのみが表示されます。TikTokとFacebookでは、「スワイプ表示」で動画とReelsのみが開き、フィード内のその他のコンテンツは引き続き通常のポップアップで開かれます。

今すぐ動画を全画面表示にしましょう

撮影や編集といった大変な作業はすでに終わっています。「Swipe View」は、それらの動画をあなたのサイト上で、フルスクリーンかつ音声付きで再生できる最適な場所を提供し、その場に「フォロー」ボタンも表示します。

1つのプラットフォームのみをご利用の場合は、そのプラットフォーム用のProプラグインだけで十分です。複数のプラットフォームに投稿する場合は、「All Access Bundle」を利用すれば、4つのプラットフォームすべてに加え、その他のSmash Balloonプラグインもすべて、サイト数無制限でご利用いただけます。14日間の返金保証が付いていますので、まずはご自身の動画で試してみてください。

訪問者が動画をスワイプして閲覧できるようにしましょう

「All Access Bundle」なら、Swipe ViewでInstagram、TikTok、YouTube、Facebookのフィードを取得できるほか、Smash Balloonのその他のすべてのプラグインも利用可能です。14日間の返金保証付きです。

オール・アクセス・バンドル

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

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