ウェブサイトにインスタグラムを表示する方法(簡単な方法)
ホーム ブログ ウェブサイトにインスタグラムを表示する方法(簡単な方法)

ウェブサイトにインスタグラムを表示する方法(簡単な方法)

ウェブサイトにインスタグラムを表示する方法

インスタグラムのフィードをウェブサイトで簡単に表示したいですか?

最新のインスタグラムの写真、リール、動画をサイトに掲載することは、サイトを新鮮に保ち、より魅力的に見せ、人々がウェブサイトからインスタグラムページに移動するのを助ける素晴らしい方法です。

しかし、通常のインスタグラムのオプションを使って、インスタグラムのフィードをウェブサイト上で思い通りに表示させるのは難しい。

これらの埋め込みオプションは、Instagramのフィードをあなたのサイトにスムーズに適合させるために必要なすべての選択肢や機能を与えてくれないことが多い。

スマッシュバルーンでは、10年以上にわたってソーシャルメディアコンテンツを簡単に埋め込むお手伝いをしてきました。今日は、Instagramのフィードを簡単に表示する方法をご紹介します。

この記事で

ウェブサイトにインスタグラムを表示する最も簡単な方法

インスタグラムのコンテンツをワードプレスのウェブサイトに表示する場合、主に2つの方法があります:

1.マニュアル個々のインスタグラム投稿を埋め込む

これは、特定のインスタグラム投稿の埋め込みコードを手動で取得し、これらのコードスニペットをカスタマイズしてサイトに直接追加することを含む。

その代わりに、信頼できるプラグインを使えば、コーディング不要でインスタグラムの投稿のダイナミックフィードを簡単に表示することができる。

ウェブサイトにインスタグラムを表示する最も簡単な方法として、この方法、具体的にはInstagram Feed Proを使用することを強くお勧めします。

スマッシュバルーン社のInstagram Feed Proは、100万人以上のユーザーから賞賛され、WordPressのための 最高のInstagramフィードプラグインとして広く認知されています:

  • シンプルさ:ガイド付きの3ステッププロセス(作成、カスタマイズ、埋め込み)で、コーディングのスキルは必要ありません。
  • 汎用性:タイムライン、ハッシュタグ、インスタグラムのメンションなど、多くのフィードタイプをサポート。
  • カスタマイズ:ライブプレビューが可能なビジュアルフィードカスタマイザーが内蔵されており、テンプレートやテーマをインポートすることができます。
ライブフィードカスタマイザー
  • パフォーマンス:超高速ローディングのために設計されており、ウェブサイトのスピードが損なわれることはありません。
  • 互換性:DiviやElementorのような人気のWordPressビルダーとシームレスに動作します。
  • 質の高いサポート:WordPressの専門家チームによるサポートをご利用いただけます。
  • 高評価:ユーザーからは4.9/5つ星と高い評価を得ており、ユーザーベースには有名ブランドも含まれている。
スマッシュ・バルーンのプラグインを使用しているブランド

これらすべての機能により、Instagram Feed Proは、技術的な手間をかけることなく、より多くのフォロワーと売上を獲得するのに最適な選択肢となっています。

Instagramのフィードを簡単に追加する準備はできましたか?今すぐInstagram Feed Proを入手してください

では、具体的な手順を説明しよう。

ウェブサイトにインスタグラムのフィードを表示する方法(簡単な方法)

Instagram Feed Proを使ってInstagramの投稿をウェブサイトに表示するには、以下のチュートリアルに従うだけです。

始めよう。

ステップ1:WordPressサイトにInstagram Feed Proをインストールする

まずは、Instagram Feed Proをこちらから入手してください。

プラグインをコンピュータにダウンロードし、インストールすることでWordPressウェブサイトにアップロードします。

プラグインのインストールでお困りですか?WordPressのプラグインをインストールする方法については、こちらのガイドを参照してください。

ステップ2:プラグインを使ってInstagramフィードを作成する

次のステップは簡単で、ウェブサイトに新しいインスタグラムのフィードを作成することだ。

WordPressのダッシュボードに移動し、Instagramのフィード " すべてのフィードに移動します。次に、上部にある新規追加 ボタンをクリックします。

インスタグラムフィードプロ

Instagramのフィードをウェブサイトに埋め込むための次のステップは?表示したいInstagramフィードのタイプを決める。

インスタグラム・フィード・プロでは、以下の3種類のフィードタイプから選ぶことができます:

  • ユーザーアカウント: 自分のアカウントの写真を含むInstagramフィードを埋め込みます。
  • パブリックハッシュタグ: お好みのパブリックハッシュタグからInstagramフィードを埋め込みます。これは、ウェブサイトに顧客の声を表示するのに適しています。
  • タグ付けされた あなたのInstagramアカウントがタグ付けされた投稿を含むInstagramフィードを表示します。

また、複数のフィードタイプを組み合わせて、1つのInstagramフィードに表示することもできる。

とりあえず、フィードの種類を選択し、「次へ」 ボタンをクリックします。

ユーザーのタイムラインを選択 インスタグラムのフィードをインポート

このチュートリアルでは、ユーザーのタイムラインフィードを使い、1つのインスタグラムプロフィールからの投稿を表示することにする。

ステップ3:Instagramアカウントをプラグインに接続する

インスタグラムの投稿をウェブサイトに表示するには、新しいフィードをインスタグラムのアカウントに接続します。

そのためには、Add Source ボタンをクリックしてください。

インスタグラム、フィードにソースを追加

プラグインがInstagramのコンテンツを取得できるように、あなたのビジネスまたはクリエイターのアカウントを接続する時間です。

その前に、2種類の接続方法から選ぶことができる:

  • ビジネスベーシック:ご自身のインスタグラムプロフィールの写真や動画を表示します。
  • ビジネス上級者向け: ハッシュタグフィード、タグ付きフィード、ストーリーなど、より多くのコンテンツをアンロック。

接続タイプを選んだら、「接続」をクリックする。

インスタグラムの接続タイプを選択する

インスタグラムのプロフィールからの投稿を表示するため、ベーシック 接続を使用します。

ここで、Instagramと接続をクリックして次に進む。

インスタグラムの基本プロフィールに接続する

ここから、プラグインにインスタグラムのアカウントへの読み取り専用 アクセス権を与えることができる。

プラグインはこのアクセスを使ってあなたのインスタグラム情報を閲覧しますが、変更を加えることは一切できません。そのため、Smash Balloonは安全に使用できます

プロフィールの接続を完了するには、ここで許可 ボタンをクリックします。

インスタグラムの読み取り専用アクセスを許可する

これでワードプレスのウェブサイトに戻るので、このアカウントをインスタグラムフィードのソースとして確認することができる。

次へ」をクリックしてください。

インスタグラムのフィードのソースとしてアカウントを確認する

ステップ4:インスタグラムフィードの見た目をカスタマイズする

インスタグラムのフィードのデザインをカスタマイズするのはとても簡単だという話をしたのを覚えているだろうか?

ライブフィードエディターを使えば、数回のクリックでインスタグラムのフィードの見栄えを変えることができる。

左側には、フィードのレイアウト、ヘッダー、カラースキーム、個々のインスタグラム投稿、ボタンデザインなどを変更するオプションを含む、インスタグラムフィードのすべてのカスタマイズオプションを見つけることができます。

インスタグラム・フィード・プロ用ライブ・フィード・エディター

さらに、右側にフィードのライブプレビューが表示され、すべての変更をリアルタイムで追跡できます。

フィードレイアウトオプションを クリックして、インスタグラムのフィードのデザインを変更することができます。

インスタグラム・ライブフィードエディター

ここでフィードレイアウトを設定し、インスタグラムの投稿がウェブサイトにどのように表示されるかを変更する。

このプラグインでは、4つの異なるレイアウトオプションから選択することができます:グリッド、カルーセル、メイソンリー ハイライト

インスタグラムのグリッドレイアウト

グリッドレイアウトを 選択すると、インスタグラムの投稿をこのように正方形にトリミングされた画像でいっぱいに整理されたフレームで表示することができる:

インスタグラムフィードのグリッドレイアウト

通常、私はInstagramのフィードのカルーセルレイアウトが 好きです。この例のように、スライド式の横長レイアウトでインスタグラムのフィードを表示することができます:

カルーセルレイアウトのインスタグラムフィード

WordPressでInstagramのギャラリーを表示したいですか?それなら、メイソンレイアウトが 最適です。

画像を元のアスペクト比で表示するので、このようにインスタグラムの写真をフルに輝かせることができる:

インスタグラム・フィード

最後に、ハイライトレイアウトを 選択して、インスタグラムフィードの特定の写真を目立たせることもできる:

ギャラリーレイアウト・インスタグラムフィード

Instagramフィードのレイアウトを選択したら、上部にある「保存」 ボタンをクリックします。

次に、カスタマイズをクリックして、インスタグラムフィードのデザインを変更することができます。

インスタグラムの主なカスタマイズオプションに戻る

次に、左側のカスタマイズパネルを使って、もう一度インスタグラムフィードのデザインを編集することができる。

続行するには、配色 オプションをクリックします。

インスタグラム・フィード・プロの配色オプション

配色を選択することで、Instagramフィードのすべての色を簡単に変更することができます。4つのカラースキームから選べます:

  • テーマからの継承:WordPressテーマの色を自動的にコピーします。
  • ライト暗いフォントで明るい背景を表示します。
  • ダーク:暗い背景で明るいフォントカラーを選択する。
  • カスタム:手動でフィードのすべての色を選択します。
インスタグラム・ライブフィードの配色オプション

残りのカスタマイズオプションを使って、ヘッダーデザイン、ボタンスタイル、フィードサイズ、投稿数などを設定できます。

インスタグラムのフィードの見栄えに満足していますか?素晴らしい!保存を 忘れずにクリックして、下の最後のステップに進んでください。

ステップ5:InstagramのフィードをWordPressのウェブサイトに表示する

Instagram Feed Proの助けを借りて、あなたは2つの異なる方法でInstagramのフィードを埋め込むことができます:

  1. WordPressのページに: あなたのウェブサイトのページに直接フィードを統合します。
  2. WordPressのウィジェットエリアにサイドバー、フッター、その他のウィジェット対応ゾーンにフィードを表示します。

以下、両方のオプションについて説明しよう。

方法1:WordPressのページにInstagramのフィードを埋め込む

Instagram Feed Proを使えば、数回の簡単なクリックで、ライブフィードエディターから直接Instagramのフィードを埋め込むことができます。

まず、ライブフィードエディタの上部にある埋め込みボタンをクリックします。

インスタグラムの埋め込みボタンをクリック

次に、Instagram Feed ProはInstagramのコンテンツをどこに表示したいかを尋ねてくる。ここから、ページに追加するか、ウィジェットとして表示するか、手動でショートコードをコピーするかを選択できる。

続行するには、「ページに追加 」ボタンをクリックします。

インスタグラムのライブフィードをページに追加

ポップアップが表示され、サイト上のすべてのWordPressページのリストが表示され、1つを選択するよう求められます。

ページを選択し、下の追加 ボタンをクリックするだけです。

インスタグラムのライブフィードを埋め込むページを選択

このプラグインは、インスタグラムのフィードを表示できるように、ワードプレスのページにあなたを送る。

新しいページが表示されたら、プラス(+)アイコンをクリックして新しいWordPressコンテンツブロックを追加します。

ワードプレスに新しいコンテンツブロックを追加する

Instagramのフィード ブロックを探してクリックすると、Instagramのフィードが自動的にページに追加されます。

インスタグラムのフィードブロックをワードプレスのページに埋め込む

そして最後に、「更新 」をクリックすれば、WordPressのウェブサイト上でそれを実行することができます。実際にあなたのウェブサイトを開いて、どのように見えるか見てみましょう。

ワードプレスのインスタグラムフィード例

次に、インスタグラムのコンテンツをウェブサイトに表示する方法を見てみよう。

方法2:Instagramのフィードをサイドバーやフッターに埋め込む

Instagramのフィードをウェブサイトのサイドバーにウィジェットとして表示するには、まずWordPressの管理画面にアクセスします。

次に、Instagramのフィード " すべてのフィードメニューに移動し、埋め込みたいInstagramのフィードをクリックします。

インスタグラムのフィードを開く

ここから、上部にある埋め込み ボタンをクリックして、Instagramフィードの埋め込みを開始します。

インスタグラムの埋め込みボタンをクリック

埋め込みポップアップが開き、Instagramフィードの場所を選択できます。

インスタグラムをウェブサイトのサイドバーやフッターに表示するには、こちらの「ウィジェットに追加」ボタンをクリックしてください。

インスタグラムのライブフィードをウィジェットに追加

それをクリックすると、Instagram Feed Proはウィジェットの ページにあなたを送ります。ここでWordPressのウィジェットを追加、削除、管理することができる。

続行するには、サイドバーパネルを クリックします。

サイドバーパネルを開く

ウェブサイトのフッターにインスタグラムを表示したいですか?

次に、ここでフッターパネルをクリックする。

フッターパネルを開く

そうしたら、下部のプラス(+)アイコンをクリックして、新しいウィジェットをウェブサイトに追加することができます。

最後に、Instagramフィードウィジェットを クリックして、新しいInstagramフィードをウィジェットとして埋め込みます。

サイドバーにインスタグラム・ウィジェットを追加する

これで、あなたのウェブサイトをチェックアウトすると、サイドバーエリアに埋め込んだインスタグラムフィードが表示されます。

こうすることで、インスタグラムのフィードをサイト訪問者がサイト上のあらゆる場所で見ることができる!

サイドバーのインスタグラム・ライブフィードの例

以上、皆さん!

このステップバイステップのガイドが、あなたのウェブサイトにインスタグラムを表示するのに役立ったことを願っています。このチュートリアルのステップに従うことで、インスタグラムマーケティングを次のレベルに引き上げ、より多くのフォロワーとより多くの売上をすぐに得ることができます。

魅力的なInstagramフィードを作成する準備はできましたか?今すぐInstagram Feed Proを始めましょう!

結論インスタグラムフィードで簡単にエンゲージメントを高める

インスタグラムのコンテンツをワードプレスのウェブサイトに表示するのは複雑なことではありません。

Instagram Feed Proを使えば、数時間ではなく、わずか数分で美しく魅力的なフィードをサイトに表示させることができる。

他の方法でインスタグラムのコンテンツをウェブサイトに正しく表示させようとすると、フラストレーションがたまることを私は経験から知っている。

それこそが、このプラグインがとても役に立つ理由だ。頭痛の種をすべて取り除いてくれる。特別なスキルは必要なく、写真や動画がページ上に完璧に表示され、最新の投稿と一緒に自動的に更新されます。

あなたの素晴らしいインスタグラム・コンテンツをウェブサイトで簡単に紹介する準備はできましたか?次にお勧めするのはこちらです:

  1. Instagram Feed Proを手に入れよう。(試してみたい方は、14日間の返金保証があることをお忘れなく!)。
  2. 記事で紹介されている簡単なセットアップ手順に従ってください。
  3. 新しいインスタグラムのフィードが、パソコンと携帯電話の両方でどのように見えるかをご覧ください。
  4. 新鮮なビジュアルコンテンツが自動的に更新されます。

あなたのインスタグラムのフィードを表示することは、訪問者の興味を引きつけ、彼らとつながり、さらにはあなたのインスタグラムのフォロワーになってもらうための素晴らしい方法です。

Instagram Feed Proを使ってウェブサイトにインスタグラムを掲載することについて質問がありますか?下のコメント欄でお気軽にご質問ください!

ここにいる間に、インスタグラム・マーケティングのベスト・ヒントのリストもご覧ください。

よくある質問

Instagram Feed Proを使うのにコーディングスキルは必要ですか?

いいえ、Instagram Feed Proは、技術的な能力に関係なく、すべてのユーザーのために設計されています。ビジュアルカスタマイザーとガイド付きセットアップにより、コーディングは必要ありません。

Instagram Feed Proは私のInstagramアカウントで使用しても安全ですか?

はい、とても安全です。このプラグインは、あなたのInstagramアカウントへの読み取り専用アクセスを要求します。つまり、あなたのコンテンツを表示して表示することはできますが、あなたのプロフィールに変更や修正を加えることはできません。

どのようなインスタグラムのフィードを表示できますか?

手動の方法では、Instagramの単一投稿しか埋め込むことができません。しかし、Instagram Feed Proを使用している場合、タイムラインフィード、ハッシュタグフィード、メンションフィード、あるいは複合フィードタイプを表示することができます。

Instagram Feed Proは私のウェブサイトを遅くしますか?

いいえ、Instagram Feed Proは超高速パフォーマンスのために構築されており、ウェブサイトの速度に悪影響を与えることなく、フィードを素早く読み込むように最適化されています。

その他のソーシャルメディア・マーケティング・ガイド&チュートリアル(トップ・ピック)

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

コメントを追加する

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