インスタグラムのライブフィードを埋め込んでウェブサイトをレベルアップする方法
ホーム ブログ インスタグラムのライブフィードを埋め込んでウェブサイトをレベルアップする方法

インスタグラムのライブフィードを埋め込んでウェブサイトをレベルアップする方法

インスタグラムのライブフィードをウェブサイトに簡単に埋め込む方法

サイトにInstagramのライブフィードを設置すれば、人々の注目を集め、Instagramのフォロワーを増やし、ソーシャルプルーフで売上を伸ばせます。

正直なところ、Instagramフィードを埋め込むのは本当に面倒な作業です。特にコーディングに慣れていない人にとってはなおさらです。

もしあなたが私のように、コーディングの手間をかけずにインスタグラムのライブフィードをサイトに埋め込みたいと思っているなら、このガイドはあなたのためのものだ。

このプロセス全体はとても簡単なので、WordPressが初めての方でも問題なく進められます。Instagram Feed Proのようなツールさえあれば、わずか数分でInstagramコンテンツのフィードを作成できます。

この記事の中で

プラグインなしでインスタグラムのライブフィードを埋め込むことは可能か?

はい、しかしこの方法には多くの欠点があり、それらを認識しておく必要があります:

  • Instagramのフィードを更新し続けるために、埋め込みコードを常に扱わなければならなくなるでしょう。
  • 単一の投稿を埋め込むには多くの時間がかかり、二つのウェブサイトを行き来する必要があります。
  • Instagramに何か新しい投稿をするたびに、もう一度同じことを繰り返さなければなりません。
  • コードをいじらない限り、Instagramのフィードを本当にカスタマイズすることもできません。

ブランディングにマッチした入念にデザインされたウェブサイトをお持ちの方にとって、これは大きな痛手となりうる。

私のように手間を省きたいなら、代わりにWordPressのInstagramプラグインを使えばいい。プラグインに投稿の埋め込みを任せるだけで、節約した時間と労力をビジネスに使うことができる。

WordPressにInstagramのライブフィードを追加するには?

すべてのオプションの中で、Instagram Feed Proは簡単にライブInstagramのフィードを表示したい人のための最高のツールです。

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

この素晴らしいツールを使えば、次のことができる:

  • デザインに自動で調和する見事なInstagramフィードを表示 — コーディング不要
  • コール・トゥ・アクション・ボタンでウェブサイト訪問者にインスタグラムアカウントのフォローを促す
  • ユーザー生成コンテンツ(UGC)によるポジティブな社会的証明で売上を伸ばす
  • WordPressのエキスパートによるサポートチームから直接サポートを受けることができます。
  • インスタグラムの投稿を大量に表示しながら、サイトの読み込みはこれまでと同じ速さ
  • ライブフィードエディターを使って、数回のクリックでインスタグラムフィードのデザインを簡単にカスタマイズできます。
インスタグラムの埋め込みボタンをクリック

4.9/5点の評価と数百万のアクティブユーザーが、Instagram Feed ProがライブInstagramフィード埋め込みの第一選択肢である理由を明確に示していると思います。

Instagramコンテンツをサイトに追加する準備はできていますか?今すぐInstagram Feed Proを入手しましょう

:Instagram Feed ProはWordPress用に設計・構築されているため、Wix、Squarespace、Shopifyなどの他のウェブプラットフォームでは動作しない可能性があります。しかし、Divi builderやElementorのようなWordPressページビルダーとは完全に互換性があります。

ステップ1:Instagram Feed Proプラグインをインストールする

まず、Instagram Feed Proをここで入手することができる。このWordPressのInstagramプラグインをコンピュータにダウンロードした後、あなたのウェブサイトにインストールしてください。

詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

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

Instagram Feed Proの魅力は、とても簡単にInstagramフィードを作成できることです。

始めるには、WordPressのダッシュボードに行き、Instagramのフィード " すべてのフィードに移動します。

次に、「新規追加」ボタンをクリックしてフィードを作成します。

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

次に、このプラグインはInstagramのフィードタイプを選択するように尋ねます。選択肢は以下の通り:

  • ユーザーのタイムライン:自分のInstagramアカウントからの投稿のみを表示するフィードを使用する
  • 公開ハッシュタグ特定のハッシュタグが付いたインスタグラムの写真や動画を埋め込む
  • タグ付けされた投稿他のユーザーがあなたのアカウントに@をつけているInstagramの投稿を表示します。

一度に複数のオプションを選択することで、異なるインスタグラムのフィードタイプを組み合わせて1つのフィードにすることもできる。

フィードの種類を選択したら、「次へ」をクリックします。

ステップ3:InstagramフィードをInstagramアカウントに接続する

あなたのフィードを作成した後、このWordPressのInstagramフィードプラグインは、あなたのInstagramアカウントを接続するように要求します。

そうすれば、新しいフィードはインスタグラムのコンテンツをウェブサイトに表示することができる。

続行するには、ここでソースの追加 ボタンをクリックします。

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

その後、ベーシックアカウントとビジネスアカウントのどちらを接続するかを尋ねるポップアップが表示されます。

基本的なInstagramアカウントでは、自分のアカウントからのみInstagramフィードを埋め込むことができる。

一方、インスタグラムのビジネスアカウントでは、インスタグラムのハッシュタグフィード、インスタグラムの動画、タグ付きフィード、ショッパブルフィードなどを追加できる。

このチュートリアルでは、基本的な アカウントで「Instagramでログイン」をクリックする。

Instagramのアカウントタイプを選択してください

その後、プラグインはInstagramへの読み取り専用アクセスを要求し、アカウントの接続を完了させる。

このアクセスにより、インスタグラム・フィード・プロはインスタグラムの情報を見ることができるが、実際に変更を加えることはできない。

このように、Instagram Feed ProのようなSmash Balloonプラグインは、使用してもまったく問題ありません

ポップアップで「許可 」をクリックし、読み取り専用アクセス権を与える。

インスタグラムへのアクセスを許可する

最後に、「次へ 」をクリックして、このアカウントをInstagramフィードのソースとして確認することができる。

インスタグラムのフィードソースを確認する

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

Instagramアカウントとの接続が完了すると、プラグインはライブフィードエディターを開きます。

このエディターから、左側のカスタマイズオプションを使って、インスタグラムフィードのデザインを簡単に設定できる。

また、フィードレイアウト、ヘッダーデザイン、カラースキーム、ボタンデザイン、投稿スタイル、その他の機能を変更することができます。

右側には、インスタグラムのフィードのライブプレビューがあり、リアルタイムで変化を追跡することができる。

専門家のアドバイス素早くカスタマイズしたいですか?Instagram Feed Proには既製のInstagramフィードテーマがあり、最小限の時間と労力で魅力的で魅力的なフィードを作成できます。好きなテーマを選ぶだけで、レイアウト、ボタン、投稿スタイル、ヘッダーデザインなどをワンクリックで即座に変更できます!

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

ここにはたくさんのオプションがあるので、私が普段いじっているカスタマイズオプションを見ていくことにしよう。

まず、左側のフィードレイアウトオプションをクリックします。

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

インスタグラム・フィード・プロには、グリッド、カルーセル、メイソンリー ハイライトから選べる既製のレイアウト・テンプレートが用意されている。

フィード・レイアウト・オプション・インスタグラム・フィード・プロ

このチュートリアルでは、ハイライトレイアウトを 選ぶことにする。このレイアウトは、インスタグラムの投稿を正方形にトリミングした画像でキュレーションし、ハイライトされた投稿はこのように2倍の大きさで表示されます:

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

投稿数、行数、列数などの追加設定もここで変更できる。私はデフォルトの見た目が好きなので、このままにしておきます。

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

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

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

左側の「Color Scheme」をクリックして、Instagramフィードの色を設定する。

配色オプションを選択

インスタグラム・フィード・プロでは、4つのカラースキームから選ぶことができる:

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

お好きな配色を選んで、もう一度「保存」 ボタンをクリックしてください。

私はフィードの色にはあまりこだわらないので、通常はサイトのテーマを継承することにしている。

このように他のオプションに進み、Instagramのライブフィードのカスタマイズを終えることができる。最後にSaveをクリックするのを忘れないようにしてください。

ステップ5:インスタグラムのライブフィードを埋め込む

あなたのウェブサイトにInstagramのライブフィードを埋め込む時が来ました。これには2つの方法があります:

  1. インスタグラムのフィードブロックを使って、投稿やページにフィードを追加する
  2. インスタグラム・フィード・ウィジェットを使って、サイドバーやフッターにフィードを追加する。

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

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

ライブフィードエディタを使用すると、ホームページ、アバウトページ、ブログ投稿ページなど、WordPressウェブサイトのページにインスタグラムのライブフィードを直接埋め込むことができます。

まず、右上の埋め込み ボタンをクリックしてください。

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

インスタグラムのライブフィードの場所を選択するポップアップが開きます。

とりあえず、「ページに追加 」ボタンをクリックしてください。

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

ポップアップで、フィードを追加したいWordPressページを選択し、「追加」をクリックします。

ページにInstagramフィードを追加する

Instagram Feed Proは、WordPressのエディターでそのページを開きます。

そこからプラス(+) アイコンをクリックして、新しいコンテンツブロックを追加します。

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

次に、検索バーに「instagram」と入力し、Instagram Feedを クリックしてページに追加する。

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

最後に、右上の「Publish」ボタンをクリックして、ページを公開します。

そのため、サイト訪問者があなたの公開ページをチェックアウトすると、あなたのウェブサイトに埋め込まれたライブフィードを見ることができます。

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

ご覧の通り、インスタグラムのフィードをワードプレスのページに埋め込むのはとても簡単です。

次に、インスタグラムのフィードをサイドバーやフッターに表示する方法を見てみよう。

また、InstagramのウィジェットとしてサイドバーエリアにInstagramのフィードを表示することもできる。

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

作成したインスタグラムのフィードはすべてこのページにリストアップされます。

続行するには、先ほど作成したInstagramのライブフィードを選択します。

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

そうすると、プラグインはそのフィードをライブフィードエディターで開きます。

以前と同じように、上部にある埋め込み ボタンをクリックしてください。

インスタグラム・フィード埋め込みボタン

続行するには、単にショートコードをコピーするか、新しいポップアップのウィジェットに追加 オプションを簡単に選択できます。

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

そうすると、Instagram Feed ProがWordPressサイトのウィジェットページを開きます。

ここからサイドバーパネルを クリックし、サイドバーエリアのウィジェットを管理します。

インスタグラムのライブフィードを埋め込むサイドバーパネルを開く

または、代わりにフッターパネルを クリックして、フッターウィジェットを管理することもできます。このチュートリアルでは、Instagramフィード用のサイドバーを使用します。

フッターパネルを開き、インスタグラムのライブフィードを埋め込む

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

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

最後にUpdate ボタンをクリックすれば、Instagramフィードの埋め込みは完了です。

これで、あなたのウェブサイトにアクセスすると、このようにサイドバーエリアにインスタグラムのライブフィードが表示されます:

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

これらの簡単なステップで、あなたのウェブサイトにインスタグラムのライブフィードを簡単に埋め込むことができます。

これで、インスタグラムのコンテンツから社会的証拠をサイト上で示すことができ、購読者を増やし、コンバージョンを高め、売上を急増させることができる。

Instagramのライブフィードを作成してビジネスを成長させたいですか?今すぐInstagram Feed Proを始めましょう。

インスタグラムのコンテンツを完璧なタイミングで人々に届けたいのであれば、インスタグラムの投稿をスケジュールする方法に関するこのガイドをチェックしよう

よくある質問

なぜInstagramのコンテンツを埋め込む必要があるのか?

インスタグラムのエンベッドを使えば、インスタグラムの投稿をより多くの人に見てもらい、サイト訪問者にフォローしてもらうことができる。私がとても気に入っているInstagramエンベッドのもう一つの使い方は、Instagramからポジティブなレビューや証言を表示して、自分のサイトにより良い印象を与えることです。

インスタグラムの動画を埋め込むことはできますか?

はい、写真だけでなくインスタグラムの動画も埋め込むことができます。私の経験では、動画を見せることで、より長くサイトに滞在してもらうことができ、SEOにも役立ちます。

インスタグラムの埋め込みをカスタマイズするには?

通常、コーディングによほど慣れていない限り、インスタグラムの埋め込みをカスタマイズすることはできない。 代わりに、Instagram Feed Proツールを使えば、カスタマイズ可能なInstagramフィードをサイトに表示することができる。ライブプレビュー付きのビジュアルカスタマイザーもあり、かなり便利だ。

インスタグラムのカルーセルとは?

これはインスタグラムの機能で、1つの投稿に複数の写真や動画をアップロードできる。人々は写真や動画をスワイプして、すべてのコンテンツを見ることができる。 一度にたくさんのコンテンツをアップロードできるので、私はこの機能のかなりのファンです。

ライブInstagramフィードを簡単に埋め込み始めよう

初めて手動埋め込みでサイトにInstagramフィードを「ライブ」表示させようとした時、正直言って疲れた。

1投稿ずつ、コピー、ペースト、繰り返し。

そして新しい投稿があるたびに、それをまた繰り返す。

個別の埋め込みコードは無料で入手できますが、すぐに面倒になります。レイアウトを自由に制御できず、自社ブランドに簡単に合わせられず、自動更新されるものもありません。

まさにそれが私が頼りにしている理由です スマッシュバルーン Instagram フィード プロ を頼りにしているのです。

Instagram Feed Proを使えば、サイトオーナーが「手間がかかりすぎる」から「フィードが自動で動く」状態へ、たった一度の設定で移行するのを目にしてきました。このプラグインは:

  • 新しいInstagram投稿を自動的に取り込みます
  • コードではなくシンプルなオプションでフィードをデザインできます
  • 多くの画像や動画を表示しながらも、ページの表示速度を高速に保ちます
  • グリッド、カルーセル、ハッシュタグフィードなどを、すべて同じ場所から簡単に利用できるようにします

次にすべきことは以下の通りです:

  • 始めましょう Instagram Feed Pro このガイドの手順に従って、初めてのライブフィードを作成しましょう
  • 主要ページ(ホームページやショップなど)やサイドバー、フッターに埋め込みましょう
  • 訪問者がInstagramコンテンツを閲覧・クリック・インタラクションする頻度がどれほど増加するかをご覧ください

あなたのInstagramフィードは、サイトの動くショーウィンドウのように機能し、同じ作業を二度繰り返すことなく常に最新情報を表示できます。

WordPressのベスト・ソーシャルメディア・フィード・チュートリアル

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

コメントを追加する

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