Instagramでリールを投稿していて、それに比べて自分のウェブサイトがなぜかずっと静的に感じられると悩んでいるなら、あなただけではありません。
これは、自分のサイトをソーシャルメディアのコンテンツと同じくらい最新のものにしたいと考えているWordPressサイトの運営者から、私が最もよく耳にする要望の一つです。
朗報です。Instagram Reelsをウェブサイトに掲載するのは実に簡単です。私が実際にどうやっているのか、その方法を詳しくご紹介します。
簡単な答え：Instagram Reelsをウェブサイトに埋め込む方法は2つあります。
手動の方法では、Instagramから埋め込みコードをコピーし、サイトに1つのリールずつ貼り付けることができます。プラグインを使用する方法では、InstagramアカウントをWordPressに直接連携させ、新しい投稿があるたびに自動的に更新されるカスタマイズ可能なフィードに、すべてのリールを表示させることができます。私はこのために「Smash Balloon Instagram Feed Pro」を使用しています。
セットアップには約5分かかり、コーディングは不要です。
率直に申し上げますと、私はSmash Balloonに勤務しているため、当社のプラグインをおすすめします。ただし、手動での方法についても順を追って説明します。そうすれば、ご自身の目的に合わせてどちらが適しているか判断できるでしょう。
この記事で
- ウェブサイトにInstagram Reelsを埋め込む2つの方法
- WordPressでInstagramのリールを埋め込む最も簡単な方法とは？
- インスタグラムのリールをウェブサイトに埋め込む方法（簡単な方法）
ウェブサイトにInstagram Reelsを埋め込む2つの方法
手順に入る前に、2つの選択肢を簡単に並べて比較してみましょう：
Instagramの埋め込み（手動） Smash Balloon Instagram Feed Pro⭐ おすすめ 一度に複数のリールを表示できますか？ ❌ いいえ、埋め込みコード1つにつき1つのリールです ✅ はい、Reelsの全ライブラリが1つのフィードにまとめられています 新しいリールは自動的に表示されますか？ ❌ いいえ、毎回新しいコードを貼り付ける必要があります ✅ はい、新しいリールはそれぞれ個別に表示されます レイアウトはカスタマイズできますか？ ❌ いいえ、Instagramの埋め込みスタイルは固定のみです ✅ はい、グリッド、カルーセル、メゾニー、またはハイライト コードや開発者が必要ですか？ ⚠️ 一部の配置には基本的なHTMLの知識が役立ちます ✅ いいえ、完全にビジュアル操作で、コーディングは不要です ページの読み込み速度に影響しますか？ ⚠️ はい、InstagramのスクリプトはLCPを低下させる可能性があります ✅ いいえ、このプラグインはフィードを効率的に読み込みます ビジネスアカウントとクリエイターアカウント、どちらが必要ですか？ ✅ いいえ、どの公開Instagramアカウントでも利用可能です ⚠️ はい、API接続には必須です 最適 ブログ記事にリールを1つ追加する 自動的に更新される、プロフェッショナルなReelsフィードを掲載したいサイト 投稿やページ内で特定のReelを1つだけ共有したい場合は、手動での方法でも問題ありません。
しかし、ホームページに「Reels」セクションを設けたい場合や、常に最新のコンテンツを表示する専用ページを作りたい場合は、このプラグインが最適です。一度設定すれば、その後は自動的に動作します。
✅Instagram Reelsを埋め込む最速の方法をお探しですか？
「Smash Balloon Instagram Feed Pro」を使えば、ウェブサイトにリールを自動的に表示できます。コーディングや手動での埋め込みは不要で、Instagramのアップデートによる互換性の問題も発生しません。今すぐInstagram Feed Proをチェックしてみてください！
WordPressでInstagramのリールを埋め込む最も簡単な方法とは？
WordPress用の最高のInstagramフィードプラグインであるSmash Balloon Instagram Feed Proを使用すると、わずか数クリックでInstagramのリールをウェブサイトに表示できます。
Instagram Feed Proを使えば、Instagramのリールを簡単に埋め込み、カスタマイズし、表示することができます。使い方は超シンプルで、ステップバイステップのガイドに従ってリールを公開するなら完璧です。
さらに、Instagram Feed ProはどんなWordPressウェブサイトとも相性抜群です。そのシンプルで明確なオプションを使って、ほんの数分で好きなページにInstagramのリールを追加することができます。
このチュートリアルのためにこのプラグインを選んだ理由を簡単に説明しよう：
- 素早く簡単なセットアップで、WordPressサイトに数分でリールを設置できます。
- インスタグラム・フィード・プロは軽量なので、大量の動画を表示することができ、サイトの読み込みもこれまでと同じように速い。
- リールに加えて、インスタグラムのフォトギャラリー、メンション、ストーリー、さらにはショッピング可能なフィードを埋め込むことができる。
- プロのデザイナーが作成した美しいテーマとテンプレートが付属しています。
- ビジュアルカスタマイザーで、インスタグラムリールのデザインを完全にコントロールできます。
これは私が言っていることではありません。100万以上のサイトがInstagram Feed Proを使用しており、4.9/5つ星の評価を得ている。
リールの埋め込みがどれだけ簡単か試してみたい方は、今すぐInstagram Feed Proを入手してください。
インスタグラムのリールをウェブサイトに埋め込む方法（簡単な方法）
この方法では、Instagram ReelsのフィードをWordPressに埋め込むプラグインを使う。
全体のプロセスはかなり速く、Instagram Feed Proは新しいリールが投稿されるたびにフィードを更新し続ける。
以下のステップを踏むだけだ：
ステップ1： Smash Balloon Instagram Feed Pro プラグインをインストールする
まず、ここでInstagram Feed Proを入手し、WordPressウェブサイトにインストールする。
方法がわからない？WordPressのプラグインをインストールする方法については、こちらのステップバイステップガイドをご覧ください。
ステップ2：Instagramのリールフィードを作成する
このWordPress Instagramプラグインの準備ができたら、Instagramのリールを表示するために使用できるInstagramのフィードを作成することができます。
まず、WordPressのダッシュボードからInstagramのフィード " すべてのフィードメニューに移動します。
このページで、上部にある「新規追加」 ボタンをクリックします。
そうすると、プラグインがインスタグラムのフィードを3つのフォーマットから選ぶように聞いてくる：
- ユーザーのタイムライン：インスタグラムプロフィールのコンテンツを表示
- 公開ハッシュタグ：選択したハッシュタグを持つすべてのInstagramの投稿を埋め込む
- タグ付けされた投稿あなたのアカウントにタグ付けされたInstagramの写真や動画を表示します。
また、複数のオプションを選択し、異なるインスタグラムフィードタイプを1つにまとめることもできる。
続行するには、フィードの種類を選択し、[次へ]をクリックします。
ステップ3：InstagramのリールフィードをInstagramに接続する
企業やクリエイターのインスタグラムアカウントと連携させることで、インスタグラムの写真や動画、リールなどをウェブサイトに表示することができます。
詳しくは、ビジネスまたはクリエイターのInstagramアカウントに切り替えるためのガイドを参照してください。
準備はいいですか？まず、ソースの追加ボタンをクリックしてください。
そうすると、ビジネス・ベーシック接続かビジネス・アドバンス接続かを選択するポップアップが開きます。
- ベーシック： ベーシック接続では、自分のアカウントからインスタグラムの写真と動画のみを埋め込むことができます。
- 上級者向け：ハッシュタグフィード、タグ付きフィード、インスタグラムストーリーズなど、さまざまなインスタグラムコンテンツを表示できます。
続行するには、接続タイプを選択し、接続 ボタンを押すだけです。
この例では、単純な動画のフィードが欲しいだけなので、Basic 接続タイプにする。
ポップアップで接続タイプを選択した後、Instagramと接続をクリックします。
これでウェブブラウザでInstagramが開き、フィードとInstagramアカウントの接続が完了する。
ここで、Instagram Feed Proは、アカウントへの読み取り専用アクセスを要求します。このアクセス権を使用すると、プラグインはInstagramのコンテンツを表示することだけができ、変更を加えることはできないので、Smash Balloonは完全に安全です。
許可」をクリックして、インスタグラムのアカウントとの接続を完了することができます。
これで、プラグインがあなたをウェブサイトに戻してくれる。
ここで、「次へ」をクリックして、このアカウントをInstagramフィードのソースとして確認することができます。
一度ソースを追加すれば、自分のサイトを離れることなく、好きなだけ多くのインスタグラムフィードに自由に再利用することができる。
手動での埋め込みやAPIの変更に手間をかけたくないですか？
Instagram Feed Proは、埋め込み後にInstagram Reelsを自動的に更新します。今すぐInstagram Feed Proをチェックしてください。
ステップ4：インスタグラムのリールをカスタマイズする
リールを簡単にカスタマイズできるよう、Instagram Feed Proにはインポート可能な美しいテーマが用意されている。
ワンクリックで、色、アイコンのスタイル、ヘッダーデザインなどを変更できます。下のオプションからテーマを選択してください：
- デフォルト
- モダン
- ソーシャルウォール
- 概要
- オーバーラップ
テーマを選択したら、Nextをクリックして次に進みます。
次に、Instagram Feed Proでは、フィードテンプレートを選択することができます。これにより、サイト上のインスタグラムコンテンツのレイアウトを即座に変更することができます。
オプションからInstagramフィードのテンプレートを選択し、「次へ」をクリックします。
テーマとフィードテンプレートの選択が終わると、プラグインからビジュアルフィードカスタマイザーに移動します。
ここでは、フィードのレイアウト、カラースキーム、ヘッダースタイル、ギャラリーのサイズなどをカスタマイズするオプションを見つけることができます。
右側には、インスタグラムのフィードのライブプレビューが表示されます。
インスタグラムのフィードをフィルタリングして、ビデオリールを表示することができる。
まず、上部にある「設定」 オプションを選択し、その下にある「フィルターとモデレーション」 オプションをクリックします。
ここから、フィードに表示するInstagramの投稿の種類を選択できます。左側を下にスクロールし、「特定のタイプの投稿を表示 」オプションを探します。
Instagramのリールフィードにするには、Reelsに チェックを入れる。
その後、Saveボタンをクリックして変更を確定します。
次に、上部にある「設定」 ボタンをクリックして、Instagramフィードのカスタマイズを続けることができる。
ここでカスタマイズを クリックし、ここからメインのカスタマイズオプションに戻る。
ここにはたくさんのオプションがあるので、私が普段どのようにリールをカスタマイズしているかを紹介しよう。
私が変更する最初のオプションはレイアウトで、動画の配置を変更します。
そのためには、左側にあるフィードレイアウトオプションを探します。
フィードのレイアウトが4種類から選べるようになりました：
- グリッド：Instagramの大量の動画を一度に整然とした行と列で表示する。
- カルーセル：Instagramのフィードをインタラクティブなスライドショーのカルーセルに変える
- 石積み：さまざまな柱を使用して、動画をオリジナルの比率で表示する。
- ハイライト：インスタグラムの動画にフォーカスを当て、特定の投稿をハイライトします。
レイアウトを選択したら、Saveボタンをクリックして変更を確定します。
カスタマイズ・ボタンをクリックして、メインのカスタマイズ・オプションに戻ります。
とても簡単なので、ここでもうひとつデザインを変えてみよう。
投稿」をクリックすると、インスタグラムの各投稿の見た目を変更できる。
ここから、インスタグラムの投稿を表示する2つの方法を選ぶことができる：
- ボックス型：インスタグラムの投稿とキャプションの周りに小さなボックスを追加します。
- レギュラー あなたの投稿をボックスなしで背景に表示します。
ボックス型オプションを選択した場合、投稿の背景色、ボーダー、ボックスシャドウを以下で選択することもできます。
インスタグラムの投稿に満足したら、「保存」をクリックするのを忘れずに。
ご覧の通り、Instagram Feed Proを使えば、Instagramのコンテンツをウェブサイトに表示する方法を超簡単にカスタマイズできます。
残りのオプションを使って、ヘッダー、インスタグラムフィードテンプレート、投稿スタイル、ボタンデザインなどを変更できる。
最後に、Instagramフィードのデザインに満足したら、「保存」をクリックする。
ステップ5：ウェブサイトにインスタグラムのリールを埋め込む
このプラグインを使用すると、Instagramの動画を埋め込むための2つの主要な方法があります：
- あなたのページで
- サイドバーまたはフッター
以下、この2つの方法を見ていこう：
インスタグラムのリールをページに埋め込む
ライブプレビュー付きのビジュアルフィードカスタマイザーを使えば、数クリックでInstagram Reelsをウェブページに埋め込むことができます。
そのためにはまず、上部にある埋め込み ボタンをクリックします。
さて、Instagram Feed Proは、あなたのInstagramフィードの場所を選択するように尋ねます。このポップアップを使用して、ページに埋め込むか、ウィジェットとして埋め込むか、ここにショートコードをコピーすることができます。
ポップアップの「ページに追加 」ボタンをクリックするだけです。
次に、ポップアップがあなたのウェブサイトのWordPressページのリストを表示します。
続行するには、リストからページを選択し、追加ボタンをクリックするだけです。
そうすると、プラグインがWordPressのエディターでページを開き、Instagramリールを埋め込むことができます。
まず、プラスアイコン（＋）をクリックして、新しいコンテンツブロックを追加します。
次に、上部の検索バーを使って「Instagram」 ブロックを探す。
検索結果からInstagram Feed ブロックをクリックし、リールを埋め込む。
アップデートをクリックすれば、インスタグラム・リールがあなたのウェブサイトに掲載されます。
ウェブサイトを開くと、インスタグラムのコンテンツがウェブページに表示されます。
Instagramのリールをサイドバーやフッターに埋め込む
このプラグインを使えば、ウェブサイトのサイドバーやフッターにリールを表示するInstagramウィジェットを作成できる。
まず、ダッシュボードからInstagramのフィード " すべてのフィードメニューを開き、先ほどのInstagramのフィードを選択します。
そうすれば、ビジュアルフィードカスタマイザーで再びフィードを開くことができます。
ここから、右上の埋め込み ボタンをクリックして、インスタグラム・リールの埋め込みを開始します。
それをクリックすると、インスタグラム・リールをどこに埋め込むかを尋ねるポップアップが開きます。
今回は、ポップアップの「ウィジェットに追加」 ボタンをクリックします。
これで、新しいInstagramウィジェットの場所を選択できます。
サイドバーにリールを埋め込むには、サイドバーパネルを クリックしてください。
また、フッターパネルをクリックして、ウェブサイトのフッターにリールを表示することもできます。
ここでは例としてサイドバーを使うことにする。
下部のプラスアイコン（+）をクリックして、新しいウィジェットを追加できます。
最後に、オプションからInstagramフィードウィジェットを 選択します。
その後、アップデートをクリックすれば、あなたのインスタグラム・リールが公開されます。
あなたのサイトを開けば、私の例のように見えるはずだ：
WordPressウェブサイトにInstagramのリールを埋め込む2つの方法
ウェブサイトにインスタグラムのリールを表示するには、2つの方法があります：
- 手動でHTML埋め込みコードを使用して、ウェブサイトにインスタグラム・リールを手動で追加する。
- 自動で： Instagram Feed Proを使用して、ウェブサイトに複数のInstagramリールを自動的に埋め込みます。
リールを1つだけ見せたいだけで、ちょっとしたコードの扱いを気にしないのであれば、手動の方法が有効だ。
インスタグラムのリールを手動で埋め込むには？
1.ウェブブラウザでinstagram.comを開きます。
2.埋め込みたいInstagram Reelを見つけてクリックする。
3.3つの点（...）をクリックします。メニューがポップアップしますので、埋め込み オプションを選択してください。
4.その後、ポップアップに表示される「埋め込みコードをコピー」をクリックします。
WordPressのページまたは投稿を開き、カスタムHTML ブロックに貼り付けることができます。
ご覧の通り、少し時間はかかるが、インスタグラムのリールを1つだけサイトに掲載したいのであれば、適切なオプションだ。
この方法は便利だが、いくつかの大きな欠点があり、企業経営者や専門家、ブロガーには不向きだ：
- 各投稿ごとに埋め込みコードを生成し、WordPressウェブサイトに挿入する必要があります。これには多くの時間と労力がかかります。
- リールの見栄えを変えたい場合は、大量のカスタムHTMLコードスニペットやiFrameを扱う必要があります。
- この方法は自動的ではないので、新しいリールが投稿されるたびに、もう一度このプロセスを繰り返さなければならない。
- 万が一、HTMLコードを挿入する際に何か問題が発生しても、手を差し伸べてくれるサポートチームがいない。
なぜウェブサイトにインスタグラムのリールを埋め込むのか？
ウェブサイトを訪れた人々に、顧客の声やレビューを掲載したインスタグラム・リールを見せることができます。こうすることで、ブランドへの信頼を築き、コンテンツへの関心を維持することができます。
さらに、リールは統計的に、単純なテキストや写真よりもずっと魅力的だ。
その結果、ウェブサイト訪問者をより長くサイトに留めることができ、同時により多くの閲覧、「いいね！」、インスタグラムのフォロワーを獲得することができる。
TikTokやYouTube動画と同様に、Instagram Reelsを使用して、カスタマーレビュー、お客様の声、製品デモなどのユーザー生成コンテンツ（UGC）をWordPressウェブサイトで表示することもできます。
よくある質問
ウェブサイトにビデオを埋め込むことはできますか？
どのようなプラットフォームを使っていても、動画を簡単に埋め込むことができます。実際、動画を埋め込むことは、貴重なスペースを節約できるため、サイトにアップロードするよりも良い場合があります。
インスタグラムの投稿をウェブサイトに埋め込むには？
投稿にある3つの点（...）のアイコンをクリックし、埋め込みオプションを選択してみてください。そうすれば、このコードをあなたのウェブサイトに挿入することができます。 あるいは、投稿を取得してくれるプラグインを使うこともできる。軽量で、新しい投稿を自動的に埋め込むことができるので、Instagram Feed Proをお勧めする。
WordPressのウェブサイトにリールを追加するには？
通常のインスタグラムの投稿と同じように、3つの点のアイコンをクリックし、「埋め込み」をクリックします。埋め込みコードが生成され、ウェブサイトに挿入することができる。 それが複雑に聞こえる場合は、代わりにInstagram Feed Proのようなプラグインを使用することができます。このツールは、あなたのインスタグラム・リールを自動投稿してくれる。
インスタグラムのストーリーをウェブサイトに埋め込むことはできますか？
デフォルトでは、ストーリーは通常の投稿とはかなり異なるため、埋め込むことはできません。 しかし、WordPressを使用している場合は、Instagram Feed Proを使用してプロフィールと投稿を埋め込むことができます。
あらゆるウェブサイトにインスタグラム・リールを埋め込む
インスタグラムのリールやその他のインスタグラムのコンテンツを人気のウェブサイト・ビルダーに埋め込む方法を探ってみよう：
- InstagramのフィードをElementorに追加する方法（5分で）
- DiviのウェブサイトにInstagramのフィードを追加する方法
- Beaver BuilderにInstagramフィードを追加する方法
ウェブサイトにインスタグラムのリールを埋め込む
Instagram Reelsを簡単に埋め込む準備はできていますか？
Instagram Feed Pro を始めましょう。わずか数クリックでウェブサイトにリールを表示できます。コーディング不要です。
素晴らしいステップ・バイ・ステップで、他の同様のリソースへのリンクもありがとう！
自分でビデオや写真のデータベースやプレーヤーを作ろうとするより、ずっと効率的だ！
時間を節約してくれてありがとう🙂。
インスタグラムのリールを埋め込む簡単なチュートリアル！ビジュアルはマーケティングの鍵であり、ソーシャルメディアを追加することでより多くのエンゲージメントをもたらす！