埋め込みコード
技術&インフラ外部Webサイトにフリップブックを表示するためのHTMLスニペット(通常iframeタグ)です。
定義
埋め込みコードとは、ウェブページのソースコードに貼り付けて外部コンテンツをインラインで表示するHTMLスニペットです。通常は[iframe](/glossary/iframe)タグの形式です。デジタル出版では、埋め込みコードによってフリップブックやドキュメントビューアーをホストページ内に直接読み込み、読者がページを離れることなくパブリケーションを操作できます。コンテンツはパブリッシングプラットフォームのサーバーから配信されるため、表示先サイトでのファイルホスティングは不要です。元のパブリケーションが更新されると、埋め込まれたすべてのインスタンスに自動的に変更が反映されます。
重要な理由
埋め込みコードは、パブリケーションとウェブプレゼンスをつなぐ役割を果たします。埋め込みコードがなければ、フリップブックを共有する唯一の方法はダイレクトリンクとなり、読者はサイトを離れなければなりません。埋め込みにより、訪問者は自社ドメインにとどまり、ページ滞在時間などの行動指標が改善され、シームレスな閲覧体験が実現します。また、コンテンツ管理が一元化されます。PDFを一度更新するだけで、すべてのサイトのすべての埋め込みが最新バージョンを表示します。これはカタログ、価格表、メニューなど頻繁に変更されるコンテンツに特に有効です。
FlipLinkでの使い方
FlipLinkは、公開されたすべてのフリップブックとドキュメントに対してすぐに使える埋め込みコードを生成します。[共有と配信](/features/sharing-and-distribution)パネルからiframeスニペットをコピーし、HTMLを受け入れる任意のウェブサイト、ブログ、CMSに貼り付けます。埋め込みはデフォルトで[レスポンシブ](/glossary/responsive-embed)で、デスクトップとモバイルのコンテナ幅に自動適応します。FlipLinkは[クリック可能な画像埋め込み](/features/clickable-image-embed)オプションも提供しており、フルフリップブックにリンクする静的サムネイルを表示します。これはメールニュースレターやiframeを制限するプラットフォームに便利です。[ドメインホワイトリスト](/glossary/domain-whitelisting)を使用してコンテンツの表示先を承認済みドメインのみに制限できます。
技術的な詳細
埋め込みコードはいくつかの重要な要素で構成されています:
- **iframeタグ**:外部コンテンツへのウィンドウを作成する中心的な要素です。パブリケーションURLを指す`src`属性と、サイズ設定用の`width`・`height`属性を含みます。
- **レスポンシブラッパー**:パーセンテージベースのサイズ設定を持つ囲み`div`により、iframeがページレイアウトに合わせてスケーリングされます。FlipLinkの埋め込みコードにはこのラッパーがデフォルトで含まれているため、独自のCSSを書く必要はありません。
- **allow属性**:最新のブラウザはフルスクリーンなどの機能に明示的な`allow`属性を必要とします。FlipLinkの埋め込みコードにはこれらが含まれており、すべてのインタラクティブ機能がすぐに動作します。
- **フォールバックコンテンツ**:iframeタグ内のテキストリンクが、iframeをサポートしないまれなブラウザやメールクライアント用のフォールバックとして機能します。
埋め込みは非同期で読み込まれるため、ホストページのレンダリングをブロックしません。フリップブックビューアーはiframeがビューポート内に表示されてから初期化されるため、パフォーマンスへの影響は最小限です。
よくある質問
**埋め込みコードとは何ですか?**
埋め込みコードは、別のプラットフォームでホストされているコンテンツを表示するためにウェブサイトに貼り付けるHTMLスニペットです。フリップブックの場合、通常はインタラクティブなパブリケーションビューアーをページ上に直接読み込むiframeを作成します。
**フリップブックはどのウェブサイトにも埋め込めますか?**
はい、カスタムHTMLを許可するウェブサイトであれば可能です。WordPress、Shopify、Squarespace、Wix(HTML埋め込みブロック経由)、その他カスタム構築サイトが含まれます。一部のメールクライアントはiframeをサポートしていません。その場合は、FlipLinkのクリック可能な画像埋め込みを代わりに使用してください。
**パブリケーションを変更すると埋め込みコードは自動的に更新されますか?**
はい。埋め込みコードはFlipLinkのサーバー上のパブリケーションURLを参照しているため、PDFの差し替え、設定の変更、CTAボタンの更新など、すべての変更がサイト上の埋め込みコードに触れることなく、埋め込まれたすべてのインスタンスに即座に反映されます。
セットアップチェックリスト
1. FlipLinkでフリップブックまたはドキュメントを公開する
2. 共有パネルを開き、埋め込みコードをコピーする
3. ウェブサイトのCMSまたはページエディタで、カスタムHTMLブロックを追加する
4. HTMLブロックに埋め込みコードを貼り付ける
5. ページをプレビューして、デスクトップとモバイルの両方でフリップブックが正しく表示されることを確認する
6. フリップブックの埋め込み先を制限したい場合は、パブリケーション設定で[ドメインホワイトリスト](/glossary/domain-whitelisting)を設定する
7. 埋め込みバージョンでインタラクティブ機能(ページめくり、CTAボタン、[リードキャプチャ](/glossary/lead-capture))をテストして、期待通りに動作することを確認する
関連用語
他の言語で利用可能
PDFを
もっと活用しませんか?
FlipLinkを活用して、PDFから魅力的でインタラクティブなコンテンツを作成している多くの企業に加わりませんか。クレジットカード不要で無料スタートできます。