كيفية تضمين كتاب تفاعلي في موقعك عبر Iframe

لقد أنشأتَ كتابًا تفاعليًا مذهلًا من ملف PDF الخاص بك. والآن ماذا؟ مشاركة الرابط جيدة، لكن تضمين الكتاب التفاعلي مباشرة في موقعك يُبقي الزوار منخرطين دون توجيههم إلى مكان آخر. يبدو احترافيًا، ويُحمَّل بسرعة، ويمنحك تحكمًا كاملًا في التجربة.

في هذا الدرس، سنشرح بالضبط كيفية تضمين كتاب تفاعلي من FlipLink في أي موقع باستخدام iframe — إضافة إلى نصائح لجعله متجاوبًا وآمنًا ومتقنًا على كل الأجهزة.

لماذا التضمين بدلًا من مجرد مشاركة رابط؟

عندما تشارك رابط كتاب تفاعلي، يغادر الزوار موقعك لمشاهدته. وهذا يعني أنك تفقد التحكم في التجربة — قد لا يعودون. أما التضمين فيُبقي كل شيء على أرضك.

إليك لماذا التضمين هو الأفضل:

• معدلات ارتداد أقل — يبقى الزوار على صفحتك بدلًا من الانتقال بعيدًا
• تجربة علامة تجارية أفضل — يبدو الكتاب التفاعلي جزءًا أصيلًا من موقعك
• تفاعل أعلى — يميل القرّاء أكثر إلى التصفح حين يُحمَّل المحتوى داخل الصفحة
• فوائد لتحسين محركات البحث — يزداد الوقت المُمضى على الصفحة، مما يُشير إلى الجودة لمحركات البحث
• عرض احترافي — مثالي لكتالوجات المنتجات ومحافظ الأعمال والمواد التسويقية

إذا كنت تُضمِّن عارض PDF بدلًا من كتاب تفاعلي، فاطّلع على دليلنا حول كيفية تضمين ملف PDF في موقعك.

كيفية الحصول على كود تضمين Iframe من FlipLink

ينشئ FlipLink أكواد التضمين تلقائيًا — دون أي برمجة. إليك كيف تحصل على كودك:

1. سجّل الدخول إلى لوحة تحكم FlipLink على go.fliplink.me
2. افتح الكتاب التفاعلي الذي تريد تضمينه
3. اضغط زر المشاركة (Share) في شريط الأدوات
4. حدّد تبويب التضمين (Embed) في لوحة المشاركة
5. انسخ كود iframe الذي يظهر

يبدو الكود تقريبًا هكذا:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

هذا كل شيء. الصق هذا المقتطف في أي صفحة HTML، وسيظهر كتابك التفاعلي بتفاعلية تقليب الصفحات ثلاثية الأبعاد كاملة.

لمزيد من التفاصيل حول كل طرق توزيع كتابك التفاعلي، راجع ميزات المشاركة والتوزيع.

التضمين في منصات مختلفة

WordPress

يجعل WordPress تضمين iframe أمرًا سهلًا:

1. افتح الصفحة أو المنشور حيث تريد عرض الكتاب التفاعلي
2. أضف كتلة HTML مخصص (Custom HTML) (وليس كتلة فقرة)
3. الصق كود iframe الخاص بك
4. عاين الصفحة للتأكد من تحميلها بشكل صحيح

إذا كنت تستخدم المحرر الكلاسيكي، فانتقل إلى تبويب النص (Text) (وليس Visual) قبل اللصق. للحصول على شرح أعمق خاص بـ WordPress، اقرأ دليلنا حول كيفية تضمين كتاب تفاعلي في WordPress.

Wix

لا يدعم Wix كود HTML الخام في كتل النص العادية، لكن لديه حلًا بديلًا:

1. في محرر Wix، اضغط إضافة (Add) (+) في اللوحة اليسرى
2. اختر كود التضمين (Embed Code) > تضمين HTML (Embed HTML)
3. الصق كود iframe في صندوق HTML
4. غيّر حجم عنصر التضمين ليلائم تخطيطك
5. انشر موقعك

Squarespace

يدعم Squarespace كتل الكود أصلًا:

1. حرّر الصفحة حيث تريد الكتاب التفاعلي
2. أضف كتلة كود (Code Block) جديدة (من قائمة +)
3. الصق كود iframe
4. ألغِ تحديد "Display Source" إذا ظهر هذا الخيار
5. احفظ وعاين

مواقع HTML المخصصة

لأي موقع HTML ثابت، ما عليك سوى لصق كود iframe في المكان الذي تريد ظهور الكتاب التفاعلي فيه داخل ملف HTML. يعمل داخل حاويات <div>، أو أقسام المقالات، أو تخطيطات صفحات الهبوط — في أي مكان يقبل HTML.

نصائح للتضمين المتجاوب

يبدو iframe ذو العرض الثابت رائعًا على سطح المكتب لكنه يتعطل على الجوال. إليك كيف تجعل التضمين متجاوبًا ليتكيّف مع أي حجم شاشة.

تقنية حاوية نسبة العرض إلى الارتفاع

غلّف iframe في حاوية تحافظ على نسبة عرض إلى ارتفاع ثابتة:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

تُنشئ padding-bottom: 75% نسبة عرض إلى ارتفاع ٤:٣. اضبط هذه القيمة بناءً على أبعاد كتابك التفاعلي:

• ٤:٣ (أفقي) — padding-bottom: 75%
• ١٦:٩ (شاشة عريضة) — padding-bottom: 56.25%
• ٣:٤ (عمودي) — padding-bottom: 133%
• ١:١ (مربع) — padding-bottom: 100%

فحص سريع على الجوال

بعد التضمين، اختبر على هاتف حقيقي — وليس فقط الوضع المتجاوب في المتصفح. ينبغي أن يعمل التقريب باللمس وتقليب الصفحات بسلاسة. إذا بدا التضمين ضيقًا على الشاشات الصغيرة، ففكّر في زيادة الحد الأدنى للارتفاع إلى 400px أو 500px.

القائمة البيضاء للنطاقات لأغراض الأمان

إذا كان كتابك التفاعلي يحتوي على محتوى حسّاس — أدلة تسعير، تقارير داخلية، عروض للعملاء — فأنت على الأرجح لا تريد أن يُضمّنه أي شخص في مواقع عشوائية.

تتيح لك ميزة القائمة البيضاء للنطاقات في FlipLink تقييد المواقع التي يمكن لكود iframe التحميل فيها:

1. افتح إعدادات كتابك التفاعلي
2. انتقل إلى قسم الأمان (Security) أو التضمين (Embed)
3. أضف نطاقاتك المعتمدة (مثل yourcompany.com، blog.yourcompany.com)
4. احفظ التغييرات

الآن لن يُعرض الكتاب التفاعلي إلا عند تحميله من تلك النطاقات. إذا نسخ شخص ما كود iframe ولصقه في موقعه، فلن يُحمَّل — سيرى رسالة رفض وصول بدلًا من ذلك.

هذا مفيد بشكل خاص لكتالوجات المنتجات التي تُشارَك مع شركاء البيع بالتجزئة المحددين، أو المستندات الموجّهة للعملاء التي يجب ألا تكون متاحة للعامة.

بديل: تضمين صورة قابلة للنقر

ليس كل موقف يستدعي تضمين iframe كاملًا. أحيانًا تكون صورة معاينة قابلة للنقر أفضل — خصوصًا حين تريد مُشوّقًا خفيفًا يفتح الكتاب التفاعلي الكامل عند النقر.

ينشئ FlipLink تضمين صورة قابلة للنقر تلقائيًا. يبدو هكذا:

<a href="https://go.fliplink.me/view/your-flipbook-id" target="_blank">
  <img
    src="https://go.fliplink.me/thumbnail/your-flipbook-id.jpg"
    alt="View flipbook"
    style="max-width: 100%; cursor: pointer;"
  />
</a>

هذا الأسلوب رائع في:

• النشرات البريدية (حيث لا تعمل iframes)
• ودجات الشريط الجانبي ذات المساحة المحدودة
• منشورات المدونة حين تريد معاينة دون مقاطعة تدفق القراءة
• الصفحات التي تضم عدة كتب تفاعلية — اعرض الصور المصغّرة، ودع القرّاء يختارون أيها يفتحون

مقارنة خيارات التضمين

لست متأكدًا من الطريقة التي تناسب احتياجاتك؟ إليك مقارنة سريعة:

بالنسبة لمعظم المواقع، يمنح تضمين iframe أفضل تجربة للمستخدم. استخدم الصورة القابلة للنقر حين تكون المساحة ضيقة، أو حين تُضمِّن في بيئات لا تدعم iframes.

نصائح شائعة لاستكشاف الأخطاء وإصلاحها

تواجه مشكلات؟ إليك حلولًا سريعة لأكثر المشكلات شيوعًا:

• الكتاب التفاعلي لا يُحمَّل — تأكّد أن رابط التضمين صحيح وأن الكتاب التفاعلي منشور (ليس في وضع المسودة)
• حظر من المتصفح — تحظر بعض المتصفحات المحتوى المختلط. تأكّد أن موقعك يستخدم HTTPS إذا كان رابط التضمين HTTPS
• يبدو صغيرًا على سطح المكتب — اضبط width="100%" وزِد قيمة height، أو استخدم تقنية الحاوية المتجاوبة أعلاه
• مقطوع على الجوال — استخدم حاوية نسبة العرض إلى الارتفاع بدلًا من أبعاد البكسل الثابتة
• محظور على موقع آخر — إذا فعّلتَ القائمة البيضاء للنطاقات، فأضف النطاق الجديد إلى قائمتك المعتمدة

ابدأ بتضمين كتبك التفاعلية

تضمين كتاب تفاعلي في موقعك يستغرق أقل من دقيقة مع FlipLink. ارفع ملف PDF، التقط كود iframe، الصقه في موقعك — انتهيت.

سواء كنت تبني عرضًا للمنتجات، أو أرشيف مجلات رقمية، أو تقرير شركة تفاعليًا، فإن التضمين يُبقي جمهورك منخرطًا ومحتواك في الواجهة.

أنشئ حساب FlipLink مجاني وابدأ بتضمين كتب تفاعلية في موقعك اليوم. هل لديك محتوى جاهز بالفعل؟ اطّلع على خطط الأسعار — تبدأ من $١٢٩ فقط للوصول مدى الحياة إلى ١٠٠ منشور نشط.