プラグインを入れすぎてしまうのではないかと心配しているのかもしれません。
購入を決める前に、その仕組みを実際に理解しておきたいと思うかもしれません。
いずれにせよ、これは妥当な質問なので、率直にお答えします。
プラグインを使わずに、WordPressにInstagramの投稿を1つ埋め込むのは、約2分で完了します。
しかし、自動的に更新される複数の投稿が表示される完全なInstagramフィードを実現するには、独自のInstagramアプリを開発する（これには開発者登録とInstagramの承認が必要）か、プラグインを使用するかのいずれかが必要です。
WordPressは2020年10月にInstagramのネイティブoEmbed機能を廃止したため、以前のようにフィードのURLをコピー＆ペーストする方法はもう使えません。
簡単な手順：プラグインを使わずにWordPressにInstagramの投稿を1件追加するには、Instagramでその投稿を開き、3つの点のメニューをクリックして「埋め込み」を選択し、コードをコピーして、WordPressの「カスタムHTML」ブロックに貼り付けます。
フィードを完全に自動更新するには、プラグインか、自作のInstagramアプリが必要です。多くの人は「Smash Balloon Instagram Feed Pro」を利用しており、設定には約5分ほどかかります。
どちらの選択肢もご紹介しますので、ご自身の状況に合わせてどちらが適切かご判断ください。
この記事で
- WordPressにInstagramフィードを追加する2つの方法
- プラグインなしでWordPressにInstagramの投稿を埋め込む方法
- なぜプラグインを使わない方法は完全なフィードには通用しないのか
- インスタグラムのフィードをワードプレスに埋め込む方法
- おまけのヒント：ウェブサイトにInstagram Reelsを簡単に埋め込む方法
- 今すぐWordPressにInstagramフィードを追加しましょう
WordPressにInstagramフィードを追加する2つの方法
どちらの道を選ぶか決める前に、率直な比較を以下に示します：
| 手動埋め込み（プラグイン不要） | Smash Balloon Instagram Feed Pro⭐ おすすめ | |
|---|---|---|
| 複数の投稿を含むフィード全体を表示できますか？ | ❌ いいえ、埋め込みは1投稿につき1回のみです | ✅ はい、投稿数に制限なく、すべての投稿を表示できます |
| 投稿すると自動的に更新されますか？ | ❌ いいえ、新しい投稿は毎回手動で再埋め込みする必要があります | ✅ はい、Instagramの新しい投稿はすべて個別に表示されます |
| これは、公的アカウントと私的アカウントの両方で機能しますか？ | ❌ いいえ、Instagramでは公開アカウントの埋め込みコードのみが生成されます | ✅ はい、ビジネスアカウントとクリエイターアカウントのどちらでも利用可能です |
| 常に正しく表示されるでしょうか？ | ⚠️ 確実に表示されるとは限りません。埋め込み投稿は、ブラウザやプライバシー設定によっては、空白のリンクとして表示されることがあります | ✅ はい、すべてのブラウザやデバイスで一貫して正しく表示されます |
| レイアウトや色をカスタマイズできますか？ | ❌ いいえ、Instagramの埋め込みスタイルは固定のみです | ✅ はい、グリッド、カルーセル、メイソンリー、色やフォントの完全なカスタマイズが可能です |
| コードを編集する必要がありますか？ | ⚠️ 基本的なHTMLです。カスタムHTMLブロックに貼り付けてください | ✅ コーディング不要、ドラッグ＆ドロップ式のウィジェットまたはブロック |
| 最適 | 特定の投稿をブログ記事に一度だけ掲載する | スタイリッシュで自動更新されるInstagramフィードをサイトに表示したいWordPressサイト |
ブログ記事の中に投稿を1つ埋め込むだけで、更新されるかどうかは気にしないのであれば、手動での方法でも全く問題ありません。本格的なフィードのような機能が必要な場合は、プラグインを使うのが現実的な選択です。
プラグインなしでWordPressにInstagramの投稿を埋め込む方法
インスタグラムのフィードをプラグインなしでワードプレスに表示できるのは、まずインスタグラムのアプリ開発者として承認さ れた場合のみです。
とはいえ、プラグインを使わなくても、インスタグラムの投稿をWordPressに埋め込むのは簡単だ。さっそく始めよう。
ステップ1：表示したいインスタグラムの投稿を選ぶ
まず、インスタグラムのアカウントにログインする必要があります。ログイン情報をお持ちでない場合は、インスタグラムのプロフィールにアクセスしてください。
次に、ウェブサイトに埋め込みたいInstagramの投稿をクリックします。投稿の右上に、この⠇のような3つの点が表示されます。
ドットをクリックし、表示されるメニューからEmbedを選択します。
これで、インスタグラム投稿の埋め込みコードがポップアップで表示されます。投稿と一緒にキャプションも埋め込みたい場合は、ここで「キャプションを含める」オプションをチェックしてください。
その後、「埋め込みコードを コピー」ボタンをクリックしてください。
これでインスタグラムの投稿の埋め込みコードをコピーしました。このコードを投稿やページに貼り付けることができます。
ステップ2：ワードプレスに新しいページを作る
次に、WordPressのダッシュボードに移動し、ページ " 新規追加に移動して新しいページを作成します。
代わりにWordPressの投稿を使うこともできます。その場合は、ダッシュボードエリアから投稿 " 新規追加に 進んでください。
WordPressのエディターを開き、先ほどのInstagramの埋め込みコードを貼り付けます。
ステップ3：埋め込みコードを貼り付ける
埋め込みコードを貼り付けるには、まずプラスアイコン（+）をクリックし、カスタムHTML ブロックを選択します。
埋め込みコードをカスタムHTMLブロックに貼り付けます 。インスタグラムの投稿がどのように見えるかを確認するには、上部にあるプレビュー ボタンをクリックしてください。
見た目に満足したら、「Publish 」をクリックすると、Instagramの投稿がウェブサイトに埋め込まれます。
インスタグラムの手動埋め込みでお困りですか？WordPressでInstagramの埋め込み問題を解決する方法をご紹介します。
これで完了だ！これで、プラグインを使わずにWordPressにInstagramの投稿を埋め込む方法がわかりました。
次の質問は、インスタグラムのフィードをウェブサイトに追加する際に、WordPressのプラグインを使うのと使わないのとでは、どちらがいいのか、ということだ。
なぜプラグインを使わない方法は完全なフィードには適さないのか
1つの投稿を超える手動での作業を行う場合は、具体的に何に申し込むのかを明確にしておく価値があります。
1.すべての投稿について、この手順をすべて繰り返す必要があります。
Instagramに新しい投稿を公開し、それを自分のサイトにも掲載したいときは、毎回Instagramに戻って埋め込みコードをコピーし、WordPressを開いて該当するページを見つけ、新しい「カスタムHTML」ブロックを追加して、そこに貼り付ける必要があります。
1件の投稿なら問題ありません。
9件や12件の投稿を常に最新の状態に保つとなると、それはもうパートタイムの仕事並みの労力になります！
2.埋め込み投稿は必ずしも表示されるとは限りません。
これは、ほとんどのチュートリアルで省略されがちな部分です。
訪問者のブラウザ設定、広告ブロック機能、またはプライバシー拡張機能によっては、Instagramの埋め込みコンテンツが、Instagramへのリンクのみが表示された空白のボックスとして表示されることがあります。訪問者には何も表示されません。代替表示もありません。誰かに指摘されない限り、表示が崩れていることに気づくことはないでしょう。
3.2020年10月、事態は単純ではなくなった。
以前は、WordPressがInstagramのoEmbedに対応していたため、InstagramのURLを貼り付けるだけで自動的に埋め込まれていました。
2020年10月、FacebookがAPIを変更したことで、その機能は使えなくなりました。
現在、埋め込みを行うたびに、個々の投稿から手動でコードをコピーする必要があります。
4.実際のフィードを利用するには、Instagramの開発者として登録する必要があります。
プラグインを使わずに、自動的に更新されるフィードをすべて表示するには、Instagramのアプリ開発者として登録し、Instagramのアプリ審査プロセスを経て、認証フローを構築し、コードを自ら管理する必要があります。
これは週末のちょっとしたプロジェクトではありません。継続的な技術的取り組みなのです。
スマッシュバルーンに所属していなかった頃、インスタグラムのフィードを個人サイトに手動で埋め込むことを考えていた。
しかし、やり始めてみると、WordPressのソーシャルメディア・プラグインを使わないといけないので、ややこしいことに気づいた：
- Instagramにアプリ開発者として登録する：Instagramはあなたのアプリケーションを審査し、基準を満たした場合のみ 承認する必要があります。やばい。
- Instagram Developersのウェブサイトで新しいクライアントを登録する：さらに、暗黙認証を設定する必要があります。
- アクセスコードを生成します：このためには、自分のアプリを認証し、メディアへのアクセスを許可する必要がある。
- JavaScriptを使え：HTMLコードにも取り組む
最悪なのは？
せっかく時間と労力をかけて作ったのに、フィードに表示できるのは最後の20枚だけ 。なんとも残念だ。
一方、インスタグラムのフィードをワードプレスに埋め込むには、ワードプレスのプラグインを使えば簡単だ：
- 使いやすいプラグインをダウンロードしてインストールしましょう：Smash BalloonのInstagram Feed Proプラグインを試すことができる。
5分もあれば、WordPressにInstagramのフィードを簡単に追加できる。そう、分かりにくいHTMLコードやJavaScriptに取り組むことなく！
さらに、数回クリックするだけで、インスタグラムのフィードがウェブサイト上でどのように見えるかをカスタマイズすることもできる。
また、Instagram Feed Proを使用している場合、フィードは自動的にウェブサイトのデザインをコピーし、ブランディングに合わせることができる。
ここからInstagram Feed Proを始めると、数分であなたのInstagramフィードを埋め込むことができます！
5.何かが壊れた場合は、自己責任となります。
上記の本当の理由を読んでもなお、プラグインを使わずにインスタグラムのフィードをウェブサイトに追加しようとしたらどうなるだろうか？
アプリ開発者としての登録やアクセスコードの生成に問題がある場合は、Instagramに直接お問い合わせください。
とはいえ、100％問題を解決してくれるという保証はない。
ウェブサイトのHTMLコードを間違えてしまったら？あるいはJavaScriptのやり方がわからない？
まあ、HTMLを勉強するか、開発者を雇うかのどちらかだが、これらの選択肢には多くの時間とお金がかかる。
もちろん、WordPressにシンプルなInstagramフィードを追加するためだけに何千ドルも投資する意味はない。
ただし、Smash Balloonの「Instagram Feed Pro」プラグインを利用すれば、信頼できるサービスに任せておけば安心だと実感できるでしょう。
このプラグインのカスタマーサポートチームは、WordPressのエキスパートで構成されており、どのような段階でも喜んでお手伝いします。
1,000,000人以上のアクティブユーザーと 4.9つ星の高い評価を得ているこのプラグインは、何か正しいことをしているに違いないと思いませんか？
インスタグラムのフィードをウェブサイトに簡単に追加する方法をお探しなら、代わりにInstagram Feed Proプラグインを使うことができます。その方が簡単で速い。5分以内に設定し、フィードを表示することができますよ。
それに、プラグインを使うほうが、混乱したHTMLで貴重な時間を無駄にするよりもいい。
また、高価な開発者を雇うよりもずっと安上がりだ。
たった1つのInstagramフィードプラグインで、Instagram Feed Proを使用することもできます：
- あなたのウェブサイトのテーマを継承し、フィードで同じフォント、色、スタイルを自動的に使用します。
- ブランド化されたハッシュタグフィードを埋め込み、関連するInstagramの写真や動画で訪問者を魅了する。
- ウェブサイトに好きなだけインスタグラムのフィードを表示する
- 各投稿のInstagramのコメントと「いいね！」の数を表示する
- インスタグラムのリールフィードをワードプレスに埋め込む
- 素晴らしいライブフィードカスタマイザーを使って、インスタグラムのフィードのデザインを変えよう
- インスタグラムで言及されたことをウェブサイトで紹介する
- 買い物しやすいInstagramフィードを作って売上を伸ばす
...などなど。Instagram Feed Proがあなたのためにできることすべてをここでチェックしてください。
インスタグラムのフィードをウェブサイトに表示するのは、プラグインを使えば本当に簡単なのか？
質問に答えるために、次のセクションに進もうか？
インスタグラムのフィードをワードプレスに埋め込む方法
5分もかからずに、Instagram Feed Proプラグインを簡単にセットアップして、あなたのサイトにフィードを表示することができます。その方法をご紹介しよう：
ステップ1：Instagram Feed Proをダウンロードしてインストールする
まず、Instagram Feed Proを入手する必要がある。そして、あなたのWordPressウェブサイトにインストールしてください。
プラグインのインストール方法がわからない？WordPressプラグインのインストールに関するチュートリアルをご覧ください。
プラグインをインストールして有効化したら、次のステップに進んでください。
ステップ2：新しいインスタグラムフィードを作成する
その後、プラグインを使ってインスタグラムのフィードを作成できる。
まず、WordPressの管理ダッシュボードからInstagramのフィード " すべてのフィードに 移動します。
このページで、新規追加ボタンをクリックします。
インスタグラムのフィードタイプを3つのオプションから選択できるようになりました：
- ユーザーのタイムライン インスタグラムの最新投稿をウェブサイトに表示
- パブリックハッシュタグ： 特定のハッシュタグが付いたインスタグラムの投稿を表示
- タグ付けされた投稿 あなたのInstagramアカウントがタグ付けされた写真や動画を埋め込む
複数のオプションを選択し、異なるフィードタイプを1つにまとめることができます。
フィードの種類を選択したら、「次へ」をクリックして次に進みます。
このチュートリアルでは、ここでユーザーのタイムラインを選択します。
数回クリックするだけで、プラグインがあなたのために作成する新しいInstagramフィードができあがる。ステップ3に進み、Instagramのアカウントに接続することができる。
ステップ3：インスタグラムのアカウントに接続する
次に、このプラグインにクリエイターまたはビジネスアカウントを接続するかどうかを選択できます。
もっと詳しく知りたい方は、Instagramアカウントのアップグレードに関する便利なガイドをご覧ください。
開始するには、ソースの追加ボタンをクリックします。
インスタグラムの接続には2つのタイプがあります：
- ビジネス・ベーシック： プロフィールから写真やリールを埋め込む
- ビジネスアドバンス：ハッシュタグフィードやショッパブルフィードなど、フィードの種類を増やすことができます。
オプションを選んだら、「接続 」をクリックして次に進む。
FacebookかInstagramを開き、アカウントの接続を完了する。
このチュートリアルでは、先に進み、Instagramと接続するをクリックします。
Instagramのコンテンツを埋め込むことができるように、プラグインに読み取り専用のアクセス権を与えることができるようになりました。このアクセス権では、Smash Balloonはあなたの投稿を見ることができるだけで、変更を加えることは一切できません。
ポップアップの「許可」 ボタンをクリックして、読み取り専用アクセス権を与える。
プラグインはあなたをウェブサイトに戻すので、新しいフィードをInstagramに接続し終えることができる。
次へ」 ボタンをクリックすると、このインスタグラムアカウントが新しいフィードのソースとして確認される。
ステップ4：新しいインスタグラムのフィードをカスタマイズする
Instagramアカウントに接続すると、ライブプレビュー付きのビジュアルフィードエディターでフィードが開きます。
左側には、Instagramフィードのカスタマイズオプションが表示されています。これらのオプションを使用して、フィードのレイアウト、ヘッダーのスタイル、配色、投稿のスタイルなどを変更できます。
インスタグラムフィードのカスタマイズオプションを変更すると、カスタマイザーの右側にあるライブプレビューでどのように見えるかを確認できる。
さっそくインスタグラムのフィードをデザインしてみよう。
私は通常、インスタグラムのフィードのレイアウトをパーソナライズすることから始める。まずこれを行うには、フィードレイアウトオプションをクリックしてカスタマイズを始める。
フィードのレイアウトを4つのオプションから選択できるようになりました：グリッド、カルーセル、メイソンリー、ハイライトです。
最初のオプションは、インスタグラムの投稿を行と列で表示するグリッドレイアウト です。
すべての写真が同じサイズなので、このレイアウトを選ぶとインスタグラムのフィードがきれいに見える。
カルーセルレイアウトを 使えば、Instagramのスライダーをウェブサイトに表示できます。そうすることで、訪問者があなたのサイトと交流する別の方法を提供し、エンゲージメントを高めることができます。
インスタグラムの投稿をオリジナルの比率で表示したいですか？それなら、メイソンリーレイアウトを 選べばいい。
インスタグラムのギャラリーをウェブサイトに埋め込み、訪問者に写真全体を見せることができます。
最後に、特定のインスタグラム投稿を非常に目立たせることができるハイライト・レイアウトが ある。このレイアウトを使えば、ショッピング可能なインスタグラムフィードでベスト商品をアピールすることができます。
レイアウトを選んだら、忘れずに「変更を保存」をクリックしてください。
メインのカスタマイズ・オプションに戻るには、小さなカスタマイズ・ ボタンをクリックします。
その後、Color Schemeオプションをクリックして、Instagramフィードの色を選ぶことができる。
インスタグラム・フィード・プロでは、4つの異なる配色から選ぶことができます：
- テーマからの継承：ウェブサイトの色を継承
- 明るい：暗いフォントとともに明るい背景を表示する。
- ダーク：暗い背景と明るい文字色を選ぶ。
- カスタム：Instagramフィードのすべての色を手動で選ぶ
配色に満足したら、「保存」をクリックします。
このようにして、残りのカスタマイズ・オプションを使って、投稿レイアウト、ヘッダー・スタイル、フィード・サイズ、ライトボックスなどを設定することができる。カスタマイズが終わったら、もう一度保存を クリックする。
ステップ5：ウェブサイトにインスタグラムのフィードを埋め込む
いよいよInstagramのフィードをウェブサイトに埋め込む時が来た。このプラグインを使えば、2つの超簡単な方法があります：
- インスタグラムのフィードをページに埋め込む
- インスタグラムのフィードをサイドバーやフッターに埋め込む
インスタグラムのフィードをページに埋め込む
あなたのライブフィードエディタからInstagramのフィードを埋め込むことができます。開始するには、上部の埋め込み ボタンをクリックしてください。
次に、新しいポップアップでインスタグラムのフィードを埋め込む場所を選択できます。ページに 追加ボタンをクリックして次に進みます。
次に、インスタグラムのフィードを表示するページを選択し、追加ボタンをクリックします。
このプラグインは、Instagramのフィードを埋め込むことができるように、そのページにあなたを送ります。
そのためには、小さなプラス（＋）アイコンをクリックし、新しいコンテンツブロックをページに追加する。
検索バーで「Instagram」を探し、検索結果のInstagram Feed オプションをクリックする。
最後にPublishを クリックすると、インスタグラムのフィードが公開される。
このチュートリアルのステップに従うだけで、あなたのWordPressページにInstagramのフィードが表示されます。これでウェブサイトを開いて、インスタグラムのフィードがどのように見えるかを確認できる。
続いて、インスタグラムのフィードをウェブサイトのサイドバーやフッターに埋め込む方法を見てみよう。
Instagramのフィードをサイドバーやフッターに埋め込む
また、InstagramフィードをInstagramウィジェットとしてサイドバーやフッターエリアに埋め込むこともできる。
まず、ライブフィードエディターでInstagramのフィードを開きます。まだ開いていない場合は、WordPressのダッシュボードを使用してInstagramのフィード " すべてのフィードに移動します。
先ほど作成したInstagramのフィードをクリックする。
ライブフィードエディターでインスタグラムのフィードが開くのが見えます。
右上の埋め込み ボタンをクリックして、フィードの埋め込みを開始します。
その後、フィードを埋め込む場所を尋ねるポップアップが表示されます。
ポップアップで、ウィジェットに追加ボタンをクリックします。
プラグインはウィジェットページを 開くので、Instagramフィードウィジェットを追加できる。
インスタグラムのフィードをサイドバーに埋め込むには、サイドバーパネルを クリックしてください。
フッターにインスタグラムのフィードを埋め込みたい場合は、フッターパネルをクリックしてください。
このチュートリアルでは、インスタグラムのフィードをウェブサイトのフッターに埋め込みます。
ここでプラスアイコン（+）をクリックして新しいウィジェットを追加し、オプションからInstagramフィードウィジェットを 選択する。
あなたのウェブサイトにInstagramフィードウィジェットを公開するために更新を クリックしてください。
ウェブサイトを開くと、それがどのように見えるかを見ることができる。
おまけのヒント：ウェブサイトにInstagram Reelsを簡単に埋め込む方法
ワードプレスサイトにソーシャルフィードを表示する無数のユーザーを支援してきた私は、インスタグラムのリールのようなダイナミックなコンテンツを追加することで、エンゲージメントに素晴らしい効果があることを知っている！
リールはコンテンツを新鮮に保つだけでなく、高い到達率のおかげでより多くの訪問者を引き寄せる。
Instagramのリールをウェブサイトに統合することで、魅力的な動画体験を提供し、ユーザーのブランドとの交流を長続きさせ、サイトの魅力と視聴者の定着率を高めることができます。
Smash Balloon Instagram Feed Proプラグインを使用すると、リールを埋め込む最も簡単な方法です。シンプルさを念頭に置いて設計されているので、技術的なスキルがなくてもリールを追加できます。数回クリックするだけです！
インスタグラムのリールをウェブサイトに埋め込む方法については、次の記事を読んでほしい。
それで終わりだ！
この記事では、プラグインを使わずにインスタグラムの投稿をウェブサイトに追加する方法を学んだ。
プラグインを使ってインスタグラムのフィードをワードプレスに埋め込む方法も知っているので、アカウントのエンゲージメントを高め、ウェブサイトのトラフィックも増やすことができる。
インスタグラムのフィードをウェブサイトに表示する最も簡単な方法をお探しですか？
Smash BalloonのInstagram Feed Proを今すぐ始めましょう！
さらに一歩進んで、すべてのソーシャルメディアのフィードを表示したいですか？次の記事では、WordPressにソーシャルメディアのフィードを追加する方法をご紹介します。
インスタグラムのリールの再生回数を増やす方法については、次の記事も気に入っていただけるかもしれない。
今すぐWordPressにInstagramフィードを追加しましょう
投稿を1つだけ埋め込みたい場合は、手動の方法でも問題ありません。必要な手順はすべて上記に書かれています。
しかし、投稿するたびに手動で埋め込みをやり直す手間をかけずに、サイト上で自動的に更新される本物のInstagramフィードを実現したいなら、「Smash Balloon Instagram Feed Pro」が実用的な解決策となります。
セットアップには約5分かかり、その後は自動的に更新されます。
