ما هو كود التضمين؟ دليل لملفات PDF والكتب التفاعلية ومقاطع الفيديو

ما هو كود التضمين؟

كود التضمين هو مقتطف من HTML يعرض محتوى خارجياً — مقطع فيديو، ملف PDF، كتاب تفاعلي، خريطة، تغريدة — داخل صفحة الويب الخاصة بك. عندما يفتح القارئ صفحتك، يقوم المتصفح بجلب المحتوى الخارجي وعرضه ضمن السياق، وكأنه جزء من موقعك.

التقنية الأساسية الأكثر شيوعاً هي عنصر HTML <iframe>، الذي يحمّل صفحة ويب منفصلة داخل إطار مستطيل في صفحتك.

البنية الأساسية لكود التضمين

يبدو كود التضمين النموذجي كما يلي:

<iframe
  src="https://example.com/your-content"
  width="100%"
  height="600"
  allowfullscreen
  frameborder="0"
></iframe>

يتضمن كل كود تضمين أربعة أشياء:

• src — عنوان URL للمحتوى المراد تضمينه.
• width و height — أبعاد الإطار (بالبكسل أو النسبة المئوية).
• سمات الأذونات — allowfullscreen أو allow="autoplay" أو علامات sandbox التي تتيح للمحتوى المضمَّن استخدام ميزات معينة في المتصفح.
• تنسيق اختياري — سمات frameborder و style لتحسين المظهر البصري.

عندما يفتح القارئ صفحتك، يرى المتصفح وسم <iframe>، ويطلب عنوان URL الموجود في src، ويعرض الصفحة المُستجابة داخل الإطار.

من أين تأتي أكواد التضمين

كل منصة تدعم التضمين تنشئ كود التضمين الخاص بها. تنسخه من المنصة وتلصقه في موقعك:

• YouTube / Vimeo — زر المشاركة (Share) ← التضمين (Embed) ← انسخ كود iframe.
• Google Maps — المشاركة (Share) ← تضمين خريطة (Embed a map) ← انسخ iframe.
• Twitter / X — المنشور ← تضمين هذا المنشور (Embed this post) ← انسخ.
• FlipLink — كل منشور يُنشئ كود تضمين تلقائياً، أو استخدم أداة embed-pdf المجانية للتضمينات الفردية دون تسجيل.

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

كيف يختلف كود التضمين عن الرابط؟

الرابط يُرسل القارئ بعيداً عن صفحتك إلى المحتوى الخارجي. أما كود التضمين فيُبقيه في صفحتك بينما يعرض المحتوى الخارجي ضمن السياق.

• رابط: <a href="...">شاهد الفيديو</a> — انقر لمغادرة الصفحة.
• تضمين: <iframe src="..."> — يظهر المحتوى ضمن السياق، دون انتقال.

هذا الفرق مهم لمعدل الارتداد، وتفاعل القارئ، والتحليلات. التضمين يتيح لك قياس المشاهدات دون فقدان الزائر لصالح نطاق آخر.

تضمين PDF: أربع طرق

تطوّر تضمين PDF إلى ما هو أبعد من iframe الأساسي. الطرق الأربع، مرتبة من الأبسط إلى الأعقد:

١. وسم <embed> أو <object> الأصلي

<embed src="document.pdf" type="application/pdf" width="100%" height="600" />

يعمل في متصفحات سطح المكتب لكنه غير متّسق على الأجهزة المحمولة. يرى القرّاء عارض PDF الافتراضي للمتصفح، الذي يختلف حسب الجهاز ويفقد أي تفاعلية.

٢. iframe لعارض Google Docs

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600"></iframe>

مجاني، ويعمل على الأجهزة المحمولة، لكن مع تحكم محدود في مظهر العارض ودون تحليلات.

٣. عارض مخصص يعتمد على PDF.js

اشحن مكتبة PDF.js من Mozilla على موقعك وضمّن عارضاً مخصصاً. تحكم كامل في العلامة التجارية والسلوك، لكنه يتطلب عمل تطوير وصيانة مستمرة.

٤. iframe لمنصة كتب تفاعلية (مُوصى به للأعمال)

<iframe src="https://your-flipbook-url" width="100%" height="600" allowfullscreen></iframe>

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

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

إن width="640" height="360" الافتراضي يفشل على الأجهزة المحمولة. للتضمينات المتجاوبة، لُفّ iframe في حاوية تحافظ على نسبة العرض إلى الارتفاع:

<div style="position:relative; padding-bottom:141.4%; height:0;">
  <iframe
    src="..."
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

تحدد قيمة padding-bottom نسبة العرض إلى الارتفاع (141.4% = A4 عمودي؛ 56.25% = فيديو 16:9؛ 75% = 4:3).

الأمان: ما الذي تفعله سمة sandbox

يُشغَّل المحتوى المضمَّن في متصفح الزائر، فيمكنه تنفيذ JavaScript، وقراءة ملفات تعريف الارتباط لنطاقه الخاص، وحتى التنقل بالصفحة الأم. سمة sandbox تُقيّد ما يمكن للمحتوى المضمَّن فعله:

<iframe src="..." sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

العلامات الشائعة:

• allow-scripts — السماح بتشغيل JavaScript
• allow-forms — السماح بإرسال النماذج
• allow-same-origin — التعامل مع المحتوى كطرف أول (مطلوب لحالة تسجيل الدخول المخزّنة)
• allow-popups — السماح بروابط target="_blank"

بالنسبة لتضمينات PDF، يكون الوضع الافتراضي (بدون sandbox) ملائماً عادةً ما لم تكن تضمّن محتوى مرفوعاً من مستخدمين غير موثوقين.

أخطاء شائعة في أكواد التضمين

• عرض ثابت بالبكسل. استخدام width="600" يفشل على شاشات الأجهزة المحمولة الضيقة. استخدم width="100%" أو الغلاف المتجاوب.
• غياب allowfullscreen. لا يستطيع المستخدمون توسيع عارضات الفيديو أو الكتب التفاعلية إلى وضع ملء الشاشة.
• محرّرات الصفحات تُزيل iframes. بعض محرّرات CMS (كتلة التضمين في Squarespace، WordPress دون كتلة HTML مخصصة) تُزيل وسوم iframe. الصق دائماً أكواد التضمين في كتلة "Code" أو "Custom HTML".
• أخطاء cross-origin في الكونسول. بعض التضمينات تحتاج إلى رؤوس CORS محددة من المصدر؛ إذا بدا التضمين معطّلاً، تحقّق من كونسول المتصفح.
• معاينة معطّلة في محرّر الصفحة. كثير من محرّرات CMS لا تعرض iframes في وضع التحرير — تحقّق دائماً من الصفحة المنشورة، لا من المعاينة.

الأسئلة الشائعة

هل iframe هو نفسه كود التضمين؟

iframe هو نوع واحد من أكواد التضمين — الأكثر شيوعاً. يمكن لأكواد التضمين أيضاً استخدام <embed> أو <object> أو <video> أو أدوات JavaScript خاصة بالمنصات. بالنسبة لملفات PDF والكتب التفاعلية، iframes هي المعيار.

هل تضمين PDF يُبطئ موقعي؟

يُحمّل iframe ملف PDF عند الطلب، فلا يؤثر على أداء الصفحة إلا إذا مرّر المستخدم إليه. استخدم loading="lazy" على iframe لتأجيل التحميل حتى يقترب التضمين من نطاق الرؤية.

هل يمكنني تخصيص مظهر المحتوى المضمَّن؟

يمكنك التحكم في الإطار الخارجي (الحجم، الحدود، الموضع) باستخدام CSS على iframe. أما مظهر المحتوى الداخلي فيعتمد على المنصة التي تُولّد كود التضمين. يتيح لك FlipLink تطبيق ألوان العلامة التجارية وتنسيق مخصص على العارض المضمَّن.

هل يعمل كود التضمين على كل منشئ مواقع؟

أي موقع يدعم لصق HTML خام (WordPress Custom HTML، Wix HTML iframe، Squarespace Code Block، Webflow Embed، Shopify Custom Liquid، Notion /embed) يقبل أكواد تضمين iframe. لدى بعض المنشئين قيود إضافية خاصة بالمنصة — راجع دليل التضمين لكل منصة لمعرفة التفاصيل.

كيف أحصل على كود تضمين لملف PDF الخاص بي؟

استخدم أداة embed-pdf المجانية: ارفع ملف PDF، واحصل على كود تضمين iframe في ثوانٍ. لا حاجة للتسجيل للتضمينات الفردية.

قراءات ذات صلة

• كيفية تضمين PDF في موقع ويب: مقارنة بين ٥ طرق
• كيفية إدراج PDF في موقع ويب أو مستند أو بريد إلكتروني
• كيفية تضمين كتاب تفاعلي في Squarespace
• كيفية تضمين كتاب تفاعلي في Shopify
• ما هو PDF التفاعلي؟