--- title: "インスタグラムストーリーのサイト埋め込み｜導入事例と活用方法もご紹介！" date: 2020-07-30 modified: 2024-12-09 canonical_id: embed-instagram-stories locale_slug: embed-instagram-stories author: "esbasicmath" category: - blog - tutorials tags: - instagram-story - embed-instagram-feeds summary: "今回は、EmbedSocialのストーリー機能を使って、投稿したストーリーをサイトに埋めこみ・再活用する方法をご紹介させていただきます。インスタグラムアカウントと接続したFacebookアカウントをシステムへと接続後、自動生成されるコードをサイトに貼り付けるだけで、ストーリー投稿をサイト上に表示させることができます。" draft: false seo: title: "インスタグラムストーリーのサイト埋め込み｜導入事例と活用方法もご紹介！" description: "今回は、EmbedSocialのストーリー機能を使って、投稿したストーリーをサイトに埋めこみ・再活用する方法をご紹介させていただきます。インスタグラムアカウントと接続したFacebookアカウントをシステムへと接続後、自動生成されるコードをサイトに貼り付けるだけで、ストーリー投稿をサイト上に表示させることができます。" og_image: "https://embedsocial.jp/hp/wp-content/uploads/2020/07/embed-stories.jpg" og_image_width: 1600 og_image_height: 900 og_description: "インスタグラムのフィード投稿は、個別に埋め込みコードを取得して埋め込んだり、外部ツールを使用してハッシュタグごとに収集して表示したりできることが知られていますが、インスタグラムストーリーの投稿を埋め込む機能についてはあまり知られていません。今回は、EmbedSocialのストーリー機能を使って、投稿したストーリーをサイトに埋めこみ・再活用する方法をご紹介させていただきます。" structured_data: article --- インスタグラムのフィード投稿は、個別に埋め込みコードを取得して埋め込んだり、外部ツールを使用してハッシュタグごとに収集して表示したりできることが知られていますが、インスタグラムストーリーの投稿を埋め込む機能についてはあまり知られていません。 今回は、EmbedSocialのストーリー機能を使って、投稿したストーリーをサイトに埋めこみ・再活用する方法をご紹介させていただきます。 ## 目次 1. [SNS投稿埋め込みツール EmbedSocialとは？](#anchor1) 2. [インスタグラムストーリーの埋め込み方法](#anchor2) 3. [集めたストーリーはシステムで再構成して表示が可能！](#anchor3) 4. [大手導入実績多数！初期費用無料・月額7,150円〜 ご利用いただけます](#anchor4) ## SNS投稿埋め込みツール EmbedSocialとは？ ![](https://embedsocial.jp/hp/wp-content/uploads/2020/07/blog_embed_sns.jpg) ソーシャルメディアの投稿・レビューなどを、簡単にWEBサイトに埋め込むことができるSaaS型のウィジェット作成ツールです。全世界で50,000人以上のユーザーが1,000,000以上のウィジェットを作成し活用しております。 対応しているソーシャルメディアは現時点で7種類（2020年9月現在）。InstagramやTwitterから投稿を収集するだけでなく、Youtube・TikTokなどの動画にも対応。スマホでのコンテンツ掲出に優れたInstagramストーリーの埋め込み・WEBサイトでの表示にも対応しています。 使い方は様々。多様な使い方に対応できる充実した機能と簡単な操作性が人気の理由の一つです。 ## インスタグラムストーリーの埋め込み方法 #### ストーリーの収集・表示 EmbedSocialでの設定方法はシンプルです。 インスタグラムアカウントと接続したFacebookアカウントをシステムへと接続後、自動生成されるコードをサイトに貼り付けるだけで、ストーリー投稿をサイト上に表示させることができます。 初期設定さえ済ませてしまえば、ストーリーを投稿するごとに自動同期する形でサイト上に表示させることができ、一度収集したストーリーは何度でも再活用いただくことが可能です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/04/connect-facebook-account-1024x540.png) ![](https://embedsocial.jp/hp/wp-content/uploads/2020/04/widget-created-1024x678.png) ## 集めたストーリーはシステムで再構成して表示が可能！ システムへと取り込んだストーリーは、管理画面より新たに再構成して表示させることができます。 #### 並び替え・非表示 投稿した順番に関係なく並び替えをすることができ、一部を非表示にすることも可能です。時系列順に投稿したストーリーを、内容に応じて順番を変えたい場合などに有効です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/05/story-moderation-1024x617.jpg) #### レイアウト変更 ストーリー機能のレイアウトは5種類以上用意されています。 インスタグラムのように小さな丸で表示しクリックで拡大するようなレイアウトや、以下のように拡大した状態で自動的にスクロールされるレイアウトなど、サイトのデザインや表示領域に合わせて自由にカスタマイズすることができます。 カスタムCSSを追加し、サイトのデザインに合わせてレイアウトを細かく調整することも可能です。 #### 組み合わせの変更 ストーリーの組み合わせを変更して、インスタグラムのようにハイライトを作成することができます。システムにアカウントを接続した後は投稿したストーリーが全て保存されるため、全期間のストーリーから組み合わせを選んで新たなストーリーウィジェットを作成することが可能です。 ## 大手導入実績多数！初期費用無料・月額7,150円〜 ご利用いただけます ### 導入事例 #### Olympicグループ様 公式サイトトップにストーリー機能を導入いただきました。 インスタグラムストーリーで紹介している一押し商品を自動同期させる形で、サイト上にも表示いただいております。特に近年ではスマートフォンからのアクセスが多いため、縦型の画面でより見やすいストーリー機能が採用されました。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/07/olympic-story-1-1024x594.png) #### STELLAR HOLLYWOOD様 アクセサリー・ファッション雑貨・ヘアアクセサリーのブランド STELLAR HOLLYWOOD様のトップページにストーリー機能を導入いただきました。画面幅の小さいスマートフォンで、特にECサイトなどではコンテンツ過多となりがちですが、ストーリーの形を選択すると小さなスペースに配置することも可能となります。 [https://embedsocial.jp/blog/case-studies/stellar-hollywood/](https://embedsocial.jp/blog/case-studies/stellar-hollywood/) スマートフォンサイトの様子（クリックでストーリーを拡大表示） ![](https://embedsocial.jp/hp/wp-content/uploads/2020/07/stellahollywood-1024x846.png) #### KISHISPO Kemari87様 関西最大級のサッカー＆フットサル専門店 KISHISPO Kemari87様が運営するオフィシャルオンラインストアへストーリー機能を導入いただいております。 サイトを訪れたユーザーに対してフレッシュな情報を届けることができる点、特にストーリー機能では店頭の臨場感を手軽に伝えることができる点を導入の決め手と語っていただきました。 [https://embedsocial.jp/blog/case-studies/kishispo/](https://embedsocial.jp/blog/case-studies/kishispo/) ![](https://embedsocial.jp/hp/wp-content/uploads/2020/07/kishispo-story-1024x875.png) ### ご利用料金 EmbedSocialは初期費用なし・月額7,150円〜 にてご利用をいただくことができます。 一番下のPROプラン（7,150円/月）では最大3ソースを設定することができ、インスタグラム1アカウントのストーリー収集は1ソースとしてカウントされるため、[フィード機能](https://embedsocial.jp/function/embedfeed/)や[レビュー機能](https://embedsocial.jp/function/embedreview/)などと併用してお使いいただくことも可能です。 SNSのさらなる活用に、ぜひいかがでしょうか？ \[include file='blog\_cta'\]