インスタグラムの投稿をWebに埋め込む方法をお探しですね。
広告
インスタグラムをブログやホームページに埋め込む方法【初心者向け】
Instagramの投稿をブログやホームページに載せると、写真や動画を使ってページを見やすくできます。
WordPressなら難しい知識がなくても対応できますが、1つの投稿を貼るのか、複数の投稿をまとめて表示するのかで、やり方が変わってきます。
この記事では、インスタの投稿をブログやサイトに埋め込む方法を、初心者でもわかるように順番に説明していきます。
インスタをサイトに表示する方法は大きく3つ
Instagramの投稿をWebサイトに表示する方法は、大きく分けて3つあります。
「Instagram公式の埋め込みコードを使う」「WordPressのプラグインや外部ツールを使う」「APIを使って自分で作る」の3パターンです。
ブログ記事の中に1つだけ投稿を紹介したいなら、公式の埋め込みコードを使うのが一番簡単です。
一方、トップページやサービス紹介ページに最新投稿を並べて表示したいなら、プラグインやSNS埋め込みツールを使うほうが管理しやすくなります。
公式の埋め込みコードは無料で、Instagramが用意しているHTMLコードをコピーして貼るだけで表示できます。
ただし、投稿ごとにコードを取得する必要があるので、たくさんの投稿を並べたいときは少し手間がかかります。
また、デザインの調整はあまりできないので、サイトの雰囲気に合わせて細かく変えたい場合には向いていません。
まずは「1つの投稿だけを記事内で見せたいのか」「自動で更新されるフィードを設置したいのか」を決めるのが、方法を選ぶときの第一歩です。
埋め込めるのは、公開されている写真投稿、動画投稿、リールなどです。
非公開アカウントの投稿や削除された投稿は、サイトに正しく表示されません。
また、ストーリーズは通常の投稿のように埋め込みコードを取得できないので、サイトに載せたい場合は通常投稿やリールとして公開しておくと安心です。
【一番簡単】公式コードでWordPressに投稿を表示する
一番手軽なのは、パソコンのブラウザでInstagramを開いて、埋め込みたい投稿から公式コードを取得する方法です。
Instagramアプリでは「埋め込み」メニューが出ないことが多いので、Google ChromeやSafariなどのブラウザから操作しましょう。
投稿を開いたら、右上あたりにある「…」マークをクリックして、「埋め込み」を選びます。
そのあと「埋め込みコードをコピー」を押すと、ブログやホームページに貼るためのHTMLコードが取得できます。
WordPressでの貼り付け方
WordPressで使う場合は、記事編集画面を開いて、投稿を表示したい場所に「カスタムHTML」ブロックを追加します。
そこにInstagramでコピーした埋め込みコードを貼り付けて、プレビューで確認しましょう。
ブロックエディターでは、普通の段落ブロックやビジュアルエディターにそのまま貼ると、コードが文字として表示されてしまうことがあります。
うまく表示されないときは、貼り付け場所が「カスタムHTML」になっているか確認してください。
Instagramの埋め込みコードを取得するとき、キャプション(投稿の文章)を含めるかどうかを選べる場合があります。
投稿の文章まで見せたいならキャプション付き、画像や動画を中心に見せたいならキャプションなしを選ぶと、ページ全体の見た目が調整しやすくなります。
もし公式コードでうまく表示されない場合は、投稿URLをコピーしてWordPressの「埋め込み」ブロックに貼り付ける方法でも表示できることがあります。
記事内で補足資料のようにInstagram投稿を使うなら、この公式コードのやり方で十分なケースが多いです。
WordPress以外のサイトでも基本は同じ
WordPress以外のホームページでも、基本的な考え方は同じです。
HTMLを直接編集できるサイトなら、表示したい場所のHTML内に埋め込みコードを貼り付けます。
WixやSTUDIO、Shopifyなどのサイト作成サービスでは、「HTML埋め込み」「Embed」「カスタムコード」などのパーツを追加して、そこにコードを入力します。
サービスごとに名前は違いますが、Instagramから取得したコードを、ページ内のHTMLを扱える場所に貼るという流れは共通しています。
複数投稿やフィード表示はプラグイン・ツールが便利
ブログ記事に1つの投稿を埋め込むだけなら公式コードで十分ですが、ホームページのトップや店舗紹介ページにInstagramの最新投稿を並べたい場合は、プラグインや外部ツールを使うのが便利です。
WordPressのプラグイン
WordPressでは、Instagramのフィード表示に対応したプラグインを入れることで、投稿一覧をグリッドやスライダー形式で表示できます。
代表的なものには、次のようなプラグインがあります。
– Smash Balloon Social Photo Feed
– WPZOOM Social Feed Widget & Block
– Spotlight
– Social Feed Gallery
プラグインを使うメリットは、複数の投稿をまとめて表示できることと、デザインの調整がしやすいことです。
たとえば、表示する列数、画像サイズ、余白、スマホでの見え方などを管理画面から設定できます。
有料版では、ハッシュタグ投稿の表示、カルーセル表示、商品リンクとの連携、フィルタリング機能などが使えることもあります。
ただし、WordPress.comの契約プランや利用環境によっては、プラグインを自由に追加できないことがあるので、事前に確認しておきましょう。
外部のSNS埋め込みツール
外部のSNS埋め込みツールを使う方法もあります。
EmbedSocialのようなツールでは、Instagramだけでなく、TikTok、X(旧Twitter)、YouTube、Google口コミなどをまとめて表示できます。
自社アカウントの投稿だけでなく、キャンペーン用ハッシュタグの投稿を集めたい場合や、サイトデザインに合わせたウィジェットを作りたい場合には、外部ツールのほうが使いやすいことがあります。
プラグインやツールを使うときの注意点
プラグインや外部ツールは便利な反面、設定や費用、表示速度への影響も確認が必要です。
無料版では機能が限られることがあり、ビジネスで本格的に使う場合は有料プランが必要になることもあります。
また、Instagram側の仕様変更で、再認証や設定変更が必要になるケースもあります。
頻繁にInstagramを更新している企業サイトやネットショップでは、更新の手間を減らせるメリットが大きいですが、定期的なメンテナンスが必要になることも覚えておきましょう。
埋め込みが表示されないときの対処法
Instagram投稿を埋め込んだのに表示されない場合、まず確認したいのは貼り付け場所とコードの状態です。
よくある原因と解決方法
**1. 貼り付け場所が間違っている**
WordPressでは、カスタムHTMLブロックではなく普通の段落やビジュアル編集欄に貼ると、投稿ではなくコード文字列として表示されることがあります。
新しくカスタムHTMLブロックを作り直して、コードをそのまま貼り直してみてください。
**2. コードが正しくコピーできていない**
コピーするときにコードの一部が欠けていたり、不要な文字が前後に入っていたりすると正常に動きません。
Instagramの埋め込み画面に戻って、もう一度コードをコピーし直してみましょう。
**3. Instagram側の状態に問題がある**
埋め込んだ投稿が削除された、アカウントが非公開になった、投稿の公開範囲が変わったといった場合、サイト上ではエラー表示や空白になります。
**4. テーマやプラグインの影響**
WordPressのテーマ、キャッシュ系プラグイン、セキュリティ設定、広告ブロック系の環境などが影響して表示が崩れることもあります。
公開前にはパソコンだけでなくスマホでも確認して、表示されない場合はテーマやプラグインを一時的に無効化してみると原因がわかりやすくなります。
運用するときに気をつけたいこと
著作権・肖像権に注意
自社アカウントの投稿であっても、写真に人物や第三者の制作物が写っている場合は、Webサイトに載せることまで想定した許可を取っておくと安全です。
他人の投稿やユーザー投稿を埋め込む場合は、Instagram上で公開されているからといって自由に使えるとは限りません。
キャンペーン投稿や口コミ投稿を活用する場合は、投稿者への許可取りや利用規約の明示を行って、トラブルを避ける運用にしましょう。
表示速度への影響
Instagramの投稿は画像や動画、外部スクリプトを読み込むため、ページ内にたくさん埋め込むと表示が遅くなることがあります。
表示速度が遅いページは読者が離れてしまう原因になり、SEO(検索順位)の観点でもよくありません。
対策としては、次のような工夫が有効です。
– 記事内で紹介する程度なら数件に絞る
– フィード表示では表示件数を制限する
– 遅延読み込みに対応したプラグインを選ぶ
– 重要な本文より下に配置する
埋め込みは見た目を良くするためだけでなく、読者の理解や行動につながる場所に設置することが大切です。
まとめ：目的に合わせて方法を選ぼう
Instagramの投稿をブログやホームページに埋め込む方法は、目的によって選ぶべき手段が変わります。
– **記事内に1つだけ載せたい** → 公式埋め込みコード
– **複数投稿を自動更新したい** → プラグインや外部ツール
– **独自デザインや高度な連携が必要** → API開発
まずは公式コードで小さく試してみて、運用の目的がはっきりしてきた段階でフィード表示やユーザー投稿の活用へ広げていくと、無駄な設定やコストを抑えながら効果的にInstagramを活用できます。
この記事を参考に、あなたのサイトにぴったりの方法を見つけてみてください。
広告
