ウェブサイトにフリップブックを埋め込む方法

ウェブサイトにフリップブックを埋め込む方法

フリップブックのリンクを共有するのが最もシンプルな配信方法ですが、ウェブサイトにフリップブックを直接埋め込むことで、読者の体験をより細かくコントロールできます。埋め込まれたフリップブックはページ内に存在し、あなたのブランディングとコンテンツに囲まれ、訪問者にシームレスな体験を提供します。

このガイドでは、簡単なiframeから高度なJavaScript統合まで、すべての埋め込みオプションをご紹介します。

オプション1：クイック埋め込み（iframe）

フリップブックを埋め込む最も手軽な方法はiframeです。ZenFlipは公開されたすべてのフリップブックに対してすぐに使える埋め込みコードを提供します。

埋め込みコードの取得方法

1. ZenFlipダッシュボードでパブリケーションを開きます

2. 右上の共有をクリックします

3. 埋め込みタブを選択します

4. 埋め込みコードをコピーします

コードは以下のようになります：

`html <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" frameborder="0" allowfullscreen title="Your Publication Title"

`

これをHTMLページ、CMSエディタ、またはカスタムHTMLに対応するウェブサイトビルダーに貼り付けます。

レスポンシブにする

固定高さはシンプルなユースケースに適していますが、レスポンシブな埋め込みは読者の画面に適応します。パーセンテージベースのアスペクト比を持つコンテナでiframeを囲みます：

`html <div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;"> <iframe src="https://zenflip.io/view/your-publication-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

padding-bottom: 75%は4:3のアスペクト比を作成します。16:9の場合は56.25%、正方形の場合は100%に調整してください。

オプション2：JavaScriptウィジェット

より細かいコントロールが必要な場合は、ZenFlip JavaScriptの埋め込みウィジェットを使用します。この方法では、カスタマイズオプションとイベントコールバックにアクセスできます。

基本セットアップ

ZenFlipの埋め込みスクリプトをページに追加します：

`html <div id="zenflip-embed"></div> <script src="https://zenflip.io/embed.js"></script> <script> ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', }); </script> `

設定オプション

embed関数は以下のオプションを受け入れます：

イベントのリスニング

JavaScriptウィジェットは、ページ上でアクションをトリガーするために使用できるイベントを発火します：

`javascript ZenFlip.embed({ target: '#zenflip-embed', publication: 'your-publication-id', onPageChange: function(page) { console.log('Reader is on page', page); }, onReady: function() { console.log('Flipbook loaded'); }, }); `

これは、カスタムアナリティクスイベントの追跡、特定のページに合わせたコンテキストコンテンツの表示、読者がパブリケーションの特定のポイントに到達した際のアニメーションのトリガーに役立ちます。

プラットフォーム別ガイド

WordPress

1. WordPressでページを作成または編集します

2. カスタムHTMLブロックを追加します

3. ZenFlipの埋め込みコード（iframeまたはJavaScript）を貼り付けます

4. プレビューして公開します

WordPressテーマがiframeを制限している場合は、JavaScript埋め込み方式を使用してください。

Webflow

1. WebflowデザイナーでページにEmbed要素をドラッグします

2. iframeコードを貼り付けます

3. Webflowレイアウトパネルで要素サイズを調整します

4. サイトを公開します

Shopify

1. フリップブックを配置したいページまたは製品に移動します

2. HTMLエディタビューに切り替えます

3. 埋め込みコードを貼り付けます

4. 保存します

Shopifyの製品ページでは、標準的な製品写真の横に製品カタログをフリップブックとして埋め込むことを検討してください。顧客により豊かなブラウジング体験を提供します。

React / Next.js

Reactアプリケーションでは、useEffectフック内でJavaScriptウィジェットを使用します：

`jsx import { useEffect, useRef } from 'react';

export default function FlipbookEmbed({ publicationId }) { const containerRef = useRef(null);

useEffect(() => { const script = document.createElement('script'); script.src = 'https://zenflip.io/embed.js'; script.onload = () => { window.ZenFlip.embed({ target: containerRef.current, publication: publicationId, }); }; document.body.appendChild(script); return () => document.body.removeChild(script); }, [publicationId]);

return <div ref={containerRef} style={{ height: 600 }} />; } `

埋め込みのスタイリング

フリップブックビューアはコンテナからいくつかのスタイルを継承します。以下をコントロールできます：

• 角丸： iframeまたはコンテナにborder-radiusを追加して角を丸くします

• ボックスシャドウ： 微妙なシャドウにより、フリップブックが周囲のページから際立ちます

• 最大幅： コンテナにmax-widthを設定して、大きな画面でフリップブックが広がりすぎるのを防ぎます

`html <div style="max-width: 960px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.15);"> <iframe src="https://zenflip.io/view/your-publication-id" width="100%" height="600" style="border: none; display: block;" allowfullscreen title="Your Publication Title" ></iframe> </div> `

パフォーマンスに関する考慮事項

埋め込まれたフリップブックは非同期で読み込まれ、ページのレンダリングをブロックしません。ただし、以下の点に留意してください：

• 遅延読み込み： フリップブックがファーストビューの下にある場合、iframeにloading="lazy"を追加して、読者がスクロールした時にのみ読み込まれるようにします

• 1ページに1つの埋め込み： 同じページに複数のフリップブックを埋め込むことはサポートされていますが、それぞれがリソースを消費します。複数のパブリケーションをリストするページでは、専用ページへのリンクを検討してください

• モバイルの帯域幅： ビューアは読者のデバイスに基づいて最適化されたアセットを読み込みます。モバイル接続では、読み込み時間を短縮するために小さいビューポートサイズに対して低解像度のページ画像が配信されます

アナリティクスと埋め込みフリップブック

埋め込まれたフリップブックは、直接表示されたものと同様にアナリティクスを追跡します。ビュー、読了深度、ページエンゲージメント、リードキャプチャはすべて、読者がパブリケーションにアクセスする方法に関係なく同じように動作します。参照ドメインがアナリティクスに記録されるため、ウェブサイトのどのページが最もフリップブックのエンゲージメントを促進しているかを確認できます。