ソーシャルメディアフィードは、最近どんなウェブサイトにも欠かせない要素となっています。特にInstagramのような人気SNSのフィードはなおさらです。
ウェブサイトにInstagramフィードを埋め込めば、ウェブサイトとSNSアカウントの両方のリーチを広げることができます。
しかも、ウェブページへのInstagramフィードの埋め込みはとても簡単です。
必要なのは、コーディングの知識がなくても投稿をすべて取得してサイトに表示できる、使いやすいInstagram widgetだけです。
ここでは、当社の無料Instagram widgetを使った方法をご紹介します。
完全ガイド：ウェブサイトにInstagramフィードを無料で埋め込むには？
Instagramフィードをウェブサイトに埋め込む前に、無料のEmbedSocialアカウントを作成してください。その後、以下の手順に沿って新しいwidgetを設定していきましょう。
- ステップ1：AIでwidgetを定義する
- ステップ2：Instagramのソースを接続する
- ステップ3：テンプレートを選んで適用する
- ステップ4：AIプロンプトでテンプレートをさらにカスタマイズする
- ステップ5：widgetの埋め込みコードをコピーする
- ステップ6：ウェブサイトのエディターにコードを貼り付ける
ステップ1：AIでwidgetを定義する
AIプロンプトで理想のwidgetを説明します。AIビルダーがブランドのニーズを読み取り、あなたのイメージに合うレイアウト、配色、インタラクションのパターンを選んでくれます。
アイデアが思い浮かばない場合は、あらかじめ用意されたwidgetプロンプトから選ぶこともできます。
ステップ2：Instagramのソースを接続する
「Connect your source」をクリックして、Instagramアカウントを連携します。特定のビジネスアカウント、ハッシュタグ、メンションなどからコンテンツを取得するかを選べます。
公開Instagramのユーザー名を手動で入力して、最新の投稿を取得することも可能です。これにより、手動でアップロードしなくてもフィードが常に最新の状態に保たれます。
ステップ3：テンプレートを選んで適用する
すべてのテンプレートを見て、サイトのUIに合うスタイルを見つけましょう。slider、グリッド、カルーセル、「Wall of Love」レイアウトなどから選べます。
「Use template」をクリックすると、すぐにあなたのInstagramコンテンツが反映されます。ここでモデレーション設定を微調整して、選りすぐりの投稿だけをサイトに表示できます。
ステップ4：AIプロンプトでテンプレートをさらにカスタマイズする
AIエディターへのプロンプト入力を続けることで、Instagram widgetに細かい調整も大きな変更も加えられます。
ステップ5：widgetの埋め込みコードをコピーする
変更を保存したら、**「Embed」タブに移動します。「Copy code」**をクリックすると、コードがクリップボードにコピーされます。このコードは、ウェブサイト上のあらゆるHTMLブロックやwidgetエリアに貼り付けられます。
ステップ6：ウェブサイトのエディターにコードを貼り付ける
最後に、widgetを表示したいウェブサイトのページを開き、Instagram widgetのコードを貼り付けます。たとえばWordPressを使っている場合は、空のHTMLブロックを追加するだけです。
これで完了です。これからは、user-generated contentでソーシャルプルーフを手軽に高められ、その効果が業績にも表れていくはずです。
サイトに掲載したい素晴らしいお客様の声がほかにもありますか？無料でGoogleクチコミを埋め込む方法の完全ガイドもぜひご覧ください。
メモ： 当社の無料Instagramフィードwidgetは、1つのInstagramソースから最大5つのwidgetを表示するのに最適です。さらに多くのソースや機能が必要な場合は、PRO版もご検討ください。
動画ガイド：ウェブサイトにInstagramフィードを追加する方法
ウェブサイトにInstagramフィードを追加する一連の流れをまとめた、短い動画をご用意しました。
https://youtu.be/6opbzFS7Xic?si=UYJJiIRVi3KINw6\_
デモ紹介：ウェブサイト向けの高度なInstagram widget
こちらは、ウェブサイト上の無料Instagram sliderのひとつのライブデモです。
EmbedSocialのInstagram widgetは、Instagramの公式APIを使って収集した投稿を、あなたのウェブサイトに表示できるツールです。
このwidgetでは、自分自身のInstagramコンテンツだけでなく、あなたのアカウントにメンションした人や特定のハッシュタグを使った人の投稿も表示できます。
まずはInstagram widgetライブラリを見て、Instagramフィードをウェブサイトに埋め込むさまざまな可能性をチェックしてみてください。
たとえば、以下のテンプレートを使ってwidgetのテーマを埋め込めます。
すべての機能を実際の動作で確認したい場合は、以下のリンクからライブデモをご覧ください。
- ショッパブルInstagram slider – ライブデモ
- コラージュテンプレート –ライブデモ
- カルーセルテンプレート – ライブデモ
- sliderテンプレート – ライブデモ
- wallテンプレート –ライブデモ
これらの特別なInstagram widgetオプションを使えば、ほかとは一線を画し、新鮮なコンテンツを提供して、非常にインタラクティブなウェブサイトを作れること間違いなしです。
主要なウェブサイトビルダーすべてにInstagramフィードを埋め込む方法
ここまでで、widgetをデザインし、そのコードをコピーしてウェブサイトに貼り付ける方法はおわかりいただけたはずです。次に、主要なウェブサイトビルダー、ECプラットフォーム、CMSプラットフォームで設定を仕上げる方法を簡単に紹介します。
公式機能を使ってウェブサイトにInstagramフィードを埋め込む
Instagramには、ツールを使わずに個別の投稿やプロフィール全体を埋め込める標準機能が用意されています。ただし、アカウントが公開されていて、埋め込みがオンになっている場合にのみ動作します。
埋め込みコードの取得方法は以下の通りです。
- ブラウザ（PCまたはモバイル）でInstagram.comにアクセスします。
- 埋め込みたい投稿またはプロフィールに移動します。
- 右上の3点メニューをクリックします。
- **「Embed」を選び、「Copy embed code」**をクリックします。
- そのコードをウェブサイトのHTMLエディターに貼り付けます。
重要な注意点：
- 「Embeds」設定が有効になっている公開投稿またはプロフィールのみ埋め込めます。
- 非公開のアカウントや投稿には、埋め込みオプションが表示されません。
- アカウントを非公開にすると、埋め込みは自動的に無効になります。
- 投稿を埋め込んだ後に埋め込みをオフにしても、第三者サイトから埋め込みが消えるまでには時間がかかる場合があります。
- 一度に埋め込めるのは1件の投稿のみです。
- カスタマイズ、モデレーション、分析のオプションはありません。
より細かい管理、スタイリングのオプション、自動化が必要であれば、Instagramのコンテンツをすべて収集・モデレーションしてくれるEmbedSocialのようなソーシャルメディアアグリゲーターをご検討ください。
PROのようにInstagramフィードwidgetをカスタマイズする5つのベストプラクティス
これでInstagramフィードをどんなウェブサイトにも埋め込む方法がわかりましたので、次にPRO版で使える便利なカスタマイズオプションをいくつか見ていきましょう。
1．Instagram widgetのレイアウトを変更する
レイアウトは**「Templates」タブから切り替えられます。ここには基本的なレイアウトから多数の高度なレイアウトまで揃っています。たとえば、「Dark Slider」**レイアウトはこのように見えます。
そして、「Collage」に切り替えるとこのようになります。
2．モデレーションとAIフィルタリング
Filtersセクションを使えば、どのInstagram投稿をフィードに表示するか、どう表示するかをコントロールできます。
AIフィルタリングでは、ビジュアルコンテンツに基づいて投稿を自動表示できます。
- AIタグでフィルタして、選択したテーマに合致する投稿を表示します。
- 関連度スコアで、投稿がそのタグにどれだけ近い必要があるかを調整します。
- 新規投稿の自動承認で、選択したAI条件を満たす今後の投稿を自動的に追加します。
コンテンツフィルターで、フィードをさらに絞り込めます。
- 新規投稿の自動追加で、フィードを自動的に最新の状態に保ちます。
- 特定の日付以降の投稿を表示で、特定の期間にコンテンツを限定します。
- キーワードでフィルタで、キャプションのテキストに基づいて投稿を含めたり除外したりします。
- 手動タグで、明示的にタグ付けした投稿だけを表示します。
投稿タイプと並び順では、どの形式を表示するかを選び、新しい順または古い順で投稿を並べ替えられます。
3．Instagram投稿をライトボックス/ポップアップモードで表示する方法をカスタマイズする
Instagram投稿をより詳しく見せたい場合のために、ユーザーが投稿をクリックしたときに表示されるライトボックスモードの設定が別途用意されています。投稿は大きなポップアップ表示で開き、ユーザーはスワイプして詳細を見られます。
見た目をパーソナライズするために、以下のような設定から選べます。
- ライトボックスのクリック： なし、または元のソース。
- ライトボックスのスタイル： 横向き、縦向き、またはドロワー。
- ライトボックスの形状： コンパクトまたは大きな画像。
- ライトボックスの要素： 投稿キャプションの表示/非表示。
4．カラーテーマをライトからダークやレインボーに変更する
これはとてもシンプルな設定ですが、多くのユーザーに好まれています。ワンクリックでInstagramフィードのテーマを一新でき、サイト全体のテーマに合わせてフィードの表示方法を選べるからです。
レインボーテーマを使ったwidgetの例がこちらです。
5．AIジェネレーターでInstagramフィードをキュレーションする
さらに高度なカスタマイズが必要な場合は、ニーズに応じてカスタムCSSコードを生成するAIツールも用意されています。
「ボタンの色を水色に変更して」のようなプロンプトを書くと、すべてのボタンが変わります。CSSに詳しい方は、Custom CSS機能を使って独自のデザイン仕様を書くこともできます。
ボーナスのヒント：Instagramフィードをさらにカスタマイズ！
EmbedSocialでは、さまざまな色やフォント、レイアウトオプション、背景、CTAなど、多彩な要素でフィードをカスタマイズして、ブランドの世界観を表現できます。
創造力を存分に発揮できるよう、以下のオプションをいろいろ試してみてください。
- デスクトップやモバイルで表示する投稿数を設定する。
- Instagram画像の配置を選ぶ。
- フォントファミリーと表示言語を設定する。
- 「Moderation」タブで投稿の順番を並べ替える。
- 画像のサイズをカスタマイズする。
- 画像のリンク先をInstagramにするかライトボックスにするか選ぶ。
- widgetのタイトル、フォント、タイトルの色を変更する。
- フィードのレイアウトを変更する。
- CSSエディターを使って独自のフィードスタイルをデザインする。
メモ： さまざまなモデレーションツールを使って、ウェブサイトに表示するコンテンツを選ぶこともできます。これはハッシュタグキャンペーンなどで特に重要になります。
どんな種類のInstagramフィードを埋め込めるのか？
EmbedSocialはInstagramと直接連携しているため、ユーザーはフィードに加えて、さまざまな種類のInstagramコンテンツを埋め込めます。
- Instagram Storiesを埋め込む。このオプションを選ぶと、ユーザーはInstagramアカウントを選択し、Instagram投稿を収集するときと同じ方法でInstagram Storiesを取得できます。
- Instagram Reelsを埋め込む。動画付きの投稿を選ぶだけです。Reelsを縦型で表示するには、カードレイアウトを選ぶ際にReelsらしく見せる設定を見つけてください。
- Instagramのメンションを埋め込む。あなたのブランドへのメンションが付いた投稿をすべて収集します。Instagram上で自社についてどう言われているかをモニタリングするのに最適な方法であり、UGCを収集してウェブサイトに埋め込むことも可能になります。
- Instagramハッシュタグフィードを埋め込む。指定したハッシュタグ、または複数のハッシュタグを使った投稿を収集するのに最適なフィードの種類です。
- ビジネスアカウントの投稿を埋め込む：Facebookページと連携したInstagramビジネスアカウントを持つユーザー向けです。
- 個人アカウントの投稿を埋め込む：このオプションでは、個人のInstagramアカウントでもInstagramの写真を埋め込むことができ、投稿を生成・埋め込みできます。
もっと知る：
埋め込まれたInstagramフィードの素晴らしい5つの事例
今やソーシャルメディアフィードのないウェブサイトはほとんどありません。そのメリットは明らかだからです。多くのサイトでは、投稿のインタラクティブなInstagramギャラリーや、Instagramハッシュタグを使って収集したuser-generated contentのフィードを表示しています。
1．Babies R Usはイベントや顧客のInstagram投稿を表示
Babies R Usが、Mama Clubイベントを訪れた顧客がInstagramでシェアした投稿を、Instagram slider widgetを使ってどう表示しているか見てみましょう。
こうすることで、舞台裏を見たママたちのエンゲージメントと関心が高まり、次のイベントのチケットを予約したくなるのです。
2．Stranger ThingsはファンのInstagram投稿を披露
こちらは、ほかの人々の投稿でフィードを作成しているStranger Things体験のウェブサイト上のInstagramフィードの例です。
3．AeroblendのInstagramフィード
Aeroblendは、実際の顧客の顔に映る製品の効果を披露する、効果的で美しいInstagram widgetを持つ化粧品ブランドです。
4．スキンケアサービス向けのInstagram slider
Martina Collins Dental & Skin Clinicは、より多くの顧客を獲得するうえでレビューとuser-generated contentが欠かせないサービス業界の企業です。
同社はGoogleクチコミwidgetとInstagram sliderの両方を使って、満足した顧客の体験を披露しています。こちらがその例です。
5．Tumi向けのショッパブルwidget
Tumi Koreaは、EmbedSocialのwidgetを自社サイトに組み込み、ユーザーやブランドのInstagramアカウントがシェアした製品のInstagram投稿を表示しています。
widgetに表示される各Instagram投稿には、製品名、価格、製品ページへの直接リンクなど、関連する製品情報がタグ付けされています。
このショッパブルUGC widgetは、見込み客が製品を実際の使用シーンとともに見られる、魅力的で視覚に訴える方法を提供します。user-generated content（UGC）を活用して、本物らしさと信頼感を生み出しているのです。
Instagramフィードの事例をもっと見る。ほかの企業がどのようにInstagramの写真や動画を埋め込んでいるかを学び、よりよい施策のヒントを得ましょう。
EmbedSocialが最高のサードパーティ製ソーシャルメディアアグリゲーターである理由
なぜEmbedSocialが最高のソーシャルメディアアグリゲーターのひとつであり、事実上最高のInstagramアプリなのでしょうか。それは、InstagramのAPIに直接接続して、Instagramコンテンツの収集、モデレーション、表示に関する高度なソリューションを提供しているからです。
さらに、WordPressからWix、Squarespace、Shopify、Weeblyまで、主要なウェブサイトビルダーすべてにInstagramフィードを簡単に埋め込めます。そのため、見つけたすべてのUGC（自社のものも顧客のものも）が、コーディングスキルなしで素早く同期されます。
それだけではありません。PRO版では、表示できるコンテンツがInstagramのハッシュタグ、メンション、Instagramソーシャルメディアウォール全体にまで広がります。
ですから、それらすべてに加えて、リアルタイムの自動更新、分析、充実したカスタマーサポートが必要なら、EmbedSocialが第一の選択肢となるはずです。
EmbedSocialで得られる主な機能は以下の通りです。
- 完全なソーシャルメディアアグリゲーター：Instagram、Facebook、Twitter、TikTok、YouTubeなどからコンテンツを取得。
- 簡単なセットアップ：技術スキルやコーディングの知識がなくても、数分でwidgetを設置。
- カスタマイズ可能なデザイン：レイアウト、フォント、色を調整して、ブランドのウェブサイトのスタイルに合わせられます。
- レスポンシブ表示：Instagramフィードがデスクトップ、タブレット、モバイルのどの画面でも美しく表示されます。
- コンテンツのモデレーションとフィルタリング：ハッシュタグ、ユーザー名、場所で投稿をフィルタして、より細かく管理。
- 自動更新：新しいInstagram投稿が、手動更新や再埋め込みなしで即座に表示されます。
- メディアライトボックス：ユーザーをサイトの外に移動させることなく、写真や動画をポップアップで拡大表示。
- 専任のカスタマーサクセスチーム：セットアップ、スタイリング、トラブルシューティングについて、ライブチャットで素早くサポート。
- 組み込みの分析機能：インプレッション、クリック、エンゲージメントをダッシュボード内で直接トラッキング。
- ショッパブルフィードと製品タグ付け：投稿内の製品に名前、価格、直接リンクをタグ付け。
覚えておきましょう： アクティブユーザーには、追加のCustom CSS機能や、あらゆるウェブページに合うテンプレートなど、絶え間ないアップデートが提供されます。
最大の魅力は、主要なソーシャルメディアプラットフォームすべてと統合し、user-generated contentをすべて集めてソーシャルフィードを作れることです。
メモ： InstagramはAPIを継続的に変更しているため、公式APIアクセスを備えたプロ仕様のツールが必要です。EmbedSocialはすべてのコンプライアンス規則に従っており、この機能を提供しています。これらの大きなInstagram APIの変更について詳しくご覧ください。
ウェブサイトにInstagramフィードを追加するメリット
では、なぜウェブサイトにInstagramフィードを表示すべきなのでしょうか。
ウェブサイトにInstagramフィードを追加することは、デザインを美しくするだけにとどまりません。ソーシャルプルーフ、新鮮なコンテンツ、そして確かな成果をもたらします。
- Instagramの枠を超えてSNSでの存在感を広げる：訪問者はあなたのウェブサイトから直接コンテンツを発見できます。
- ページに新鮮でリアルタイムなビジュアルを提供する：自動同期されるInstagram投稿で、ウェブサイトを常にダイナミックに保てます。
- 実際のユーザーによる本物のソーシャルプルーフを表示する：顧客の体験を披露して、信頼と信用を築きます。
- 価値あるuser-generated contentを収集・分析する：オーディエンスが何を好み、何をシェアしているかのインサイトを得られます。
- ブランドコンテンツのリーチを拡大する：Instagramフィードを複数のウェブ接点でシェアできます。
- ウェブサイトのコンテンツ制作の時間を節約する：既存のInstagram投稿をサイトのビジュアルに活用できます。
- エンゲージメントを高めてInstagramフォロワーを増やす：訪問者にアカウントのフォローや交流を促せます。
- 本物のUGCでコンバージョンを後押しする：顧客の写真を、購買判断に影響を与える信頼の瞬間に変えられます。
このように、Instagramフィードはeコマースブランドにとって特に価値があります。実際のストーリーを強力なコンバージョンツールに変える、手軽な方法だからです。
まとめ：コンバージョンするInstagramフィードを埋め込もう！
EmbedSocialのようなuser-generated contentプラットフォームを使えば、個別の投稿を追加する場合でも、ページにInstagramウォールを追加したい場合でも、魅力的なSNSコンテンツで見込み客の注目を集められます。
ブログ記事を公開する場合でも、オンラインビジネスを運営する場合でも、ウェブページにInstagramフィードを追加することは、ブランドに命を吹き込む最も簡単な方法のひとつです。
覚えておきましょう： EmbedSocialは、主要なすべてのソーシャルメディアネットワークからコンテンツを収集し、Instagram投稿を完全にコントロールできるモデレーションオプションを備え、複数のInstagramフィードwidgetをページ全体に埋め込めます。
ですから、今日からフィードの埋め込みを始めて、Instagramコンテンツに語らせましょう。
