Instagramの投稿をウェブサイトに埋め込むことで、最新のコンテンツを手軽に表示し、ユーザーとのエンゲージメントを高めることができます。このガイドでは、プラグインや公式埋め込みツールを使った簡単な方法から、カスタマイズ性の高い埋め込みまで詳しく解説します。自社サイトのデザインに合わせた効果的な活用法を見つけ、SNSと連携した魅力的なコンテンツ更新を実現しましょう。
この記事の結論
インスタグラムをサイトで活用するには、無料ではじめられるSNS連携ツール『EmbedSocial』の活用が便利です。無料プランでも、自社のインスタグラム投稿を取得するだけでなく、多種多様なレイアウトを活用、投稿に外部リンクをつけて購買行動を促進することができます。
インスタグラム埋め込みの方法と選択肢
方法1. インスタグラム公式のHTMLコードを活用
Instagramの公式埋め込みツールは、投稿URLを使ってHTMLコードを生成する手軽な方法です。初心者でも簡単に利用でき、Instagramの最新仕様に適合した安定性が魅力です。コードをウェブサイトに貼り付けるだけで表示できますが、デザイン調整の自由度が低いため、投稿のサイズやスタイルを細かく変更することは困難です。複数の投稿をまとめて表示する場合には適していない点が課題です。
方法2. SNS埋め込み専用のプラグインを活用
SNS埋め込み専用プラグインを利用すると、Instagramのフィードを自動的に表示・更新することができます。プラグインの設定画面から、デザインやレイアウトを自由に調整でき、統一感のある表示が可能です。特定のタグやアカウントの投稿をフィルタリングする機能もあり、イベントやキャンペーンに関連するリアルタイムのコンテンツ表示にも対応できます。費用が発生する場合もありますが、頻繁に更新されるウェブサイトには特に有用です。
方法3. APIを独自に開発する
Instagram Graph APIを用いると、高度なカスタマイズが可能です。APIを使用して投稿データを取得し、ウェブサイトのデザインや機能に合わせた表示ができます。指定したタグの投稿を動的に取得したり、他のシステムと連携してフィルタリング機能を追加するなど、自由度の高い設定が可能です。開発には技術スキルが必要で、設定や保守に時間がかかる場合もありますが、ビジネスニーズに応じたカスタマイズを実現できます。
これらの3つの方法は、それぞれに特有のメリットとデメリットがあります。公式ツールは手軽さ、プラグインはカスタマイズ性、APIは柔軟性が魅力であり、目的や技術レベルに応じて最適な手法を選ぶことが重要です。
公式埋め込みコードでサイトに表示させる方法
まずは、最もシンプルな方法として、Instagramが提供するHTMLコードを利用し、ホームページやブログに投稿を埋め込む手順をご紹介します。
Instagramの各投稿（写真、動画、リール）には埋め込み用HTMLコードが生成されます。このコードをコピーし、ウェブサイトの編集画面に貼り付けるだけで、簡単に表示が可能です。ただし、ストーリーには埋め込みコードが付与されておらず、またコードの取得はパソコン上でのみ行えます。
ステップ1. HTMLコードをPC画面から取得する
パソコンのインターネットブラウザ（Google ChromeやSafariなど）でインスタグラムを開いて、埋め込みたい投稿を選択します。もしも初めてパソコンでインスタグラムを開く場合は、ログインが必要になりますので、IDとパスワードを入力して進んでください。
パソコンでインスタグラムを開くとまずホーム画面が出てきます。その中から投稿を一つ選びクリックすると、右上に3つの点が表示されるためそこをクリックします。
ステップ２．埋め込みコードをコピーする
3つの点をクリックすると出てくるポップアップの中に「埋め込み」ボタンが出てきます。こちらをクリックして、埋め込み用のhtmlコードをコピーします。
なお、埋め込みインスタにキャプション（テキスト部分）を追加するかどうかを選ぶことが出来ます。
これでコピーは完了です。この後すぐに貼り付け作業ができない場合は、コピーしたコードをなくさないようにメモ帳などに保存しておくと良いでしょう。
ステップ3. ウェブサイトの編集画面にコードを貼り付ける
ここではよく使われるWordPressで説明しますが、埋め込みの流れは基本的にどのCMSやカートシステムでも同じです。HTML編集画面を開き、インスタグラムを埋め込みたい場所に先ほど取得した埋め込みコードを貼り付けるだけです。ワードプレスの場合はテキストエディタを開き、本文の埋め込みたい場所にコピーした―コードを貼り付けます。
以下の写真で見ても分かる通り、Instagramの埋め込み用コードは非常に長く、HTMLコード全体を読みづらくするためその点もデメリットであるといえます。
実際に埋め込んだ場合、以下のように表示されます。
(参考）スマートフォンで埋め込みコードを取得する
スマートフォンのインスタグラムアプリで投稿の右上の3つの点をタップしても埋め込みボタンは出てきません。そのため、インスタグラムのアプリ上で埋め込みたい投稿を見ている場合は、以下の追加作業が必要です。
まずはインスタグラムのアプリを開き、埋め込みたい投稿を開きます。次に投稿の右上にある3つの点をタップします。メニューが出てくるので「リンク」をタップして、投稿のリンクURLをコピーします。
次にインターネットブラウザを開いて、URL入力欄にコピーしたリンクを貼り付けて開きます。そうすると先ほど選んだ投稿が、アプリではなくブラウザ上で閲覧できます。この状態で右側の3つの点をクリックすると、今度は「埋め込み」ボタンが出てきますので、タップして埋め込みコードをコピーします。
あとは先ほどと同じです。ウェブサイトの作成を全てスマホで完結している場合にはこの方法が考えられますが、PCで仕事を行っている場合には通常通りPCブラウザから操作するのが簡単です。
SNS埋め込み専用プラグインを活用して埋め込む方法
InstagramをはじめとするSNS埋め込みツールを使うと、複数の投稿を、洗練されたデザインで、簡単に、様々な機能を付けてウェブサイトに表示することができます。ここでは例として、EmbedSocialを使ってInstagramをウェブサイトに表示する方法をご紹介します。動画で閲覧したい方は以下からもアクセスいただけます。
ステップ1: アカウントの作成
ここではSNS埋め込みツール『EmbedSocial』を使って、Instagramの投稿をウェブサイトに埋め込む方法をご紹介します。まずは無料アカウントを作成いただく必要があるため、以下の画面よりメールアドレス・パスワードまたはお持ちのGoogleアカウントを使ってアカウント作成を行ってください。
無料アカウントの作成はこちら：EmbedSocialフリープラン
ステップ2: 取得するSNSソースを選ぶ
アカウントの作成が完了すると、投稿を取得するSNSソースを選ぶ画面が表示されるため、インスタグラムを選びます。このとき、管理するアカウントをFacebookページと紐づけたうえでそのFacebookアカウントをシステムへと接続することが必要となります。
接続が完了すると、追加するInstagramアカウントを選択する画面へと遷移します。このとき、自社で管理するアカウント以外にも、ユーザーネームを指定することで投稿を取得しウェブサイトに埋め込むことが可能です。
ステップ3: Instagramの埋め込み用コードをコピーする
ソースおよびレイアウトを選択すると、画面左上に埋め込み用のコードが表示されます。コードをコピーするをクリックし、ウェブサイトに貼り付けることでInstagramの投稿を表示させることが可能となります。
ステップ4: ご利用のCMS・カートシステムで埋め込む
埋め込みコードを取得するセクションのすぐ下には、様々なプラットフォームで投稿を埋め込むガイドラインが表示されています。ここではいくつか抜粋してご紹介します。
STUDIOにSNSフィードを埋め込む方法
国内で最も利用されているホームページ制作ツールの一つである「STUDIO」で作成したページに、EmbedSocialを使って作成したSNSフィードを表示させる方法をこの記事ではご紹介します。STUDIOで埋め込みを実装する手順はとても簡単です！
1. STUDIOのページ編集画面に移動し「ボックス」から「Embed」の「Blank」を選択します。
2. 要素を追加したのちには、該当の要素をクリックして取得した埋め込みコードを貼り付けます。
以上で完了です！以下のように、STUDIOで作成したページにEmbedSocialを使ってSNSのフィードを追加することができました。STDIOプラットフォームは以前はiframeの埋め込みのみに対応していましたが、2023年6月のアップデートによりJavaScriptのタグにも対応したため、EmbedSocialのデフォルトコードでも埋め込みが可能となりました。
ShopifyストアにSNSフィードを埋め込む方法
Shopifyで作成したストアのトップページにEmbedSocialのコードを埋め込み、SNS投稿・レビュー・ストーリーなどを表示させる方法をご紹介します。
1. Shopifyストアの管理画面を開き、「テーマ」＞「カスタマイズ」と進みます。
2. 「セクションを追加する」を選択します。
3. 一番下の「コンテンツをカスタムする」を選択します。
4. 「コンテンツを追加する」をクリックし、一番下の「HTMLをカスタムする」を選択します。
5. EmbedSocialのコードをHTML記入欄へとペーストし、「保存する」を選択します。
6. 以上の操作で、Shopifyストアトップページでの埋め込み表示が完了します。
ここまでの操作で見てきた通り、基本的な操作は全て同じです。どのシステムでもHTMLを追加・編集することができる（※主要システムの中ではSTORESのみ編集不可）ため、EmbedSocialで作成したInstagramの埋め込みコードをその部分に貼り付け、設定を保存することでサイトで表示させることができます。一度埋め込んだ後には、EmbedSocial側で変更した保存は自動でサイト上でも反映されるようになるため、最初にコードを埋め込んだ後は同じ操作が不要なため手間もかかりません。
インスタグラムを埋め込みWEBページに表示するメリット
Instagramをウェブサイトに埋め込むことで、コンテンツの更新を自動化したり、視覚的な魅力を高めたりと、様々な利点があります。単なる装飾としての役割にとどまらず、ユーザーエンゲージメントの向上やSNSフォロワーの増加にも貢献するため、企業にとって有効なマーケティング手法です。このセクションでは、Instagram埋め込みの具体的なメリットについて詳しく解説します。
エンゲージメントの向上
Instagramの最新投稿をウェブサイトに埋め込むことで、視覚的なコンテンツが訪問者の注意を引きやすくなります。写真や動画を使ったダイナミックな表示は、テキスト中心のコンテンツよりも興味を引きやすく、ユーザーの滞在時間を延ばす効果があります。結果として、製品ページの閲覧やサービス利用への導線を強化し、エンゲージメントの向上につながります。
これは実際に当社が行った実験からも、EmbedSocialのコンテンツがサイト訪問者の滞在時間増加に貢献することが確認できています。
コンテンツ更新の効率化
Instagramの投稿を自動的にウェブサイトに反映させることで、最新情報の発信が効率的に行えます。新商品やキャンペーンの告知をリアルタイムで共有できるため、手動での更新作業が減り、コンテンツ管理が容易になります。また、SNSの頻繁な更新がそのままウェブサイトの新鮮さにも反映されるため、サイト全体の活気を保つことができます。
関西地域でショッピングセンターの管理・運営や衣料品等の販売を手掛ける『株式会社エイチ・ツー・オー商業開発』様のコーポレートサイトでは、EmbedSocialを活用して自社の公式SNSアカウント投稿を収集し、コーポレートサイトトップに埋め込み活用いただいております。
SNSフォロワーの増加
埋め込まれたInstagramの投稿を通じて、訪問者が簡単にアカウントをフォローする導線が確保されます。ウェブサイト上で魅力的な投稿に触れたユーザーが、そのままフォロワーになりやすくなるため、SNSのフォロワー数やアカウントの影響力を拡大する効果が期待できます。これにより、ウェブサイトとSNSの相互連携が強化され、マーケティングの効果を高めることができます。
福井県のあわら温泉地域で事業を行うホテル八木様では、お客様からのホテルに関する投稿が少ないという課題がありましたが、新しく始めたSNSキャンペーンとサイトでの活用を通して、効率的なフォロワー獲得の仕方を理解するとともに、お客様からの投稿数が増え自社のことを受け入れてもらえた感じたと話していただきました。
サイトに埋め込めるのは自社アカウントだけではない
nstagramの埋め込み機能は、自社の公式アカウントだけでなく、一般のユーザーが投稿したコンテンツ（UGC）にも対応しています。ユーザー生成コンテンツ（User-Generated Content）を活用することで、製品やサービスに関する実際の利用シーンを紹介し、より信頼性のある情報を提供できます。特に、顧客の声やレビューをサイトに取り入れることで、訪問者にリアルな体験を伝え、購買意欲を高める効果が期待できます。
UGCを埋め込むことで、ブランドの社会的証明を強化し、ユーザーが共感しやすいコンテンツを提供できます。イベントの参加者が投稿した写真や顧客が商品を使用している様子を共有することで、製品の魅力をより多くの人に伝えることができ、SNSでのエンゲージメント向上にもつながります。
UGCを活用するメリット①：信頼性と社会的証明の向上
UGCを活用することで、実際の顧客によるリアルなレビューや使用シーンをサイトに取り込むことができます。これにより、訪問者は製品やサービスに対する信頼感を高め、第三者の意見を参考にした購買判断が促進されます。
実際にUGCを導入いただいているFP Office様では、怪しまれやすいという金融業のデメリットを払拭するため、良い口コミを悪い口コミも忌憚なく掲載いただき、サイトからの成約率を約30％向上させることに成功されています。
UGCを活用するメリット②：サイトの回遊性向上
UGCを活用することで、訪問者が他の顧客の体験や使用シーンに触れる機会が増え、サイト内での回遊性が高まります。さまざまなコンテンツに興味を持つことで、ページ間の移動が活発になり、サイト全体の滞在時間が延びるとともに、コンバージョンの可能性が高まります。
ビジネスバッグを中心に世界的な人気を誇るTUMI (トゥミ) 様では、表示させたSNS投稿に対しては「商品タグ」を設置し、訪問者の購入までのプロセスをスムーズにすることで、ECサイトでの回遊性を高めコンバージョンを促進するのに役立てていただいております。
UGCを活用するメリット③：ブランドへの共感とエンゲージメントの促進
UGCは他のユーザーに共感を生みやすく、実際の顧客の体験がブランドに対する親近感を高め、エンゲージメントの向上につながります。中京テレビ様は、視聴者とのコミュニケーションを加速させるため、サイトリニューアルに合わせてEmbedSocialを導入されました。自社アナウンサーの身近なコンテンツを活用することで、より魅力的で親しみやすいサイト作りを目指されています。
UGCはウェブサイトだけでなく、企業のマーケティング活動に役立てることができる重要な「資産」です。従来は企業が自主的にお客様にアンケートなどを行っていたのが、SNSなどの普及により顧客側が自主的にGoogleマップやSNS・各種口コミサイトなどを投稿するようになりました。これらをコンテンツだけでなく、自社の強み・弱み把握につなげ、経営戦略を立てるのに役立てることができます。UGC活用の詳細については、以下をご覧いただけますと幸いです。
APIを独自に開発して投稿を表示させる方法
InstagramのAPIを使って投稿をウェブサイトに表示する方法は、高度なカスタマイズが可能であり、独自のフィルタリング機能やレイアウトの調整を行える点で魅力的です。たとえば、特定のハッシュタグ投稿をリアルタイムで取得し、動的に表示することができます。企業によっては、他のシステムとの統合を含めた柔軟な対応が求められるため、APIを活用する価値があります。
しかし、Instagram APIの利用にはいくつかのハードルがあります。まず、開発にはプログラミングスキルが必要で、設定や保守には時間とコストがかかります。さらに、InstagramのAPIは定期的に変更が行われることがあり、その都度対応する必要があるため、最新仕様に追従するためのリソースが求められます。このため、開発力の高い一部の企業を除いては、APIを独自に実装することは現実的ではない場合があります。
当社の行った試算によると、自社でAPIを活用するのに比べてEmbedSocialを利用すると、初年度のコストを約98%のコストを削減できることが計算されました。この例は少し極端かもしれませんが、SaaSシステムを活用することが現実的な選択肢として最も良いことが分かるのではないかと思います。
※自社開発の場合は、1人月 750,000円(税抜)として試算。EmbedSocialシステムの利用費用はPROプランを利用した場合です。試算は開発に発生する工数や利用規模などによって大きく異なります。
Instagram埋め込みに対応しているメディア
Instagramの埋め込み機能は、さまざまなメディアに対応しており、投稿内容や形式に応じた埋め込みが可能です。ただし、通常の埋め込み方法では投稿を1件ずつ表示するか、自社アカウントのフィードを一覧で表示するのが一般的です。EmbedSocialのようなツールを利用することで、幅広いメディアタイプを埋め込むことができ、サイトの魅力を一層引き立てます。ツールによって対応メディアが異なるため、必要な機能があるかを事前に確認することが大切です。
- フィード投稿
- リール動画
- 共同投稿（コラボ投稿）
- ストーリー投稿
- ライブ配信、長編動画（旧IGTV）
- ハッシュタグ・メンションでの投稿一覧
Instagramの埋め込みツールの選び方
Instagramの埋め込みツールは多様な種類がありますが、目的やニーズに合ったものを選ぶことが重要です。以下のポイントを考慮することで、自社サイトに最適なツールを見つけやすくなります。埋め込みツールを選ぶ際の基準について、詳しく解説します。
使いやすさと設定の柔軟性
埋め込みツールの使いやすさは、運用の手間を大きく左右します。初心者でも操作しやすい直感的なインターフェースを持ち、フィードのデザインや表示設定が柔軟に調整できるツールが理想です。管理画面での設定変更が容易であれば、日々の運用やフィードの更新に対する負担も軽減されます。特に、頻繁にコンテンツを更新する企業にとっては、簡単にレイアウトを変更できるかどうかが大きなポイントになります。
SNSとメディアの対応
埋め込みツールを選ぶ際には、対応しているSNSやメディア形式が、自社のニーズに合っているかを確認することが重要です。たとえば、動画投稿の埋め込みに対応しているか、特定のハッシュタグを使ったフィードの表示が可能かなど、具体的な機能をチェックしましょう。自社が必要とするカスタマイズが可能であれば、ブランドイメージやコンテンツ戦略に合わせた表示が実現できます。
コストとサポート体制
ツールのコストは、選定時に重要な要素です。有料プランが提供する機能が予算に見合うかどうかを確認し、無料版でも必要な機能が揃っているかをチェックしましょう。また、サポート体制も考慮するべき点です。日本語対応のカスタマーサポートがあるか、問題が発生した際に迅速に対応できる体制が整っているかを確認することで、安心して利用できます。
セキュリティとシステムの安定性
選ぶツールのセキュリティ対策も考慮する必要があります。データの保護やアクセス制限が適切に行われているか、セキュリティ基準に準拠しているかを確認してください。また、システムの安定性も重要で、アップタイムの実績や障害時の対応体制が整っているかをチェックすることで、サイトの運用リスクを軽減できます。
ツールの選び方に関しては、以下のような記事もご参考にくださいませ。
本記事のまとめ
Instagramの埋め込みには専用のプラグインを使用するのが最もコスト効果の高い方法です。ツールを選ぶ際は、対応するメディアや機能の違いをよく吟味する必要があります。Instagramのフィード、リール、ハッシュタグ投稿などを埋め込むことで、エンゲージメントの向上やコンテンツ更新コストの削減といったメリットを得られます。これにより、サイトの回遊性を高め、ユーザー体験を改善することが可能です。適切なツールの選択が、効果的な運用の鍵となります。
インスタグラムをサイトで活用するには、無料ではじめられるSNS連携ツール『EmbedSocial』の活用が便利です。無料プランでも、自社のインスタグラム投稿を取得するだけでなく、多種多様なレイアウトを活用、投稿に外部リンクをつけて購買行動を促進することができます。