كيفية إضافة الألعاب إلى موقعك الإلكتروني

معظم المواقع الإلكترونية مصممة للقراءة والتصفح السريع والنقر. هذا مفيد، لكنه قد يبدو جامداً. إضافة لعبة متصفح بسيطة تمنح الزوار شيئاً يفعلونه دون مطالبتهم بتنزيل تطبيق أو إنشاء حساب لاعب أو مغادرة الصفحة.

أسهل طريقة لإضافة ألعاب إلى موقعك الإلكتروني هي عادةً استخدام لعبة iframe أو embed أو أداة ألعاب. ما عليك سوى وضع جزء صغير من كود HTML على الصفحة، وستعمل اللعبة داخل إطار مستقل. تم تصميم Games I Know وEmbed خصيصًا لهذا الغرض: ألعاب متصفح خفيفة الوزن تتناسب مع المدونات، ومواقع ووردبريس، ومواقع الشركات الصغيرة، وصفحات المجتمعات، والمدارس، والمطاعم، ومشاريع المطورين.

إجابة سريعة: كيف تضيف الألعاب إلى موقع ويب؟

لإضافة ألعاب إلى موقعك الإلكتروني، اختر لعبة متصفح، وانسخ رمز iframe الخاص بالمزود أو رمز أداة اللعبة، والصقه في نظام إدارة المحتوى أو تطبيقك، واختبر embed على الهاتف المحمول، وانشر الصفحة مع نص توضيحي حول اللعبة. مع Games I Know وEmbed، يستخدم iframe عنوان URL مخصصًا /embed/{gameSlug}/frame/ ومعرّف مستأجر من إعدادات شريكك.

1. اختر لعبة تناسب الصفحة والجمهور.
2. استخدم عنوان URL الخاص بالإطار iframe المقدم من منصة embed.
3. قم بلصق iframe في WordPress، أو أداة إنشاء مواقع الويب، أو مكون React/Next.js الخاص بك.
4. قم بتعيين ارتفاع ثابت، ووضوح سمة العنوان، والتحميل الكسول، ودعم وضع ملء الشاشة.
5. قم بمعاينة الصفحة على الهاتف المحمول وجهاز الكمبيوتر قبل النشر.

ما هي أداة الألعاب لموقع الويب؟

أداة لعبة الموقع الإلكتروني هي لعبة متصفح صغيرة قابلة للعب، تُوضع داخل صفحة ويب عادية. في معظم التطبيقات العملية، تكون الأداة عبارة عن iframe: حيث يستضيفها مزود الخدمة، بينما يتحكم موقعك في محتوى المقالة أو الصفحة المقصودة أو صفحة الموارد أو صفحة الأعمال المحيطة بها.

لماذا تضيف الألعاب إلى موقعك الإلكتروني؟

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

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

أفضل الطرق لإضافة الألعاب إلى موقع ويب

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

استخدم لعبة iframe embed

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

استخدم أداة اللعبة

عادةً ما تكون أداة اللعبة عبارة عن عنصر iframe بالإضافة إلى إعدادات افتراضية مفيدة: حجم مُوصى به، وعنوان واضح، ودعم وضع ملء الشاشة، وأحيانًا رسائل أحداث يمكن لصفحتك الرئيسية استقبالها. هذا هو النموذج العملي وراء GamesIKnow Embed.

أضف ألعاب HTML5

تُوصف ألعاب المتصفح الحديثة غالبًا بأنها ألعاب HTML5 لأنها تعمل في المتصفح على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة والمكتبية. يمكنك استضافة لعبتك الخاصة بتقنية HTML5، لكن معظم أصحاب المواقع الإلكترونية يفضلون منصة GIK لتجنب عناء صيانة محرك اللعبة ومواردها وتصميمها على الأجهزة المحمولة وإصلاح الأخطاء بأنفسهم.

أضف الألعاب إلى ووردبريس باستخدام كتلة HTML مخصصة

في ووردبريس، أسهل طريقة هي استخدام كتلة HTML مخصصة. الصق مقتطف iframe، ثم عاين الصفحة، وعدّل النص والتنسيق المحيطين به. إذا كان إعداد ووردبريس لديك يحذف وسوم iframe، فقد تحتاج إلى مدير النظام أو إضافة allowed-_GIK_TERM_0__.

أضف الألعاب في React أو Next.js

في React أو Next.js، قم بعرض iframe كمكون مع الحفاظ على ثبات مصدر الإطار. إذا كنت ترغب في الحصول على تحليلات أو أحداث اللعبة، فاستمع إلى أحداث postMessage الموثوقة من إطار Games I Know في مكون العميل.

قم ببناء لعبة مخصصة من الصفر

قد يكون تصميم لعبة مخصصة خيارًا مناسبًا عندما تكون اللعبة نفسها هي منتجك. أما بالنسبة للمدونات العادية، أو مواقع الوكالات، أو صفحات المدارس، أو صفحات الشركات المحلية، فإن استخدام منصة GIK عادةً ما يكون أسرع وأسهل في الصيانة.

الخيار الأسهل: استخدم GamesIKnow Embed

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

تتضمن الألعاب المتاحة حاليًا على منصة GIK TERM 4 ألعابًا مثل GIK TERM 1 وGIK TERM 2 وGIK TERM 3 وGIK TERM 0، بالإضافة إلى سودوكو وبحث الكلمات. وهي مناسبة تمامًا للمدونات والمدارس والمطاعم ومواقع التواصل الاجتماعي وصفحات الشركات الصغيرة والبوابات الداخلية ومواقع المطورين التي تحتاج إلى أداة بسيطة لألعاب المتصفح.

مثال على رمز embed

يستخدم Games I Know مسار إطار مخصصًا iframe لموقع الويب embed. الصفحة العامة /embed/{gameSlug}/ هي الصفحة الرئيسية التي يمكن للمستخدمين قراءتها. يجب أن يستخدم iframe src المسار /embed/{gameSlug}/frame/ مع مُعرّف المستأجر الخاص بك من لوحة تحكم الشريك.

<iframe
  src="https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID"
  title="Tic Tac Toe by Games I Know"
  width="100%"
  height="640"
  style="border:0;border-radius:16px;max-width:420px;display:block;margin:0 auto;"
  loading="lazy"
  allow="fullscreen"
  allowfullscreen
></iframe>

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

كيفية إضافة الألعاب إلى ووردبريس

1. افتح صفحة أو منشور ووردبريس حيث تريد أن تظهر اللعبة.
2. أضف كتلة HTML مخصصة بالقرب من القسم الذي يجب أن تُلعب فيه اللعبة.
3. الصق مقتطف Games I Know iframe من لوحة التحكم embed.
4. قم بمعاينة النص على سطح المكتب والهاتف المحمول، ثم اضبط نص القسم المحيط إذا لزم الأمر.
5. انشر الصفحة عندما يبدو حجم اللعبة وعنوانها وتصميمها مناسباً.

كيفية إضافة الألعاب في React

بالنسبة لـ React، اجعل مكون iframe بسيطًا. مرر عنوان URL ثابتًا للإطار، وحدد عنوانًا واضحًا لسهولة الوصول، واحجز ارتفاعًا مناسبًا، وأضف معالجة postMessage فقط إذا كان تطبيقك يحتاج إلى أحداث embed.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export function GameEmbed() {
  return (
    <iframe
      src={gameSrc}
      title="Tic Tac Toe by Games I Know"
      width="100%"
      height={640}
      style={{
        border: 0,
        borderRadius: 16,
        maxWidth: 420,
        display: "block",
        margin: "0 auto",
      }}
      loading="lazy"
      allow="fullscreen"
      allowFullScreen
    />
  );
}

كيفية إضافة الألعاب في Next.js

في Next.js، اجعل الصفحة قابلة للفهرسة من خلال عناوين مفيدة، ونصوص، ومحتوى الأسئلة الشائعة حول اللعبة. يمكن عرض iframe في مكون الخادم، بينما يجب أن يكون أي مستمع postMessage في مكون العميل.

const gameSrc = "https://gamesiknow.com/embed/tic-tac-toe/frame/?tenantId=YOUR_TENANT_ID";

export default function GamesPage() {
  return (
    <main>
      <h1>Play Tic Tac Toe</h1>
      <iframe
        src={gameSrc}
        title="Tic Tac Toe by Games I Know"
        width="100%"
        height={640}
        style={{
          border: 0,
          borderRadius: 16,
          maxWidth: 420,
          display: "block",
          margin: "0 auto",
        }}
        loading="lazy"
        allow="fullscreen"
        allowFullScreen
      />
    </main>
  );
}

أفضل المواقع لإضافة الألعاب إلى موقع الويب

• منشورات المدونة التي تتناسب فيها استراحة تفاعلية سريعة مع الموضوع.
• صفحات الموارد التي تجذب بالفعل زوارًا متكررين.
• صفحات المجتمع، وصفحات النوادي، ومواقع المجموعات المحلية.
• صفحات أنشطة المدرسة ومراكز موارد الفصول الدراسية.
• صفحات انتظار المطاعم، وصفحات رموز الاستجابة السريعة للقوائم، وصفحات الفعاليات.
• صفحات الهبوط التي يدعم فيها تفاعل بسيط العرض.
• 404 صفحة أو صفحات مرحة حيث يُتوقع المرح.

أفضل ألعاب Games I Know للبدء بها

نصائح قبل إضافة الألعاب

• اجعل اللعبة ذات صلة بالصفحة بدلاً من إقحامها في كل مقال.
• اختبر iframe على الهاتف المحمول قبل النشر.
• لا تفرط في تحميل صفحة واحدة بعدد كبير جدًا من embeds الحية.
• استخدم التحميل الكسول لمقاطع iframe التي تظهر أسفل منفذ العرض الأول.
• حافظ على ارتفاع iframe معقولاً حتى يسهل لعب اللعبة دون قفزات غير مريحة بين الصفحات.
• استخدم سمة عنوان واضحة حتى تتمكن التقنيات المساعدة من وصف اللعبة embedded.
• تتبع النقرات أو عمليات البدء أو الجولات المكتملة باستخدام التحليلات إذا كانت بيانات التفاعل تهمك.

قائمة مراجعة سريعة

1. اختر اللعبة وتأكد من أنها تناسب الغرض من الصفحة.
2. استخدم عنوان URL المخصص للإطار Games I Know داخل iframe.
3. أضف محتوىً مفيداً حول اللعبة حتى تحافظ الصفحة على قيمتها في تحسين محركات البحث.
4. استعرض الصفحة على الهاتف والكمبيوتر اللوحي والكمبيوتر المكتبي.
5. انشر الأداة، ثم راقب ما إذا كان الزوار يستخدمونها بالفعل.