目次
目次
Framerで外部コンテンツを読み込む
Framerで外部コンテンツを読み込みたい場合は、Embedコンポーネントを使用すれば大丈夫です。iFrame / ウィジェット / スクリプトベースのサービスのほとんどがこの方法で接続され、使用方法も比較的簡単なので、ぜひ試してみてください。
URLを埋め込む
他のサイトやサービスページをiFrame形式でそのまま挿入したい場合は、次の手順を実行してください。
挿入メニューに移動してください。検索バーに「Embed」を入力してください。
Embedコンポーネントをキャンバスにドラッグしてください。
目的のURLをコンポーネントに入力すれば完了です。
注意: 一部のウェブサイトは、HTTPヘッダー設定によりiFrame挿入をブロックすることがあります。
スクリプトを埋め込む
スクリプトにiframeを含める必要があるサービスの場合、次の方法を使用してください。
Embedコンポーネントをキャンバスに追加してください。
右側のパネルで
HTMLボタンを選択してください。HTMLセクションに
<script>...</script>コードを貼り付ければ大丈夫です。
よくある質問(FAQ)
Q. スクリプトを埋め込んでも正常に表示されない場合がありますか？
はい。一部のサービスでは、スクリプト以外にも手動で追加コードを入力しないと正常に表示されない場合があります。必要なコードがあるか確認した後、スクリプトを埋め込んでみてください。
Q. Embedコンポーネントをレスポンシブにできますか？
はい。Embedコンポーネントも基本的にひとつのFrameレイヤーなので、FillやRelativeなどのプロパティを使用してレスポンシブな実装が可能です。
Q. 同じページに複数の外部ウィジェットを同時に入れてもパフォーマンスは保たれますか？
いいえ。機能的には複数の外部ウィジェットを入れることは可能です。しかし、一つのページにウィジェットを多く配置しすぎるとページが重くなり、パフォーマンスが低下する可能性があるため、お勧めしません。
まとめ
全ての設定を完了しても正常に表示されない場合は、Framerのコンタクトページを通じてサポートチームにお問い合わせいただければ、サポートを受けられます。
本記事は、Framer公式ブログの「How to add an iframe or embed script」を翻訳・アレンジしたコンテンツです。
