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

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

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

もしあなたがここにいるのなら、インスタグラムのライブフィードがどれほど便利か知っているはずだ。

訪問者を惹きつけることから、インスタグラムのフォロワーを増やすことまで、インスタグラムのフィードでできることはたくさんある。

しかし正直なところ、インスタグラムのフィードを追加するのは、コードの書き方を知らなければ本当に面倒だ。

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

すべてのプロセスはとてもシンプルなので、WordPressを初めて使う方でも簡単に操作できます。

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

技術的には、プラグインなしでフィードを埋め込むことは可能だが、現実的ではない。

1つの投稿を埋め込むには、インスタグラムを開いて埋め込みコードをコピーし、ウェブサイトに戻ってから、投稿やページにコードを挿入する必要がある。

インスタグラムのフィード全体を埋め込むには、投稿ごとにこれを繰り返す必要がある。そして、インスタグラムに何か新しい投稿をするたびに、もう一度繰り返す必要がある。

時間がかかる作業だと私は思う。インスタグラムのフィードも、コードをいじらないとカスタマイズできない。

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

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

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

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

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

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

4.9/5つ星の評価と数百万人のアクティブユーザーを見れば、Instagram Feed ProがInstagramのライブフィードを埋め込むためのNo.1オプションである理由は明らかだと思う。

あなたのサイトに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 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つの投稿に複数の写真や動画をアップロードできる。人々は写真や動画をスワイプして、すべてのコンテンツを見ることができる。 一度にたくさんのコンテンツをアップロードできるので、私はこの機能のかなりのファンです。

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

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

コメントを追加する

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