---
title: "【アップデート情報】iframeタグを使って埋め込みができるようになりました！"
date: 2021-07-16
modified: 2024-12-11
canonical_id: embed-with-iframe
locale_slug: embed-with-iframe
author: "esbasicmath"
category:
  - blog
  - product-updates
summary: "EmbedSocialのウィジェットがiframe経由で埋め込みができるようになりました！これによりJavaScriptでの埋め込みに対応していないCMS等でも埋め込みを行う事が可能となり、またその他にも埋め込みコードの新しいオプションが追加され様々な掲出方法を実現することができるようになりましたのでご紹介いたします。"
draft: false
seo:
  title: "【アップデート情報】iframeタグを使って埋め込みができるようになりました！"
  description: "EmbedSocialのウィジェットがiframe経由で埋め込みができるようになりました！これによりJavaScriptでの埋め込みに対応していないCMS等でも埋め込みを行う事が可能となり、またその他にも埋め込みコードの新しいオプションが追加され様々な掲出方法を実現することができるようになりましたのでご紹介いたします。"
  og_image: "https://embedsocial.jp/hp/wp-content/uploads/2021/07/jonny-caspari-KuudDjBHIlA-unsplash-scaled.jpg"
  og_image_width: 2560
  og_image_height: 1707
  structured_data: article
---

2021年7月のアップデートにより、EmbedSocial[フィード機能](https://embedsocial.jp/function/embedfeed/)においてウィジェットをiframe経由で埋め込みできるようになりました！これによりJavaScriptでの埋め込みに対応していないCMS等でも埋め込みを行う事が可能となり、また、その他にも埋め込みコードの新しいオプションが追加され様々な掲出方法を実現することができるようになりましたのでご紹介いたします。

## 目次

1.  [iframeタグを使用してEmbedSocialウィジェットを埋め込む方法](#iframe)
2.  [2021年7月のアップデートにより追加された、新たな埋め込むオプション](#others)

## iframeタグを使用してEmbedSocialウィジェットを埋め込む方法

iframeタグを使用して埋め込みを行うことで、縦横の表示幅を固定した状態でウィジェットを表示させることができるようになります。ウィジェットに多くの画像を表示させつつ、限りられたスペースで掲出を行いたい場合などにとても有効です。

iframeタグを通して埋め込みを行う場合には、ウィジェットの編集画面から コード＞その他オプション を選択します。ポップアップが表示されいくつかの埋め込みオプションの中から、一番上の「縦横のサイズを固定する」に該当するコードを取得し埋め込みを行います。

![](https://embedsocial.jp/hp/wp-content/uploads/2021/07/other-embedding-options.jpg)

![](https://embedsocial.jp/hp/wp-content/uploads/2021/07/embed-with-iframe.jpg)

埋め込み方法の詳細はこちら：[iframeタグを使用してInstagram投稿を埋め込む方法](https://embedsocial.jp/knowledge-base/list/embed-iframe-widget/)

### iframeタグを使用した埋め込み例

また従来の埋め込みコードの選択肢はJavaScriptのみであったため、JavaScriptの埋め込みができない一部のCMSではEmbedSocialウィジェットを埋め込んでSNSの投稿・口コミをWEBサイトへと連携させることができませんでした。

今回のアップデートによって、国内でも人気の高いWEBデザインツール「STUDIO」などより幅広い選択肢のシステムに対して連携を行うことができるようになりました。

## 2021年7月のアップデートにより追加された、新たな埋め込むオプション

また今回のアップデートでは、iframeタグの他に新たに2つの埋め込みオプションが追加されました。カスタムCSSの追加なく柔軟な掲出ができるようになり、調整にかかる時間を軽減しより早い実装が実装が可能となります。

### フルレスポンシブで埋め込みを行う方法

一つ目の新しい選択肢は、縦幅・横幅ともにフルレスポンシブで掲出する方法です。

従来のJavaScriptコードでは、横幅が一定の大きさを超えた時点でウィジェットの横幅は固定されましたが、こちらのコードを活用することでブラウザまたはサイト内要素の最大幅までウィジェットの表示領域を拡張させることができます。

![](https://embedsocial.jp/hp/wp-content/uploads/2021/07/width-height-auto.jpg)

![](https://embedsocial.jp/hp/wp-content/uploads/2021/07/widget-browser-max.jpg)

### 縦幅を自動調整、横幅を指定して埋め込みを行う方法

２つ目の新しい選択肢は、横幅を固定して埋め込みを行う方法です。

従来のJavaScriptコードでは難しかった横幅のサイズ指定が簡単にできるようになり、PC画面でもスマホのように各投稿を大きく強調する形で掲出することができるようになりました。

新しく追加された埋め込みオプションはいかがでしたでしょうか？

EmbedSocialでは常にアップデートが実施され、ユーザーの皆様にとってより使いやすく・効果の高いツールを目指して改良が行われています。新たな機能のご要望やSNSや口コミを活用した新たな実装のご希望などございます際には、お気軽にご相談くださいませ。

\[include file='blog\_cta'\]