インスタグラムをウェブサイトに埋め込むと、ウェブサイトの滞在時間を延ばすことができたり、今話題のUGCを活用できるなどのメリットがあります。そこで今回はインスタグラムをウェブサイトに埋め込む方法についてご紹介します。
インスタグラムの埋め込みとは、インスタグラムの画像や動画の表示機能、また各種リンクなどの機能を維持したまま、ホームページやLPなど外部のウェブサイトやブログに表示させることです。
インスタグラムをホームページ等ウェブサイトで埋め込み表示する方法は以下の３つの方法があります。
インスタグラム発行の埋め込みHTMLコードをコピー＆ペーストする方法です。
カンタンで無料ですが、埋め込みコードを一投稿ずつコピー＆貼り付けする必要があるため、たくさんの投稿を埋め込みたい場合は、手間がかかります。またストーリーズは埋め込むことが出来ず、デザインの選択肢もありません。
インスタグラムを埋め込みウェブサイトに表示させるための専用のツールを使う方法です。ツールは、SNS埋め込みツール、UGC活用ツールなどの呼び方があります。
方法1.のインスタグラム発行のコードを使う場合よりも複数投稿の一括埋め込みが可能になったり、デザインや機能追加ができるため、企業のマーケティング等で採用されることが多い方法です。
皆さんがホームページ制作で使っているCMS等のプラグイン（拡張機能）を使う方法です。
例えばWordPressを使用している場合は、InstagramのWordPressプラグイン（英語記事にリンクします）を使用して、Instagram投稿を埋め込むことができます。smash balloon social photo feed やEmbedSocial といったプラグインがあります。
それではここからは、具体的なInstagram埋め込み手順を見ていきましょう。
まずは、もっともシンプルな方法である、インスタグラム自身が発行するhtmlコードを使って、インスタグラムをホームページやブログに埋め込み表示する手順を見ていきましょう。
インスタグラムの各投稿（写真・動画）とリールには埋め込み用のhtmlコードが付与されています。このコードをコピーして、埋め込みたいブログやウェブサイトの編集（テキスト）画面に貼り付けるだけで、簡単にインスタを埋め込むことが出来ます。
なお、ストーリーには埋め込みコードが付与されていないので、この基本の方法では埋め込むことができません。また、スマホのアプリ上ではインスタグラムのhtmlコードを取得できないため、パソコンでの作業をお勧めします。
パソコンのインターネットブラウザ（Google ChromeやSafariなど）でインスタグラムを開いて、埋め込みたい投稿を選択します。もしもみなさんが初めてパソコンでインスタグラムを開く場合は、ログインが必要になりますので、IDとパスワードを入力して進んでください。
パソコンでインスタグラムを開くとまずホーム画面が出てきます。その画面のタイムラインに並んでいる各投稿の右上に3つの点がありますので、そこをクリックします。
または、ホーム画面右上の自分のアイコンをクリックして自分のプロフィール画面に進んだ場合は、そこで一覧表示されている投稿やリールから埋め込みたい投稿をクリックすると、右上に3つの点が出てきますので、こちらをクリックします。
3つの点をクリックすると出てくるポップアップの中に「埋め込み」ボタンが出てきます。こちらをクリックして、埋め込み用のhtmlコードをコピーします。
なお、埋め込みインスタにキャプション（テキスト部分）を追加するかどうかを選ぶことが出来ます。
これでコピーは完了です。この後すぐに貼り付け作業ができない場合は、コピーしたコードをなくさないように、メモ帳などに念のため貼り付けておくと良いでしょう。
ここではよく使われるワードプレスで説明しますが、基本的にはどのCMSでも同じで、html編集画面を開き、インスタグラムを埋め込みたい場所に埋め込みコードを貼り付けるだけです。ワードプレスの場合はテキストエディタを開き、本文の埋め込みたい場所にコピーした―コードを貼り付けます。
これで埋め込み作業は完了です。例えばキャプションを追加しないで埋め込んだインスタはこのように表示されます。
この投稿をInstagramで見る
スマートフォンのインスタグラムアプリで投稿の右上の3つの点をタップしても埋め込みボタンは出てきません。
そのため、インスタグラムのアプリ上で埋め込みたい投稿を見ている場合は、以下の追加作業を行ってください。
まずはインスタグラムのアプリを開き、埋め込みたい投稿を開きます。
次に投稿の右上にある3つの点をタップします。メニューが出てくるので「リンク」をタップして、投稿のリンクURLをコピーします。
次にインターネットブラウザを開いて、URL入力欄にコピーしたリンクを貼り付けて開きます。そうすると先ほど選んだ投稿が、アプリではなくブラウザ上で閲覧できます。
この状態で右側の3つの点をクリックすると、今度は「埋め込み」ボタンが出てきますので、タップして埋め込みコードをコピーします。
あとは先ほどと同じです。コピーしたコードをウェブサイトやブログの編集画面（テキストエディタ）に貼り付けると、埋め込み完了です。
InstagramをはじめとするSNS埋め込みツールを使うと、複数の投稿を、洗練されたデザインで、簡単に、様々な機能を付けてウェブサイトに表示することができます。
ここでは例として、EmbedSocialのPROプランを使ってInstagramをウェブサイトに表示する方法をご紹介します。
EmbedSocialをご利用いただいていない皆様には、まずスタートする前に、無料のEmbedFeedトライアルアカウントを作り、以下のプロセスをお試しください。こちらから無料トライアルアカウントを作成いただけます。
ログインすると、Instagramをソースとして追加するためのソースセクションに移動します。
ソース（収集元）選択画面で、Instagramを選びます。
InstagramのハッシュタグやInstagramのアカウントなど、どこから投稿を収集したいかソースのタイプを選択します。
その後、#ハッシュタグを選択した場合は希望のハッシュタグを、@アカウントを選択した場合はアカウント名を入力します。
みなさんのInstagramアカウントとEmbedSocialの接続を行います。
ハッシュタグやビジネスアカウントを利用する場合は、Facebookとの連携が求められます(Instagramの規定によるもの）。
インスタグラムを埋め込むためのデザインテンプレートを選びます。テンプレートを使うボタンをクリックして選んでください。
ウィジェット（インスタグラムの埋め込みパーツ）の編集画面に進むと、画面左上にコードが表示されます。コードをコピーするをクリックし、このコードを埋め込むために使います。
注：コードのすぐ下にはCMSプラットフォームごとの設定手順の説明もあります。クリックするとヘルプ記事にリンクします。
ウェブページのコードを編集できるプラットフォームを使用している場合、Instagramウィジェットを表示したい位置のHTML構造のボディセクションにコードを貼り付けることができます。
WordPressにコードを埋め込むには、「ブロックを追加」アイコンをクリックし、以下のようにHTMLブロックにコードを貼りつけます：
以上で設定は完了です。以下の様にウェブサイトにインスタグラムが表示されます。
ここまでご紹介したように、Instagramをホームページやブログに表示するためには、埋め込み用のコードを利用することが一般的です。このコードは、ウェブサイトの編集画面上でインスタグラムを表示させたい場所に挿入する（貼り付ける）だけで、投稿を表示することができます。
ここでは、多くのホームページやランディングページで使われている人気のCMSを使って、Instagramフィードの埋め込み表示をする方法をまとめましたので、参考になさってください。
ワードプレスをお使いの場合は、プラグインを利用する選択肢があります。例えば、smash balloon social photo feedやEmbedSocialは、Instagramの埋め込みを簡単にでき、様々なデザインでホームページに表示することができます。
ここでは例としてEmbedSocialのプラグインを使う場合のステップをご紹介しましょう。
1. WordPressの管理画面を開き、プラグインに移動します
2. 検索で「EmbedSocial」と入力し、検索結果で「インストール」をクリックする
3. インストールが完了したら、プラグインリストで有効化をクリックする
4. フィードを表示したいWordPressページを開きます。
5. ＋をクリックしてブロックを追加し、カスタムHTMLブロックを選択する
（ショートコードブロックの利用も可能）
6. 取得してあるInstagramのHTMLコードを貼り付ける
7. そのページで’保存’/’公開’をクリックしてください
以上で完了です。変更が更新されればウェブサイト上に表示されているInstagramの投稿を確認することができるはずです。
Instagram発行の埋め込みコードを使用して投稿を埋め込むことができます。方法は簡単で、フィードを表示したいウィジェットエリアにコードを貼り付けるだけです。
なおこの方法では、個別の投稿のコードを一つずつコピーして貼り付けていく必要があるので、複数の投稿を埋め込み表示したい場合はやや作業が煩雑になります。
まず、Squarespaceのアカウントにアクセスし、ホームページからウィジェットを表示したいウェブサイトに移動して、以下の手順に従ってください。
1. ウィジェットを追加したいページのセクションをポイントし、「+」ボタンをクリックして新しいコンテンツブロックを追加します
2. 「Embed」ブロックを選択し、「Embed Data」コードアイコンをクリックします
3. 挿入ポイントにコードを貼り付け、画面左上の完了ボタンをクリックします
これで設定は完了です。Instagramのフィードは数秒でSquareSpaceで作成したページに表示されるはずです。
Shopifyに関しては、ウィジェットの埋め込みに関して、いくつかのオプションがあります。
以下のチュートリアルでは、特定のページにJavaScriptコードを埋め込む方法を紹介します。
Shopifyアカウントにログインし、Store > Options > Pagesに進み、ウィジェットを表示したいページを開きます。その後、以下の手順に従ってください：
1. ページエディターで、右上のコードアイコンをクリックします
2. テキストエディタの右上にあるHTML/コードアイコンをクリックし、取得した埋め込みコードを貼り付けます
3. 最後に「保存」をクリックすると、選択したページにインスタグラムのフィードが表示されます。
まず、Wixアカウントにログインし、ウェブサイトエディタを開きます。次に、以下のステップに従って、Wixで制作したウェブサイトにインスタグラムのフィードを埋め込みます。
1. 左上の「+」ボタンをクリックして新しいブロックを追加し、ポップアップでiFrameブロックを選択します
2. iFrameブロックが表示されたら、左上のEnter codeボタンをクリックします
3. ウィジェットエディタからコピーしたウィジェットコードを貼り付け、「Update」をクリックします
4. ウィジェットに合うようにiFrameブロックのサイズを変更し、Publishをクリックします
InstagramのフィードをハブスポットのCMS Hubに埋め込むには、以下の手順に従ってください：
1. ハブスポットのアカウントにログインします
2. トップメニューの「マーケティング」をクリックし、「ランディングページ」をクリックします
3. インスタグラムのフィードを表示したいページの編集をクリックします
4. ランディングページエディターで上部メニューの「ファイル」＞「ページ設定」を選択
5. ここで「Advanced」を選択し、「Footer」テキストエリアに移動する
6. コードを貼り付ける
7. 保存または公開をクリックする
インスタグラムをウェブサイトに埋め込み表示すると、ウェブサイトの滞在時間を延ばすことができたり、社会的信用を得たり、SNS投稿の周知やフォロワーの獲得に役立つなどのメリットがあります。
インスタグラムをウェブサイトに埋め込み表示するメリットの中で現在最も価値が高い効果は、UGCをウェブ上で活用できることでしょう。
最近、商品の実際の購入者によって作成されたクチコミ投稿を、ユーザー生成コンテンツ（UGC）として自社のウェブサイトで紹介することが広告の代替手段として注目されています。UGCはeコマースなどでは特に顧客の信頼を獲得し、見込み客の購買決定を促進することに役立ちます。
Instagramtをウェブサイトに埋め込むメリットの詳細はこちらで解説していますので、ぜひご覧ください。
国内外で多くのSNS埋め込みツールがリリースされています。インスタグラムだけでなく、X（旧Twitter）など他のSNSに対応しているものもあります。Googleで「SNS埋め込みツール」、または「UGC活用ツール」というキーワードで検索してみましょう。
Instagrmを埋め込んでウェブサイトに表示させるツールを選ぶ際には、以下の点を検討してみてください。
「EmbedSocial（エンベッドソーシャル）」は、EmbedSocialはSNSの投稿やオンラインレビューを収集し、ウェブサイトの埋め込むことができるWEB制作×SNS連携プラットフォームです。日本国内で600社以上に導入実績があり、さらに世界全体ではこれまでに15万以上と、大変多くの皆様にご利用いただいてきました。
EmbedSocialはInstagramをはじめ、TikTok、YouTube、X（旧Twitter）などに投稿された画像や動画、またGoogleレビューなどを集めて一つのウィジェット（パーツ）を作成し、洗練されたデザインでみなさんのホームページやランディングページに表示することができます。
リーズナブルな価格設定で、ローカルビジネスからグローバルエンタープライズまでと、幅広い皆様のマーケティング施策の一環として活用いただいています。
インスタグラムだけでなく、X（旧Twitter）やTikTok、Youtubeなど各種SNSのAPIと統合したツール開発の豊富な経験を活かし、常にプラットフォーマーからの更新情報を製品に反映させているため、様々な種類のSNS投稿を表示できます。
注：InstagramはAPIを継続的に変更しており、InstagramプラットフォームへのAPIアクセス権を持つ開発者によって構築された専門的なツールが必要です。EmbedSocialはこれを提供することができ、最新のAPI変更に常に準拠しています。
またEmbedSocialは簡単な設定、カスタマイズオプションの豊富さ、各種デザインテンプレートなど、誰でも簡単にインスタグラムを埋め込むことができることができます。
ユーザーが生成したコンテンツ（UGC）をハッシュタグなどで集めてウェブサイトで表示する際には、投稿者に利用の許諾を取ることが推奨されますが、これらを効率的に行う機能の有無も大切なポイントですので、ツール選定の際に確認しましょう。
さて、埋め込んだインスタグラム”埋め込みインスタ”はどのように活用できるのでしょうか。私たちが開発したインスタ埋め込みツール「エンベッドソーシャル」を使った場合を例に、埋め込みインスタ活用術をご紹介します。
インスタグラムの投稿をウェブサイトに埋め込み、ショッパブル（購買可能）な投稿にカスタマイズするアイディアです。
インスタの投稿をウェブサイトに埋め込んで商品カタログとしてウェブサイトで表示し、さらに「予約する」「購入する」などのCTAボタンを投稿に追加して、予約ページやeコマースサイトにリンクさせることもできます。
商品やサービスのユーザーにより作成されたコンテンツ、ユーザー生成コンテンツ（UGC）は広告に代わるコンテンツとして注目されています。
商品やサービスを使った様子を指定のハッシュタグをつけて投稿してもらう「ハッシュタグキャンペーン」や、ハッシュタグを使ってコンテストへの出品を促すバーチャルイベントなどで、UGCを活用した例が多く見られます。
当社のエンベッドソーシャル導入事例のページには多くの魅力的なハッシュタグキャンペーンの事例が掲載されています。事例はキャンペーンの種類、企業の規模、業界、いすれもバラエティに富んでおり、UGCを使ったマーケティング施策を検討されている皆様の参考になるはずです。
今回ご紹介したインスタグラムに限らず、SNSはウェブサイトと有機的に連携させることで、より多くの価値をもたらすことが出来ます。
SNS埋め込み・UGC活用ツールを提供している当社では、各種SNSをウェブサイト上に表示させる方法の解説記事を豊富に公開しています。X(旧Twitter)の埋め込み表示方法や、TikTokの表示方法、さらには、YouTubeやPinterestなどのウェブサイトへの埋め込み表示方法も紹介していますので、ぜひ参考になさってください。
せっかく時間を使って作成した写真や動画ですから、SNSに載せただけではもったいない！今回のインスタの様に投稿をウェブサイトに埋め込んで連携すれば、SNSマーケティングの幅が少し広がりそうですよね。一度ぜひお試しください。
【2023年6月更新】インスタグラム新機能・アップデート情報まとめ
WordPressウェブサイトにインスタグラムを埋め込む方法まとめ
インスタグラムをウェブサイトやブログに埋め込み表示する方法
FeedlinkがSNS運用＆ブログ作成ツールとして進化
UGCツール詳細比較！目的別おすすめ製品や選び方を解説
【弁護士監修】X（旧Twitter）投稿のWEBサイト掲載は違反になる？コンテンツの著作権について詳しく解説
