ウェブサイトに複数のインスタグラム・フィードを簡単に表示する方法
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ 複数のInstagramフィードをウェブサイトに簡単に表示する方法

複数のInstagramフィードをウェブサイトに簡単に表示する方法

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

美しいインスタグラムの投稿でウェブサイト訪問者を魅了したいですか?

サイトに長く滞在してもらい、インスタグラムのフォロワーに変え、ブランドにより良い印象を与えることができる。

しかし、インスタグラムの投稿をすべて手作業で埋め込むのは、時間がかかるし、複雑だ。

より良い選択肢を提供するために、ウェブサイトに複数のインスタグラムフィードを追加する最も簡単な方法を紹介しよう。

なぜインスタグラムのフィードを複数表示するのか?

ウェブサイトに複数のInstagramフィードを追加する大きな理由は、サイト訪問者を関連する写真や動画で惹きつけておくことだ。

さらに、複数のInstagramアカウントの投稿を同時にシェアすることもできる。複数のアカウントのフォロワーを増やすのに最適な方法だ。

さらに、ウェブサイトに複数のインスタグラムフィードを設置することもできる:

  • ブランドのオンラインストアで、商品カテゴリーごとに写真フィードを表示し、より多くの販売を促進する。
  • カート放棄を減らすために、チェックアウトページにレビュー投稿の個別フィードを追加する。
  • Instagramの写真やリールをウェブサイトに埋め込んで、さまざまなレイアウトで訪問者のエンゲージメントを高める。
  • インスタグラムのハッシュタグフィードをキュレートして、インスタグラムの人気コンテンツをサイトに表示する
  • 満足した顧客からのユーザー生成コンテンツ(USG)を展示し、積極的な社会的証明を行う。
  • Eコマースサイトの売上を伸ばすために、ショッピング可能なInstagram投稿を作成する

インスタグラムのフィードを複数表示する方法

あなたのサイトに複数のインスタグラムフィードを追加するのは厄介に聞こえるかもしれない。しかし、思っているより簡単です。

Smash BalloonのInstagram Feed Proを使えば、WordPressサイトに好きなだけフィードを表示できる。

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

WordPress用の最高のInstagramフィードプラグインとして、コーディング不要で、ウェブサイト上で複数のInstagramフィードを作成、カスタマイズ、表示することができます。

実際、ライブフィードエディターを使って、Instagramのフィードを簡単に微調整することができます。さらに、このプラグインは箱から出してすぐに見栄えが良く、あなたのサイトの外観を自動的にコピーします。

インスタグラムのフィード・ランディングページの例

つまり、あなたのウェブサイトのデザインを自動的にコピーするため、余計な手間をかけることなく、インスタグラムのフィードがあなたのブランドのスタイルと一致して見えるのだ。

最後に、この素晴らしいInstagramマーケティングプラグインには、WordPressの専門家によるカスタマーサポートチームが付属しています。

星4.9/5という確かな評価を得ているのだ。あなたのウェブサイトに複数のInstagramフィードを表示するのに助けが必要な場合は、メッセージを送るだけで、彼らはあなたを支援するために最善を尽くします。

レビュー・インスタグラム・フィード・プロ・プラグイン

スマートキャッシュを使用しているため、ソーシャルメディアサイトにデータを要求することなく、インスタグラムのフィードをより速く読み込むことができます。さらに、より高速なサイトはSEOにも最適です。

これらの機能を念頭に置いて、WordPressに複数のInstagramフィードを埋め込む方法を始めましょう。

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

まずは、Instagram Feed Proを入手しよう。

次に、WordPressウェブサイトにプラグインをインストールし、有効化します。プラグインのインストール方法については、こちらをご覧ください。

ステップ2:インスタグラムのフィードを作成する

プラグインをインストールし、有効化した後、インスタグラムのフィードを作成することができます。

そのためには、まず、WordPressのダッシュボードエリアからInstagramのフィード " すべてのフィード メニューに移動します。新しいページで、新規追加をクリックします。

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

次に、作成したいInstagramフィードのタイプを選択します。3つのオプションから選ぶことができる:

  • ユーザーのタイムライン: 最新のインスタグラム投稿のフィードを作成
  • 公開ハッシュタグ: 選択したハッシュタグのインスタグラムフィードを表示する。
  • タグ付けされた投稿 あなたのアカウントがタグ付けされた投稿を表示するフィードを埋め込む

また、このページで1つ以上のオプションを選択することで、複数のフィードタイプを1つのフィードに混ぜることもできます。

インスタグラムのフィードタイプを選択したら、「次へ」 ボタンをクリックします。

このチュートリアルでは、ユーザーのタイムラインフィードを選択します。

フィードタイプを選択 instagramフィードプロ

ステップ3:Instagramにフィードを接続する

新しいフィードをソースに接続して、Instagramの投稿を表示できるようにします。ソースには、クリエイターアカウントやビジネスアカウントを使用できます。

開始するには、ソースの追加ボタンをクリックします。

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

次に、新しいフィードに対してBusiness BasicまたはBusiness Advanced接続を選択できます。

基本的な接続では、自分で投稿したすべての Instagram コンテンツを埋め込むことができます。

一方、高度な接続では、ショッピング可能な Instagram フィード、ハッシュタグ フィードなど、さらに多くの Instagram コンテンツを埋め込むことができます。

Instagram の接続タイプを選択したら、 「接続」をクリックします。

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

FacebookまたはInstagramを開いてアカウントを連携できます。どちらの方法でも同じ手順で、わずか1秒で完了します。

まず、 「Instagram に接続」ボタンをクリックします。

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

さて、プラグインはあなたのInstagramプロフィールへの読み取り専用アクセスを要求します。アクセスは読み取り専用なので、Instagram Feed ProはあなたのInstagramのデータを見ることができるだけで、何かを変更することはできません。

ご覧の通り、このプラグインの使用は完全に安全です

続行するには、インスタグラムのポップアップで「許可」 ボタンをクリックするだけだ。

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

そうすると、プラグインはあなたのウェブサイトにあなたを送り返します。ここで、「次へ」 ボタンをクリックして、新しいソースを確認してください。

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

コードやインスタグラムAPIを扱う必要はない。

ステップ4:新しいインスタグラムのフィードをカスタマイズする

このプラグインはユーザーフレンドリーに設計されているため、あらかじめ作成されたレイアウトをインポートすることで、フィードのデザインを簡単に変更することができます。

お好みのフィード・レイアウトを選択し、「次へ」ボタンをクリックしてください。

インスタグラムのテンプレートを選択する

あなたのInstagramフィードがライブフィードエディターで開いているのが見えます。左側には、フィードの高度なカスタマイズオプションが表示されます。

これには、フィードのレイアウト、カラースキーム、ヘッダースタイル、フィードサイズ、フォローボタンなどを設定するオプションが含まれます!

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

これらのオプションを使って変更を加えると、右側のライブプレビューでインスタグラムのフィードがどのように見えるかを確認できる。

インスタグラムのフィードのカスタマイズを始めるには、まず左側のフィードレイアウトオプションをクリックする。

フィードレイアウトオプションを選択ライブフィードエディターインスタグラムフィードレイアウトオプションを選択ライブフィードエディターインスタグラム

ここには4つのレイアウトテンプレートがあり、その中から選ぶことができる:

  • グリッド
  • カルーセル
  • 石工
  • ハイライト
フィード・レイアウト・オプション・インスタグラム・フィード・プロ

グリッドレイアウトを使えば、Instagramの投稿を正方形にトリミングした均一なグリッドを表示できる。

こうすることで、インスタグラムのギャラリーに大量の投稿を一度に表示することができる。

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

次のオプションはカルーセルレイアウトで、投稿はインスタグラムのスライドショーのカルーセルで表示されます。

ソーシャルフォトフィードを使って、ウェブサイトをよりインタラクティブにしたい方には最適なフィードレイアウトです。

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

インスタグラムの写真をオリジナルのアスペクト比で表示するために、 メイソンレイアウトを選ぶこともできる。

そうすれば、訪問者は何も切り取られることなくインスタグラムの投稿を見ることができる。

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

特定の記事に焦点を当てたい?

そして、 ハイライトレイアウトを使えば、インスタグラムの投稿のサイズを大きくして、より見やすくすることができる。

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

レイアウトオプションを選んだら、「保存」をクリックしてフィードの設定を続けます。

次に、小さなカスタマイズ ボタンをクリックして、メインのカスタマイズオプションに戻ります。

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

インスタグラムフィードのデザイン編集を続けるには、左側の配色オプションを選択するだけです。

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

フィードの色を4種類の配色から選べるようになりました:

  • テーマからの継承:ウェブサイトのテーマの色を使用する
  • 明るい:明るい背景色に暗い文字色を選ぶ。
  • Dark:フォントの明るい色とともに暗い背景色を使用する。
  • カスタム:Instagramフィードの色を手動で選択
インスタグラム・フィード・プロの配色オプション

Instagramフィードの配色を選んだら、「保存」をクリックする。

Instagramフィードの他の部分も同じようにカスタマイズできるようになりました。ライブフィードエディターを使えば、投稿のレイアウト、ヘッダーのスタイル、フィードのサイズ、ライトボックス、もっと読み込むボタンなどを超簡単に設定できます。

最後に、Instagramフィードのデザインに満足したら、「保存 」をクリックする。

その後、これらの手順を繰り返して、ウェブサイトに複数のインスタグラムフィードを作成することができます。

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

最後に、インスタグラムのフィードをウェブサイトに表示する方法です。それには2つの方法がある:

  • 複数のInstagramフィードをページに表示する
  • 複数のInstagramフィードをサイドバーやフッターに表示する

複数のInstagramフィードをページに表示する

ライブフィードエディターを使えば、すぐにインスタグラムのフィードを表示し始めることができる。

まず、右上の埋め込み ボタンをクリックします。

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

すると、インスタグラムのフィードの場所を選択できるポップアップが表示されます。続行するには、ここでページに追加 ボタンをクリックします。

インスタグラムのフィードをページに追加する instagram feed proインスタグラムのフィードをページに追加する instagram feed pro

インスタグラムのフィードを埋め込むWordPressページを選択します。ポップアップでページを選択し、Addをクリックするだけです。

インスタグラムのフィードをワードプレスのページに追加する

プラグインは、WordPressエディタでそのページを開き、フィードを埋め込むことができます。小さなプラス(+)アイコンをクリックしてコンテンツブロックを追加するだけです

新しいワードプレスブロックを追加する

その後、検索バーに「Instagram」と入力し、検索結果からInstagram Feed ブロックを選択する。

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

最後に、Publish ボタンをクリックして変更を確定します。

このように、インスタグラムのフィードをワードプレスで簡単に表示することができる。どのように表示されるかは、あなたのウェブサイトを開いて確認してください。

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

そのページに別のインスタグラムのフィードを埋め込むには、まず、ライブフィードエディターでフィードを開く。

そのためには、WordPressのダッシュボードからInstagramのフィード " すべてのフィード メニューに移動します。

埋め込みたいInstagramのフィードをクリックします。

ハッシュタグフィードを選択する

ライブフィードエディターでインスタグラムのフィードを見ることができるようになりました。以前と同様に、上部にある埋め込み ボタンをクリックしてください。

埋め込みボタン インスタグラム ハッシュタグ フィード

先ほどと同じように、Instagramのフィードを埋め込むためのオプションがポップアップで表示されます。また、Instagramのフィードを手動で埋め込むためにショートコードをコピーすることもできます。

ポップアップで、Add to a Pageを 選択して続行します。

インスタグラムのフィードをページに追加する instagram feed proインスタグラムのフィードをページに追加する instagram feed pro

ここで、Instagramのフィードを埋め込みたいWordPressページを選択し、「Add」をクリックする。

インスタグラムのフィードをワードプレスのページに追加する

WordPressエディターのプラス(+)アイコ ンをクリックして、新しいコンテンツブロックを追加します

ワードプレスエディタに2つ目のインスタグラムフィードブロックを追加

最後に、Instagramのフィードを 埋め込むためにInstagramのフィード ブロックを選択します。

ページに複数のインスタグラムフィードブロックを追加する

更新 ボタンをクリックして変更を保存します。また、サイトを開くと、WordPressページに複数のInstagramフィードが表示されます。

インスタグラムの複数フィードの例

このように、WordPressのページに複数のInstagramフィードを表示することができる。

Instagramのフィードをウェブサイトのサイドバーやフッターに埋め込む方法を見てみましょう。

しかし、ブログのサイドバーのようなウィジェット対応エリアにも複数のInstagramフィードを追加したい場合はどうすればいいのだろうか?次にその方法を見てみよう。

サイドバーやフッターを使って、ウェブサイトに複数のインスタグラムフィードを表示することもできる。

さらに、Instagram Feed Proプラグインには、簡単にフィードを埋め込むことができるユーザーフレンドリーなInstagramウィジェットが付属しています。

Instagramのフィードを埋め込むには、まずダッシュボードエリアからInstagramのフィード " すべてのフィード メニューに移動します。

このページで、サイドバーやフッターに埋め込みたいインスタグラムのフィードをクリックするだけです。

インスタグラムのフィードを選択する

プラグインをクリックすると、ライブフィードエディターでフィードが開きます。続行するには、上部の埋め込み ボタンをクリックしてください。

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

次に、Instagramフィードを埋め込む場所を選択できます。ウィジェットに追加ボタンをクリックするだけです。

ウィジェットにインスタグラムのフィードを追加する instagram feed proウィジェットにインスタグラムのフィードを追加する instagram feed pro

その後、プラグインはウィジェットの ページにあなたを送ります。ここで、Instagramのフィードを埋め込む場所を選択できます。

インスタグラムのフィードをサイドバーに追加するには、サイドバーパネルを クリックします。

サイドバーパネルを開いてソーシャルメディアウィジェットを埋め込む

フッターを代わりに使いたいですか?フッターパネルをクリックしてください。

このチュートリアルでは、インスタグラムのフィードを埋め込むためにサイドバーを使用します。

ソーシャルメディア・ウィジェットを埋め込むためにフッター・パネルを開く

最後に、下部のプラスアイコン(+)をクリックして新しいウィジェットを追加し、Instagram Feed ウィジェットをクリックする。

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

更新 」をクリックして、Instagramフィード・ウィジェットの埋め込みを完了します。どのように見えるかは、ウェブサイトを開いて確認できます。

サイドバー・ウィジェット・インスタグラム・フィード・プロ

別のInstagramフィードを埋め込むには、WordPressダッシュボードから Instagramフィード " すべてのフィード メニューに戻ります。

その後、インスタグラムのフィードをクリックしてライブフィードエディターで開く。

ハッシュタグフィードを選択する

ここで、先ほどと同じようにEmbed ボタンをクリックし、Instagramフィードの埋め込みを開始する。

埋め込みボタン インスタグラム ハッシュタグ フィード

ポップアップを使用してウィジェットに追加を 選択し、ウェブサイトのウィジェットページを開きます。

ウィジェットにインスタグラムのフィードを追加する instagram feed proウィジェットにインスタグラムのフィードを追加する instagram feed pro

ウィジェットページで、先ほどInstagramフィードを埋め込んだパネルをクリックします。今回は、サイドバーパネルを 開きます。

サイドバーパネルを開いてソーシャルメディアウィジェットを埋め込む

プラス(+)アイコ ンをクリックして新しいWordPressウィジェットを追加し、オプションからInstagram Feedを選択する。

2つ目のインスタグラム・フィード・ウィジェット・サイドバーを埋め込む

最後に、更新 ボタンをクリックして、新しいInstagramフィードウィジェットを保存します。

ウェブサイトを開くと、サイドバーやフッターに複数のインスタグラムフィードが表示される。

サイドバーウィジェットのインスタグラムフィード例

ご覧の通り、Instagram Feed Proプラグインを使えば、ウェブサイトに複数のInstagramフィードを表示するのは超簡単だ。

さらに、複数のユーザーアカウントのコンテンツをInstagramのフィードに埋め込むこともできる。以下でその方法を見てみよう。

インスタグラムのユーザーフィードを複数表示する方法

インスタグラムのフィードを複数のユーザーアカウントで表示するには、まず先ほどと同じように新しいフィードを作成する。

そのためには、WordPressのダッシュボードからInstagram Feed " All Feedsに 行き、Add Newをクリックする。

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

その後、このページのユーザータイムラインオプションを クリックします。続行するには、先ほどと同じようにNext ボタンをクリックするだけです。

フィードタイプを選択 instagramフィードプロ

ここでは、複数のInstagramアカウントを追加し、新しいフィードのソースとして使用することができます。

インスタグラムのアカウントを追加するには、新規追加 ボタンをクリックします。

インスタグラムのフィードに2つ目のソースを追加

Instagramアカウントへの読み取り専用 アクセスを求めるポップアップが表示されます。そのポップアップで、「許可 」をクリックして続行してください。

インスタグラムアカウントへのアクセスを許可する フィードを作成する

これでワードプレスのウェブサイトに戻ります。

ここから、Instagramフィードのソースを複数選択し、「次へ」をクリックする。

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

Instagramのフィードがライブフィードエディターで開かれます。以前と同じように、インスタグラムのフィードのデザインをカスタマイズし、ページ、サイドバー、またはフッターに埋め込むことができます。

複数のユーザーアカウントによるインスタグラム・フィード

このように、複数のインスタグラムアカウントのコンテンツを組み合わせたインスタグラムフィードを作成するのはとても簡単だ。

それだけだ!

Instagramの複数のフィードをウェブサイトに表示し、フォロワーを増やし、訪問者の関心を引き続ける方法はお分かりいただけただろう。

ご覧の通り、Instagram Feed Proは全てのプロセスを超簡単にします。数回クリックするだけで、あらゆる種類のInstagramコンテンツを埋め込むことができます。

Instagramマーケティングをレベルアップしたいですか?今すぐInstagram Feed Proを始めましょう

インスタグラムでビジネスを成長させる方法をもっと知りたい方は、売上を増やすのに最適なインスタグラムの投稿タイプのリストをご覧ください。

その他のInstagramマーケティングガイド&チュートリアル

著者アバター
ステイシー・コリン

コメント3

  1. リアン・ラロヤ 4年前

    こんにちは、ダーン、

    ご質問ありがとうございます。ライセンスによって異なります。詳しくはこちらの表をご参照ください: https://smashballoon.com/instagram-feed/pricing/

    スマッシュバルーンのすべてのプラグインに無制限にアクセスし、無制限のウェブサイトで使用したい場合は、こちらからAll-Access Bundleを入手してください: https://smashballoon.com/instagram-feed/pricing/

    Smash Balloonの価格設定方法の素晴らしいところは?100%ノーリスクの返金保証がついているので、まずはプラグインを試してみて、自分に合うかどうかを確認することができます。

    ご不明な点がございましたら、サポートチームまでお問い合わせください。

    スマッシュバルーンのライセンスをお持ちのお客様は、優先的にメールサポートをご利用いただけますので、こちらからサポートチケットをお送りください: https://smashballoon.com/instagram-feed/support/

    それ以外の場合は、スマッシュバルーンのソーシャルフォトフィードフォーラムで無料サポートを提供しています:
    https://wordpress.org/support/plugin/instagram-feed/

    ありがとう!

    返信
  2. ヨガガ 2年前

    これは、自分のウェブサイトに複数のインスタグラムフィードを追加したい人に最適な記事です。よく書かれていて理解しやすいので、初心者にも上級者にも最適だ。記事はさまざまなセクションに分かれており、必要な情報を素早く見つけるのに役立つ。また、複数のフィードを追加する様々な理由も書かれており、好感が持てる。

    このチュートリアルについて質問があります。私は別のプラットフォームでウェブサイトを持っているのですが、このチュートリアルを使ってインスタグラムのフィードを複数表示できるのでしょうか?作者がこの件について何か情報を載せてくれるとうれしいです。

    全体的に、この有益な記事をシェアしてくれてありがとう。とても勉強になり、自分のウェブサイトで試すのが待ち遠しいです!

    返信
    1. リアン・ラロヤ 2年前

      こんにちは!

      記事がお役に立てたようで何よりです。

      私たちのInstagram Feedプラグインは、WordPressプラットフォーム専用に設計・構築されていますが、ElementorやDiviのウェブサイトでも使用することができます。詳しくは以下の記事をご覧ください:

      InstagramのフィードをElementorに追加する方法(5分で)

      DiviのInstagramフィードをウェブサイトに追加する方法

      これが役に立つことを願っている!ありがとう。

      返信

コメントを追加する

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