ウェブサイトにインスタグラムを埋め込む方法(簡単ガイド)
ホーム ブログ ウェブサイトにインスタグラムを埋め込む方法(最も簡単な方法)

ウェブサイトにインスタグラムを埋め込む方法(最も簡単な方法)

ウェブサイトにインスタグラムを埋め込む方法

ウェブサイトにInstagramを簡単に、手間なく埋め込む方法をお探しですか?

Instagramは、多くのフォロワーがすでに時間を費やしている場所ですが、そのほとんどはあなたのサイトに戻ってきません。一方、あなたのウェブサイトを訪れる人の大半は、Instagramを目にすることさえありません。

基本的には、互いに接点のない2つの異なるオーディエンスを運営しているようなものです。

フィードを埋め込むことで、そのギャップを埋めることができます。これにより、ページの内容を常に新鮮に保ち、双方のユーザーに相互にアクセスするきっかけを与えることができます。

以下では、2つの方法について順を追って説明します。1つは、単一の投稿を埋め込むだけの場合に使える手動の方法、もう1つは、自動的に更新される完全なフィードが必要な場合に私がお勧めするプラグインを使った方法です。

なぜウェブサイトにInstagramの投稿を表示するのか?

サイトにInstagramのコンテンツを追加することで、普段は決して交わることのない2つのオーディエンス――サイトを閲覧しているユーザーと、Instagramであなたをフォローしているユーザー――をつなぐことができます。フィードが公開されると、双方のユーザーが互いに引き寄せられるようになります。

実際にどう見えるかと言うと、次のようになります:

  • 滞在時間の延長:写真や 動画、ユーザーがすぐに離脱せずにサイトにとどまる理由となる
  • フォロワーを増やす:サイトを閲覧している訪問者は、サイトを離れることなく「フォロー」ボタンをクリックできます
  • 検索順位の上昇:新鮮で定期的に更新されるコンテンツは、検索エンジンがインデックスに登録できる情報を増やします
  • 信頼の強化:フォロワーからの本物の投稿や言及は、新規訪問者にとっての ソーシャルプルーフ 」となります
ウェブサイト上のInstagramフィードの例

方法1: Instagram投稿を手動でWordPressに追加する

手動でインスタグラムの投稿をワードプレスのウェブサイトに追加するには、以下の手順を踏む:

  • ステップ1:埋め込みたいInstagramの投稿を開く
  • ステップ2:右上の3つの点のアイコンをクリックします。
  • ステップ 3: メニューから埋め込み オプションを選択します。
  • ステップ 4:「埋め込みコードをコピー 」ボタンをクリックします。
  • ステップ5:ウェブサイトに戻り、ページまたは投稿を開く
  • ステップ6:カスタムHTMLブロックを挿入する
  • ステップ7:コピーしたInstagramの埋め込みコードを貼り付ける
手動でインスタグラムの投稿を埋め込む

プラグインなしでこのようなことができる一方で、この方法にはいくつかの欠点もある:

  • 埋め込みコードが破損したり動作しなくなったりした場合、サポートしてくれる専任のチームがない
  • Instagramのデフォルトのブランドイメージやデザインに縛られてしまい、サイトのデザインと調和しない場合がある
  • 検索エンジンはiframe内のコンテンツを読み取ることができないため、SEO上のメリットはありません

方法2: プラグインでInstagramフィードを埋め込む(推奨)

これを実現するには、プラグインを使うのが最も簡単な方法です。特にInstagramの場合、「Instagram Feed Pro」が面倒な作業をすべて引き受けてくれます。コードを書く必要も、試行錯誤も、技術的な知識も一切必要ありません。

ほとんどの人は、5分以内にフィードを公開しています。

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

実際、フィードを簡単に埋め込むための便利な機能が揃っている:

  • インスタグラムのフィードを記録的な速さで作成するには、3ステップのガイドに従うだけでよい。そして、節約した時間をあなたのビジネスに投資することができる。
  • Instagramには、タイムラインのフィード、ハッシュタグのフィード、タグ付けされた投稿、リールなど、さまざまな種類のコンテンツが用意されており、その中から自由に選ぶことができます。
  • コンバージョンを高め、より多くの売上を獲得するために、ショッピング可能なインスタグラムフィードをサイトに埋め込むことができる。
  • Instagram Feed Proは、InstagramのAPIから効率的にデータを取得し、読み込み時間を最小限に抑えるため、電光石火の速さです。そのため、ウェブサイトのパフォーマンスが低下することはまったくありません。
  • Instagram Feed Proはとてもユーザーフレンドリーなので、ライブフィードエディターを使って数クリックでInstagramフィードをカスタマイズすることができます。
ライブフィードエディター インスタグラム

このプラグインは、 100万人以上のアクティブユーザーが世界中のウェブサイトにインスタグラムのコンテンツを埋め込むのに役立っている。

また、4.9/5つ星という高い評価を得ているSmash Balloonの迅速でフレンドリーなサポートチームは、いつでもお客様をサポートする準備ができているので、安心してご利用いただけます。

InstagramのフィードをWordPressに埋め込む準備はできましたか?今すぐInstagram Feed Proを入手してください!

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

最初のステップは、Instagram Feed Proを入手することだ。次に、プラグインをコンピューターにダウンロードします。

プラグインをダウンロードしたら、WordPressサイトにアップロードしてインストールするだけだ。

やり方が分からなくても心配しないでください。WordPressプラグインのインストール方法については、こちらの記事をご覧ください。

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

Instagram Feed Proプラグインを使えば、わずか数ステップで新しいフィードを作成できる。

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

このページで、上部にある「新規追加」 ボタンをクリックします。

新しいInstagramギャラリーを作成する

インスタグラムのコンテンツをウェブサイトに埋め込み続けるために、インスタグラムのフィードタイプを選択できるようになりました。

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

  • ユーザーのタイムライン: あなたのアカウントからInstagramのフィードを埋め込み、プロフィールの写真だけを表示します。
  • パブリックハッシュタグ: お好みのパブリックハッシュタグからInstagramフィードを埋め込みます。これはブランドのハッシュタグにすることができるので、インスタグラムの声をサイトに表示することができます。
  • タグ付き投稿: あなたのInstagramアカウントが他のアクティブユーザーによってタグ付けされた写真のInstagramフィードを埋め込みます。

また、ここで複数のオプションを選択することで、複数のインスタグラムフィードを組み合わせ、1つの埋め込みインスタグラムフィードとして表示することもできる。

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

このチュートリアルでは、ユーザータイムラインオプションを選びます。

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

ステップ3:インスタグラムのアカウントに接続する

インスタグラムのアカウントに接続する前に、それがビジネスまたはクリエイターのアカウントであることを確認する必要があります。

まだインスタグラムを持っていない場合は、インスタグラムのアカウントをビジネスプロフィールに変換する方法について、こちらの記事をご覧ください。

このページで、青いAdd Sourceボタンをクリックして開始します。

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

次に、ベーシック接続かアドバンス接続のどちらかを選択するよう求められます。

  • ビジネス・ベーシック:自身のインスタグラム・アカウントの写真をウェブサイトに表示する
  • ビジネス上級者向け: ハッシュタグフィードやショッピング可能なインスタグラムフィードなど、より多くの種類のコンテンツを表示します。

Instagramアカウントの種類を選択したら、「Connect」をクリックします。

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

その後、インスタグラムかフェイスブックのどちらかを開き、アカウントの接続を完了する。

とりあえず、Instagramとつながるボタンをクリックしてみる。

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

プラグインはInstagramにあなたを送り、そこであなたのアカウントに読み取り専用 アクセス権を与えることができる。

Instagram Feed Proは、あなたの情報を見るためにこのアクセスを使用することができ、変更を加える権限を持っていないので、完全に安全です

続行するには、ポップアップの「許可」 ボタンをクリックしてください。

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

これによって、Instagram Feed Proはあなたを再びあなたのウェブサイトに引き戻すだろう。

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

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

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

美しいInstagramフィードを簡単に作成できるように、Instagram Feed Proにはプロがデザインしたテーマが付属しており、インポートすることができます。

実際、あなたのフィードに使用できるユニークなデザインの5つの異なるテーマがあります:

  • デフォルト:すっきりとした シンプルなデザインで、写真そのものが語るように仕上げています
  • モダン:すべての要素が揃っており、上部にプロフィール情報、各カードには投稿の詳細が表示される
  • ソーシャルウォール: ライブフィードをスクロールしているような感覚で 、日付や色付きのアイコンも表示されます
  • 概要:Social Wallのデザインで、各投稿にはInstagramへの直接リンクが掲載されています
  • 共通点:「Modern」と同じ充実した投稿詳細に加え、より大きく目立つヘッダーが採用されています

あとはお好きなテーマを選んで「次へ」ボタンをクリックするだけです。

テーマのインスタグラムフィードを選択

そうするだけで、プラグインが自動的にテーマのデザインをフィードに取り込んでくれます。さらに、テンプレートをインポートして、フィード上のInstagram投稿のレイアウトを変更することも可能です。

先ほどと同様に、お好みのテンプレートを選択し、「Next」をクリックします。

インスタグラムのフィードテンプレートを選ぶ

このプラグインはライブフィードエディターを開くので、インスタグラムのフィードのデザインを簡単にパーソナライズできる。

まず、左のパネルにあるカスタマイズオプションをチェックしよう。ここから、インスタグラムフィードのサイズ、レイアウト、色、ヘッダーのスタイル、デザインなどをコントロールできる。

変更を加えるたびに、右側にあるリアルタイム・プレビューを使って、どのように見えるかを確認することができます。

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

カスタマイズを始めるにあたり、私は通常インスタグラムのフィードのレイアウトを変更する。

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

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

Instagramフィードのレイアウトを4種類から選べるようになりました:グリッド、カルーセル、メイソンリー ハイライトです。

それぞれのレイアウトを詳しく見てみよう。

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

グリッドレイアウトを 選択すると、このように正方形サイズの画像が整理されたコレクションとしてインスタグラムのフィードが表示されます:

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

Instagramのカルーセルフィードを表示したいですか?カルーセルレイアウトを選択すると、Instagramの写真を横スクロールフィードで表示できます。

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

インスタグラムのギャラリーを表示することに興味があるインスタグラム・ユーザーには、メイソン・レイアウトが 最適です。

こうすることで、あなたのインスタグラムの写真が本来のプロポーションで紹介される。

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

最後に、フィードで特定のインスタグラム写真を強調したい場合は、ハイライト オプションを選択することができます。

ハイライトされた写真はフィード内で2倍の大きさで表示されるため、視聴者の注目を集めたい場合はこのレイアウトが便利です。

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

お好みのレイアウトタイプを選択し、上部の「保存」ボタンをクリックします。

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

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

それでは、新しいInstagramフィードの色を変更してみましょう。

まず、左側の配色 オプションをクリックします。

配色オプションを選択

「テーマから継承」を選択すると、サイトの既存のカラーパレットが自動的に取り込まれます。色について特に考えたくない場合には、これが最も手っ取り早い方法です。

Light」と「Dark」を選択すると、背景とフォントのコントラストが反転します。

ブランドごとに特定の16進数コードがあり、それを正確に再現する必要がある場合は、「カスタム」を選択してください。

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

ここからお好みのオプションを選択し、「保存」 ボタンをクリックして変更を確定します。

ライブフィードエディターを使えば、Instagramフィードの残りの部分をカスタマイズするのはとても簡単です。数回クリックするだけで、ヘッダーのスタイル、フォローボタン、ライトボックスオプション、フィードサイズなどを設定できる。

インスタグラムのフィードをカスタマイズしたら、もう一度保存 ボタンをクリックするのを忘れずに。

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

Smash BalloonはInstagramとWordPressの両方でシームレスに動作するので、Instagramのコンテンツをウェブサイトに追加するのはとても簡単です。

インスタグラムのフィードをWordPressのページに追加するか、ウェブサイトのサイドバーエリアに追加するかを選択できます。

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

ライブフィードエディターを使えば、インスタグラムのフィードをWordPressのページに簡単に追加できる。

エディタの上部にある「埋め込み」をクリックしてください。

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

インスタグラムのフィードの場所を設定するポップアップが表示されます。

とりあえず「ページに追加 」オプションをクリックしてください。

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

リストから目的のページを選んで、「追加」をクリックしてください。

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

これでWordPressのエディタが開き、次のステップに進む準備が整います。

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

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

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

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

ページエディターにInstagramフィードのプレビューが表示されます。最後に、Publishを クリックして、新しいInstagramフィードをウェブサイト上で公開します。

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

それでは次に、インスタグラムのフィードを埋め込む2つ目の方法を見ていきましょう。

フィードをウェブサイトのサイドバーやフッターに埋め込むには、まず、ライブフィードエディタでフィードを開きます。

そのためには、WordPressのダッシュボードからInstagramのフィード " すべてのフィードに 移動することができます。

このページで、先ほど作成したインスタグラムのフィードをクリックできる。

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

これにより、プラグインのライブフィードエディターでフィードが再び開きます。

ここから、Embed ボタンをクリックして次に進みます。

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

次に、ポップアップの「ウィジェットに追加」 ボタンをクリックします。

WordPressサイトのウィジェットページが開きます。

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

ここから、新しいフィードをInstagramウィジェットとしてサイドバーやフッターに追加できる。

サイドバーパネルをクリックして、サイドバーのウィジェットを管理できます。

サイドバーパネルを開く

また、フッターウィジェットの管理を始めたい場合は、フッターパネルを クリックしてください。

フッターパネルを開く

このチュートリアルでは、WordPressのサイドバーを使用します。

最後に、プラス(+)アイコンを クリックしてウィジェットを追加し、Instagramフィードウィジェットを クリックしてフィードを埋め込む。

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

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

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

さて、これで完成だ!

Instagramのフィードが公開されました。これからは、プラグインを再度操作しなくても、新しい投稿が自動的に表示されるようになります。

その結果、あっという間にフォロワーを増やし、ビジネスの売上を増やすことができる。しかも、コーディングは一切必要ありません。

Instagramのフィードを埋め込む準備はできましたか?今すぐInstagram Feed Proを始めましょう

ついでに、インスタグラムのリールで再生回数を増やす方法についてのガイドもご覧ください。

インスタグラム・マーケティングのヒントとコツ

もしこの投稿が役に立ったなら、ぜひX(Twitter)Facebookで私たちとつながって、他にも役立つチュートリアルをチェックしてみてください。

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

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