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

إضافة كتاب تفاعلي إلى موقع Squarespace تحوّل محتوى PDF الثابت إلى تجربة جذابة لتقليب الصفحات لزوارك. سواء كنت تعرض كتالوج منتجات أو معرض أعمال أو كتيّب شركة، فإن تضمين كتاب تفاعلي من FlipLink يستغرق دقائق قليلة فقط بمجرد أن تعرف الطريقة الصحيحة.

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

ما تحتاجه قبل أن تبدأ

قبل تضمين كتاب تفاعلي، تأكد من جاهزية ما يلي:

• كتاب تفاعلي منشور على FlipLink — ارفع ملف PDF الخاص بك على go.fliplink.me وانشره. ستحتاج إلى كود التضمين أو رابط المشاركة من لوحة التحكم.
• خطة Squarespace Business أو أعلى — حقن الكود وكتل الكود المخصصة تتطلب على الأقل خطة Business. الخطط Personal والأساسية لا تدعم تضمين HTML المخصص أو إطارات iframe.
• الوصول إلى محرر موقع Squarespace — ستحرر الصفحات مباشرة في منشئ صفحات Squarespace.

إذا لم تكن قد أنشأت كتابك التفاعلي بعد، فاطّلع على دليلنا حول خيارات المشاركة والتوزيع لفهم جميع الطرق التي يمكنك من خلالها مشاركة كتابك التفاعلي بمجرد جاهزيته.

الخطوة ١: احصل على كود التضمين من 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>

احتفظ بهذا الكود في متناول يدك — ستلصقه في Squarespace في الخطوة التالية.

الخطوة ٢: أضف كتلة كود في Squarespace

يستخدم Squarespace محررًا قائمًا على الكتل، وكتلة الكود (Code Block) هي المكان الذي ستلصق فيه كود تضمين كتابك التفاعلي.

1. افتح الصفحة التي تريد أن يظهر فيها الكتاب التفاعلي.
2. اضغط تحرير (Edit) على الصفحة.
3. مرّر فوق القسم الذي تريد وضع الكتاب التفاعلي فيه واضغط نقطة الإدراج (السطر الذي يحوي أيقونة الزائد).
4. حدّد كود (Code) من خيارات الكتل. إذا لم تجدها، ابحث عن “Code” في منتقي الكتل.
5. الصق كود iframe الخاص بـ FlipLink داخل كتلة الكود.
6. ألغِ تحديد خيار “Display Source” — هذا حاسم. إذا ظل هذا الخيار مفعّلًا، سيعرض Squarespace كود HTML الخام كنصّ بدلًا من عرض الكتاب التفاعلي.
7. اضغط حفظ (Save) ثم اخرج من المحرر لمعاينة صفحتك.

من المفترض أن يظهر كتابك التفاعلي الآن مباشرة على الصفحة، مع رسوم تقليب الصفحات التفاعلية كاملة.

الخطوة ٣: اجعل الكتاب التفاعلي متجاوبًا

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

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

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

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

تُسمّى هذه التقنية طريقة “صندوق نسبة العرض إلى الارتفاع”. يملأ إطار iframe حاويته تمامًا، وتتكيّف الحاوية بسلاسة مع عرض الصفحة.

الخطوة ٤: اضبط إدراج النطاقات في القائمة البيضاء

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

1. في لوحة تحكم FlipLink، افتح إعدادات الكتاب التفاعلي.
2. انتقل إلى قسم Domain Whitelisting.
3. أضف نطاق Squarespace خاصتك (مثل www.yourdomain.com أو yourdomain.squarespace.com).
4. احفظ الإعدادات.

إدراج النطاقات في القائمة البيضاء اختياري، لكنه موصى به إذا كنت تريد منع الآخرين من تضمين كتابك التفاعلي على مواقع غير مصرّح بها. وهو يضمن ظهور محتواك فقط حيث تريد له أن يظهر.

استخدام Squarespace Code Injection (على مستوى الموقع كاملًا)

إذا أردت أن يظهر كتاب تفاعلي على كل صفحة — على سبيل المثال، في منطقة التذييل أو الترويسة — يمكنك استخدام ميزة حقن الكود (Code Injection) في Squarespace بدلًا من كتل كود فردية.

1. اذهب إلى Settings → Advanced → Code Injection.
2. الصق كود التضمين في حقل التذييل (Footer) (أو Header، بحسب موضع الظهور).
3. غلّفه في حاوية div مع تنسيق مناسب للتحكم في موضعه.
4. اضغط حفظ (Save).

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

أساليب بديلة

ليست كل حالة تستدعي تضمين iframe كامل. إليك بديلين أبسط يعملان على أي خطة من Squarespace، بما في ذلك Personal:

كتلة رابط مع صورة مصغّرة

بدلًا من تضمين الكتاب التفاعلي مباشرة، أضف رابطًا مرئيًا يفتح الكتاب التفاعلي في علامة تبويب جديدة:

1. التقط لقطة شاشة لصفحة غلاف كتابك التفاعلي.
2. أضف كتلة صورة (Image Block) إلى صفحة Squarespace مع لقطة الشاشة.
3. أضف رابطًا إلى الصورة يشير إلى رابط مشاركة FlipLink خاصتك.
4. اضبط الرابط ليفتح في نافذة جديدة.

يعمل هذا النهج على كل خطة Squarespace ويمنحك تحكمًا كاملًا في طريقة العرض البصرية. يضغط الزوار على صورة الغلاف ويحصلون على تجربة الكتاب التفاعلي الكاملة في علامة تبويب جديدة.

كتلة زر

لنهج أنظف بأسلوب الدعوة إلى إجراء (CTA):

1. أضف كتلة زر (Button Block) إلى صفحتك.
2. اضبط نص الزر على شيء مثل “اطّلع على كتالوجنا” أو “اقرأ الكتيّب”.
3. اربطه برابط مشاركة FlipLink خاصتك.
4. اضبطه ليفتح في علامة تبويب جديدة.

هذه أبسط طريقة وتعمل بشكل موثوق عبر جميع الخطط والأجهزة.

استكشاف المشكلات الشائعة وحلّها

لا يظهر الكتاب التفاعلي بعد الحفظ

تأكّد من أنك ألغيت تحديد “Display Source” في إعدادات كتلة الكود. عند تفعيل هذا الخيار، يعرض Squarespace الكود كنصّ عادي بدلًا من تنفيذه.

يُحجب التضمين أو يظهر إطار فارغ

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

الكتاب التفاعلي مقطوع على الجوّال

استخدم الغلاف المتجاوب الموضّح في الخطوة ٣. تضمن تقنية صندوق نسبة العرض إلى الارتفاع تكيّف إطار iframe بشكل صحيح. إذا ظللت ترى مشكلات، فحاول تقليل نسبة padding-bottom قليلًا لملاءمة نافذة عرض الجوّال بشكل أفضل.

يعرض Squarespace رسالة “Upgrade to use custom code”

كتل الكود وحقن الكود متاحة فقط على خطط Squarespace Business و Commerce Basic و Commerce Advanced. إذا كنت على خطة Personal، فاستخدم بدائل كتلة الرابط أو كتلة الزر الموصوفة أعلاه.

نصائح للحصول على أفضل تجربة

• اختر موضع الصفحة الصحيح. ضع كتابك التفاعلي في قسم بعرض كامل لتحقيق أقصى تأثير. تجنّب تضمينه في أشرطة جانبية ضيّقة حيث تبدو تجربة تقليب الصفحات مقيّدة.
• اضبط ارتفاعًا ذا معنى. إذا لم تكن تستخدم الغلاف المتجاوب، فاضبط ارتفاع iframe على ٦٠٠px على الأقل للحاسوب المكتبي. أي قيمة أقل تجعل القراءة غير مريحة.
• أضف سياقًا حول التضمين. ضمّن عنوانًا ووصفًا موجزًا فوق الكتاب التفاعلي حتى يفهم الزوار ما الذي ينظرون إليه قبل أن يبدؤوا بتقليب الصفحات.
• اختبر على أجهزة متعددة. عاين صفحتك على الحاسوب المكتبي والجهاز اللوحي والجوّال قبل النشر. تجعل معاينة الأجهزة المدمجة في Squarespace هذا الأمر سهلًا.

مصادر ذات صلة

إذا كنت تضمّن كتبًا تفاعلية على منصات أخرى، فقد تساعدك هذه الأدلة:

• كيفية تضمين PDF على أي موقع
• كيفية تضمين كتاب تفاعلي في WordPress
• كيفية تضمين كتاب تفاعلي باستخدام Iframe

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

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

أنشئ كتابك التفاعلي المجاني على FlipLink وابدأ بتضمينه على موقع Squarespace خاصتك اليوم. اطّلع على صفحة الأسعار لترى ما المضمّن في كل خطة.