Instagramの投稿をホームページに埋め込む方法を分かりやすく解説

Instagramの投稿をホームページに埋め込む方法を分かりやすく解説

【2026年4月23日更新】全体の内容を見直すとともに、記事内の情報を最新に更新しました。

この記事のレベル

初心者 (3.0)
重要度 (2.5)
難しさ (2.5)

こんにちは、編集長のカワウソです!

「自社で運用中のInstagramをホームページに利用したい」と考えていませんか?

確かに近年では、Instagramをマーケティングに活用している企業も多く、より有効活用するためには、ホームぺージとの連携を模索したいですよね。

そこで今回は、ホームページにInstagramの投稿を埋め込む方法を分かりやすく解説します。

カワウソ

この記事は次のような人におすすめ!

  • 自社Instagramの単一投稿をホームぺージに埋め込みたい人
  • 自社Instagramの投稿一覧をホームぺージに埋め込みたい人
  • Instagram埋め込みのメリットやデメリットを知りたい人

この記事を読めば、Instagramの「単一投稿」はもちろん、「投稿一覧」をホームぺージに埋め込む方法も分かりますよ。

なお、この記事ではWordPress(ワードプレス)で作られたホームぺージを想定して、Instagramの投稿を埋め込む方法を解説します。
それ以外の手段でホームぺージを作っている方は、手順が異なるのでご注意ください。

それではどうぞ!

ホームページへのInstagram埋め込みとは

Instagramの埋め込みとは、投稿をそのままの状態でホームページ内に表示させる機能のことです。
写真や動画はもちろん、「いいね」や「コメント」といった機能も維持したまま掲載できます。

埋め込みの表示イメージは、以下の画像のとおりです(※実際には各ボタンが機能します)。

※記事内の画像は、デモアカウントを使用しています。

パソコンやスマートフォンでInstagramを開かなくても、ホームページ上で投稿内容を確認できるのはもちろん、そのまま「いいね」などを付けることも可能です。

また、「画像」や「Instagramでもっと見る」をクリックすると、Instagramのページやアプリが立ち上がります。

そのほか、Instagramの投稿一覧も埋め込むことができるので、ホームぺージに画像を複数掲載した「ギャラリーぺージ」を作りたい方にとっても、おすすめです。

Instagramの投稿一覧のイメージ

ホームページにInstagramを埋め込む4つのメリット

ここでは、ホームページにInstagramを埋め込むメリットを4つ紹介します。

それぞれ解説します。

Instagramで得たユーザーからの反応をアピールできる

ホームぺージに埋め込んだInstagramの投稿は、フォロワー数やいいね数を表示可能です。

ユーザーに「この会社はInstagramで人気があるんだ」「Instagramでこんなおもしろい投稿をしているんだ」と興味を持ってもらえるでしょう。

ホームページの信用度アップにもつながるので、Instagramで一定のフォロワー数やいいね数を獲得している場合は、ぜひアピールしてください。

投稿(更新)作業を一度にまとめられる

飲食店や美容室など、Instagramでお知らせ(ニュース)を発信している企業の場合は、投稿(更新)作業を一度にまとめられるメリットがあります。

前述のとおり、Instagramは単一投稿だけでなく、投稿一覧も埋め込み可能です。

埋め込まれたInstagramの投稿一覧は、リアルタイムで更新される

投稿一覧の埋め込みだと、Instagramで投稿した内容が自動かつリアルタイムに、ホームぺージに反映されます。

Instagramとホームぺージの両方を更新する時間がないといった方は、参考にしてみてはいかがでしょうか。

Instagramアカウントがないユーザーに見せることが可能

ホームぺージに埋め込めば、Instagramに投稿した写真や動画などを、アカウントがないユーザーにも見せることが可能です

せっかくInstagramに映えた写真を投稿していても、アカウントを持っているユーザーにしかアピールできないとなると、もったいないですよね。

しかし、ホームページに埋め込まれたInstagramの投稿は、誰でも閲覧可能です。

ただし、埋め込まれた投稿の「詳細」を見るためには、ユーザーがInstagramにログインする必要があるので注意してください。

Instagramのフォロワーを増やせる

ホームぺージを訪問したユーザーに、自社のInstagramアカウントの存在を大々的にアピールできるところも大きなメリットです

ホームページにSNSアイコンを設置している企業は多くあります。
ただ投稿内容までは見えないため、情報収集に熱心なユーザー以外は、なかなかクリックする動機が持てないですよね。

SNSアイコンを設置したホームページ

しかし、Instagramに投稿した写真や動画がホームぺージにそのまま掲載されていれば、ユーザーは内容まで知ることになります。

写真や動画に魅力を感じたユーザーなら、自社のInstagramアカウントをフォローしてくれるかもしれませんよ。

ホームページにInstagramを埋め込む3つのデメリット

次は、ホームページにInstagramを埋め込むデメリットを3つ紹介します。

それぞれ解説します。

ぺージの読み込み速度が遅延するおそれがある

Instagramを埋め込むと、ページの読み込み速度が遅くなってしまうおそれがあります。

ページを表示させるときに、まずInstagram側のデータベースから情報を取得する「動的な処理」が必要になるためです。

ページの読み込み速度が遅いとユーザーの離脱に繋がるほか、「SEO(検索エンジン最適化)における評価」にも悪影響を及ぼすおそれがあります。

改善策はあるものの、専門知識が必要になるケースも多いので、ご自身で対応が難しい場合は、技術者に相談しましょう。

なお、ページの読み込み速度(サイトスピード)については、以下の記事で詳しく解説しています。

Instagram運営側のトラブルで表示できないときがある

Instagram運営側の仕様変更などにより、ホームぺージに埋め込んだ投稿内容が正しく表示されないときがあります。

たとえば以下のように、アカウント名や画像などが正しく表示されないといった事例です。

エラーで内容が表示されないinstagramの単一投稿

そのため、非表示になって困る写真や動画などのコンテンツは、ホームぺージに直接掲載するようにしましょう。

メンテナンス作業が必要になる

ホームページの埋め込みは、Instagram側での操作や仕様が影響するため、定期的なチェックやメンテナンスが必要です。

たとえば、埋め込んだ単一投稿をInstagram側で削除すると、ホームページ上にエラーが表示されます。

Instagram側で投稿を削除した場合に表示されるエラー

埋め込みはコピーではなく、ホームページを表示するたびにInstagram上の投稿内容を読み取っているためです。

このように、ホームページに埋め込んだことを忘れてしまい、Instagram側で削除してしまった結果、表示エラーとなるケースもあるでしょう。

さらに、気付かずそのまま放置すると、エラーが表示され続け、訪問者に「管理されていないホームページ」という印象を与えかねません。

ホームページの信頼性を損なわないためにも、埋め込んだInstagram投稿を把握し、削除した場合は別の投稿に差し替えるなどのメンテナンス作業が発生するのです。

ホームページにInstagramを埋め込む方法

ここでは、WordPressで作られたホームページにInstagramを埋め込む方法を、「単一投稿」と「投稿一覧」で分けて解説します。

単一投稿をカスタムHTMLで埋め込む方法

STEP1

WebブラウザからInstagramにログインし、埋め込みたい投稿を表示します。

InstagramをWebブラウザから開く
注意

アプリからは埋め込みコードをコピーできません。スマホから実施する場合も、WebブラウザでInstagramを開いてください。

STEP2

投稿画面右上の・・・をクリックします。

埋め込みたい単一投稿のメニューをクリック
STEP3

表示された埋め込みをクリックしましょう。

埋め込みをクリック
STEP4

埋め込みコードをコピーをクリックしてください。
※写真だけを埋め込みたいときは、「キャプションを追加」のチェックを外します。

埋め込みコードをコピー
メモ

キャプションとは、写真や動画とは別に表示される文章のこと。
キャプションも表示させたい場合はチェックを入れておきましょう。

Instagramのキャプションとは
STEP5

次に、WordPressの管理画面から、Instagramを埋め込みたいページの編集画面を開きます。
ここでは、「固定ぺージ」を例にしますね。

WordPressメインメニュー > 固定ページ
STEP6

固定ページの編集画面から+ボタンをクリックして、「カスタムHTML」のブロックを挿入します。

WordPressメインメニュー > 固定ページ
STEP7

HTML を入力…」の欄に、さきほどコピーしたコードを貼り付けてください。

Instagramの埋め込みコードを貼り付けた後
STEP8

下書き保存して、プレビューしてみましょう。

下書き保存
プレビュー
STEP9

以下のように、正しく表示されていれば完了です。

埋め込み後のイメージ

投稿一覧をプラグインで埋め込む方法

WordPressで作ったホームページに投稿一覧を埋め込む場合は、プラグインの活用がおすすめです。

ここでは、インストール数100万以上の実績がある「Smash Balloon Social Photo Feed」というプラグインを例に、埋め込み方を解説しますね。

「Smash Balloon Social Photo Feed」には、無料版と有料版があります。機能は制限されるものの、無料版でも投稿一覧の埋め込みは可能です。

実際に導入しているホームページ事例

「Smash Balloon Social Photo Feed」を使ってInstagramを埋め込んでいるホームページの事例は、以下から確認できます。
ホームページに導入するときの参考にしてみてください。

【2026】サイト使用事例6600 – Smash Balloon Social Photo Feed – Easy Social Feeds Pluginプラグイン

では実際の作業を解説します。

STEP1

WordPressのメインナビゲーションから、プラグイン > プラグインを追加をクリックし、画面右上の検索窓から、「Smash Balloon Social Photo Feed」を検索しましょう。

今すぐインストールをクリックしてください。

WordPressの管理画面でSmash Balloon Social Photo Feedを検索
STEP2

次に有効化させます。

Smash Balloon Social Photo Feedを有効化
STEP3

セットアップウィザードを起動をクリックしてください。

セットアップウィザードを移動
STEP4

新規追加をクリックします。

新規追加
STEP5

アカウントの種類を選択して、接続するをクリックします。
この記事では、右側の「ビジネスアドバンス」を選びますね。

メモ

「ビジネスアドバンス」は、「ベーシック」より詳細な設定が可能です。
あとから変更すると手間が掛かるため、最初から「ビジネスアドバンス」を選択しておくことをおすすめします。

接続するアカウントの種類を選択

※画面はGoogle Chromeの翻訳機能を利用しているため、状況により文言が異なる場合があります。

カワウソ

実際の設定画面は英語なので、ブラウザの翻訳機能を使うと、日本語で表示されて分かりやすいですよ!

STEP6

Facebookアカウントの接続経験について、「はい」か「いいえ」を選びます。
この記事では「いいえ」を選びますね。

Facebookアカウントの接続経験
STEP7

Facebookとの接続をクリックしてください。

Facebookとの接続
STEP8

Facebookにログインします。

Facebookにログイン
STEP9

Smash Balloon Social」に対してアクセス権を許可します。〇〇〇としてログインをクリックしてください。

Smash Balloon Socialに対してアクセス権を許可
STEP10

ドメインの確認画面が表示されるので、はい、それは私の領域ですをクリックしましょう。

「はい、それは私の領域です」をクリック
STEP11

該当するInstagramアカウントを選択したのち、追加をクリックしてください。

Instagramアカウントを選択
STEP12

Nextをクリックしましょう。

「Next」をクリック
STEP13

必要な機能を選択したうえで、Nextをクリックしてください。

「Next」をクリック
STEP14

「GDPRプラグインをインストール」の画面が表示されますが、追加せずに次に進みます。

メモ

GDPRプラグインは主にヨーロッパ向けの設定となるため、日本国内向けのホームページであれば基本的には不要です。

「GDPRプラグイン」のインストールを無効にして進める
STEP15

この画面が出たら、下部にあるComplete Setup Without Upgradingをクリックしてください。

セットアップの完了
Complete Setup Without Upgrading
STEP16

次の画面が表示されたら、新規追加をクリックします。

すべてのフィードから新規追加
STEP17

ユーザータイムラインが選択されているので、そのままの状態で次へをクリックしてください。

フィード形式を選択
STEP18

該当するInstagramアカウントを選択して、次へをクリックしましょう。

1つ以上のソースを選択
STEP19

埋め込み時のプレビューが表示されます。このまま埋め込んでもよいのですが、この記事ではプロフィールを消してみます。

ヘッダーをクリックしたあと、有効化を解除します。

ヘッダーをクリック
ヘッダーの有効化を解除
メモ

「フィードレイアウト」から、投稿の表示数や、横に何枚並べるかのカラム数(列数)なども簡単に変更できます。プレビューを見ながら、調整してみてください。

フィードレイアウトの変更
STEP20

埋め込むを押すと、ショートコードが表示されるので、コピーをクリックしてください。

埋め込み用のショートコードをコピー
STEP21

コピーしたショートコードを編集画面にペーストし、下書き保存してプレビューしてみましょう。
※もし自動で切り替わらない場合は、「ショートコード」ブロックを選択してから貼り付けてください。

ショートコードを貼り付け
STEP22

以下のように投稿一覧が表示されれば、完了です。

メモ

ショートコード以外にも、「Instagram Feed」というブロックからも追加可能です。

「Instagram Feed」ブロック

ブロック追加後、右の設定画面にIDを入力し変更を適用をクリックすれば、投稿一覧が表示されます。

Smash Balloon Social Photo Feedの使用をやめるときの注意点

試したものの合わなかったなど、「Smash Balloon Social Photo Feed」の使用をやめるときは、追加したソースやフィードを削除したあと、セキュリティの観点からプラグイン自体を削除しましょう。

【WordPress】 Instagram Feed > すべてのフィードの画面

【WordPress】 Instagram Feed > すべてのフィードの画面

【WordPress】Instagram Feed > 設定 > ソースを管理の画面

【WordPress】Instagram Feed > 設定 > ソースを管理の画面

また、InstagramやFacebook側でも、同プラグインからのアクセス許可を削除しておくとよいでしょう。

【Instagram】その他 > 設定 > アプリのウェブサイトのアクセス許可 > アプリとウェブサイト

【Instagram】その他 > 設定 > アプリのウェブサイトへのアクセス許可 > アプリとウェブサイト

【Facebook】設定とプライバシー > 設定 > アプリとウェブサイト

【Facebook】設定とプライバシー > 設定 > アプリとウェブサイト

ホームページのセキュリティについては、以下の記事で詳しく解説しています。

ホームページにInstagramを埋め込むときの注意点

ホームページに自社以外のInstagramを埋め込むときは、著作権や肖像権に注意しましょう。

とくに他人の投稿を勝手に自社のホームページに掲載してしまうと、著作権や肖像権を侵害するおそれがあります。

どうしても掲載したい投稿があった場合は、事前に本人から許可を取りましょう。

そのほか、Instagramの利用規約にも目を通しておくことをおすすめします。

ホームページへのInstagram埋め込みに関するよくある質問

最後に、ホームページへのInstagram埋め込みに関する「よくある質問」をまとめました。

インスタグラムとホームページを連携するにはどうすればいいですか?

ホームページではInstagramの投稿埋め込み、InstagramではプロフィールにホームページのURL(リンク)を掲載するのが、主な連携方法です。

これにより、Instagramとホームページそれぞれのユーザーを、双方向に誘導できるようになります。

ホームページ側では、当記事で解説した手順でInstagramの単一投稿や一覧を埋め込むことが可能です。

Instagramのプロフィールにリンクを追加するには、スマホアプリの機能を使います(※パソコンやWebブラウザでは利用不可)。
スマホアプリでプロフィール画面を開き、プロフィールを編集リンク外部リンクを追加でホームページのURLを入力すれば完了です。

Instagramとホームページで双方向の導線を整えることにより、それぞれの強みを活かした情報を補完し、自社の魅力をさらに知ってもらえるでしょう。

Instagramの投稿をホームページに埋め込む方法は?

WordPressで作られたホームページの場合、主に「埋め込みコード」を直接貼り付けるか、「プラグイン」の利用により、Instagramの投稿を埋め込み可能です。

具体的には、特定(単一)の投稿だけを紹介したいのか、複数の投稿を一覧で表示させたいのかによって、やり方が異なります。

単一投稿を埋め込む場合は、Instagram(ブラウザ版)から「埋め込みコード」を取得し、WordPressの「カスタムHTML」ブロックに貼り付ければ完了です。

対して、投稿一覧は、「Smash Balloon Social Photo Feed」のようなプラグインを使うことで、プログラミングなどの専門知識がなくても埋め込むことができます。

まずは「単一投稿」か「投稿一覧」か、目的に合った方法を選んで、Instagramをホームページに活用しましょう。

ホームページからInstagramにリンクを貼る方法は?

プロフィールページのURLをコピーして、「ボタン」や「SNSアイコン」に設定し、ホームページに配置する方法があります。

手動でボタンやアイコンを配置してリンクを貼ることもできますが、WordPressであればSNS連携プラグインを活用するのもおすすめです。

プラグインならURLを一度設定するだけで、ホームページ内の特定の場所にリンクを簡単に設置できます。
ホームページ全体のSNSリンクを一括で管理できるため、変更が必要になったときの手間も省けるでしょう。

埋め込みと併せてリンクも設置しておくことで、より効率的なInstagramへの誘導に役立ちます。

まとめ

この記事では、ホームページにInstagramの投稿を埋め込む方法を解説しました。

まとめ
  • ホームページに「単一投稿」や「投稿一覧」を埋め込むことは可能
  • WordPress固定ぺージの場合、単一投稿は「カスタムHTML」で埋め込む
  • WordPress固定ぺージの場合、投稿一覧は「プラグイン」で埋め込むのがおすすめ
  • 他人の投稿を勝手に掲載すると、「著作権や肖像権侵害」のおそれがある

自社のマーケティング活動にInstagramを活用している企業なら、ぜひホームぺージでもアピールしてください。

以上、最後まで読んでいただき、ありがとうございました。

コスパ&価格重視でレンタルサーバーを探している方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※1のレンタルサーバーであり、24万社の導入実績※2があります。

2026年6月4日(木)17時まで、サーバー利用料金の半額がキャッシュバックされる期間限定キャンペーンを開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※1 2025年12月時点、W3Techs調べ。
※2 2025年12月時点、エックスサーバー・XServerビジネスにおける法人アカウント数の合計値。

法人向けレンタルサーバーをお探しの方へ

XServerビジネスは、エックスサーバーを法人向けに特化したレンタルサーバーです。
サーバー月間稼働率99.99%以上を保証する「SLA」をはじめ、セキュリティやサポートが充実しています。

2026年6月16日(火)17時まで、初期費用が0円になる期間限定キャンペーンを開催中です!

今ならお得にホームページを開設できます!
コーポレートサイトでよく使われる「.co.jp」のドメインも永久無料で、大変お得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!