ما هي أداة الحاسبة (Widget)؟
أداة الحاسبة هي نسخة صغيرة ومستقلة من حاسبة كاملة من Calculate.Studio، تعمل داخل صفحتك أنت. من الناحية التقنية هي عنصر iframe -- عنصر HTML يُضمّن صفحة داخل صفحة أخرى -- يشير إلى نسخة تضمين خفيفة من الحاسبة، إضافة إلى سطر ائتمان قصير أسفلها. وعنصر iframe عنصر HTML قياسي مدعوم في كل متصفح حديث، فلا حاجة إلى تثبيت أي شيء ولا خطر من أي تعارض مع كود موقعك.
الأداة هي الحاسبة نفسها التي تعمل على Calculate.Studio: المعادلات المُختبرة نفسها، والنتائج الفورية على جهاز الزائر نفسها، وبالنسبة لأدوات الصحة والمال، إخلاء المسؤولية نفسه أيضًا. يكتب زوّار موقعك أرقامهم ويرون النتائج فورًا دون مغادرة صفحتك. ولأن الحساب يجري في متصفح الزائر نفسه لا على خادم، تبقى الأداة سريعة حتى في أوقات الازدحام الشديد، ولا تُرسَل أي بيانات عن الزائر إلى أي جهة.
يمكن تضمين كل واحدة من حاسبات الموقع الـ210. تعرض المعرض على الصفحة calculate.studio/en/widgets الحاسبات الأكثر طلبًا -- من بينها حاسبة مؤشر كتلة الجسم، والرهن العقاري، والقرض، والنسبة المئوية، والفائدة المركبة، والعمر، والسعرات الحرارية، والمعدل التراكمي (GPA) -- ولكل صفحة حاسبة فردية زر Embed بجانب أزرار المشاركة يكشف عن مقطع الكود الخاص بتلك الأداة تحديدًا.
كيفية التثبيت -- الطريقة العامة
التثبيت عبارة عن عملية نسخ ولصق واحدة. يتكوّن المقطع من جزأين: عنصر iframe الذي يعرض الحاسبة، وفقرة ائتمان صغيرة تتضمّن رابطين إلى الحاسبة الكاملة وإلى Calculate.Studio. والحفاظ على سطر الائتمان هذا كما هو هو الشرط الوحيد للاستخدام المجاني -- وهو ما يبقي البرنامج مجانيًا للجميع.
- افتح الصفحة calculate.studio/en/widgets، أو افتح أي صفحة حاسبة وانقر على زر </> Embed.
- انقر على Copy code. سيُنسخ المقطع إلى الحافظة لديك.
- في محرر موقعك، بدّل إلى عرض HTML (يُسمّى أحيانًا «الكود» أو «المصدر») للصفحة التي تريد وضع الحاسبة فيها.
- الصق المقطع في المكان الذي يجب أن تظهر فيه الحاسبة، ثم احفظ وانشر.
- عاين الصفحة. يجب أن تُحمَّل الحاسبة وتحسب فورًا -- جرّبها مرة بأرقام تجريبية.
تعليمات خاصة بكل منصة
تقبل معظم أدوات بناء المواقع كود HTML الخام عبر كتلة أو عنصر مخصص، لذا يعمل المقطع نفسه في كل مكان. وتختلف الأسماء باختلاف المنصة:
| المنصة | أين تلصق المقطع |
|---|---|
| ووردبريس (محرر الكتل) | أضف كتلة «Custom HTML» والصق المقطع بداخلها. |
| ووردبريس (المحرر الكلاسيكي) | بدّل تبويب المحرر من «Visual» إلى «Text» ثم الصق. |
| Wix | أضف عنصر «Embed HTML» (Add → Embed code → Embed HTML) والصق. |
| Squarespace | أضف كتلة «Code» إلى قسم الصفحة والصق. |
| Shopify | في محرر الصفحة أو تدوينة المدونة، انقر على زر <> (Show HTML) والصق. |
| Webflow | أضف مكوّن «Embed» والصق. |
| موقع HTML عادي | الصق المقطع مباشرة داخل كود HTML للصفحة في المكان الذي يجب أن تظهر فيه الحاسبة. |
الحجم والتنسيق والأداء
يأتي المقطع بإعدادات افتراضية معقولة: عرض كامل (width="100%")، وارتفاع ثابت يتناسب مع عدد حقول الإدخال في تلك الحاسبة، وحدّ خفيف بزوايا دائرية. يمكنك تغيير قيمة الارتفاع إذا احتاج قالب موقعك إطارًا أطول أو أقصر، ويمكنك تعديل تنسيق الحدّ أو إزالته ليلائم تصميمك. والعرض متجاوب افتراضيًا، لذا تعمل الأداة على الهواتف دون أي عمل إضافي.
يتضمّن عنصر iframe الخاصية loading="lazy"، وهي خاصية متصفح قياسية تؤخّر تحميل الأداة إلى أن يقترب الزائر منها بالتمرير. وهذا يعني أن تضمين حاسبة لا يضيف عمليًا أي شيء إلى زمن التحميل الأولي لصفحتك -- إذ لا يجلب المتصفح الأداة إلا عندما توشك أن تصبح مرئية.
صفحات التضمين نفسها مُعلَّمة بـ noindex مع رابط أساسي (canonical) يشير إلى صفحة الحاسبة الكاملة، وهو ما يتوافق مع إرشادات Google بشأن المحتوى المضمّن والمكرر. لذلك لا يمكن أن يتسبب تضمين الأداة في مشكلات محتوى مكرر لموقعك أو لموقعنا.
القاعدة الوحيدة: أبقِ رابط الائتمان
برنامج الأداة مجاني ودون تسجيل بسبب شرط واحد فقط: فقرة الائتمان الصغيرة أسفل iframe -- السطر الذي يقول «[اسم الحاسبة] by Calculate.Studio» -- يجب أن تبقى في مكانها. وهي نص بحجم 12 بكسل يجلس بهدوء أسفل الأداة ولا ينافس محتواك.
أنت حرّ في تغيير حجم iframe، وإعادة تنسيق حدّه، ووضع الأداة في أي مكان في موقعك، بما في ذلك المواقع التجارية والمدونات ومشاريع العملاء. وإذا احتجت حاسبة غير موجودة في المعرض المميَّز، فإن لكل صفحة حاسبة في الموقع زر Embed خاصًا بها، بحيث تتوفر جميع الأدوات الـ210.
ما الحاسبات الأنسب لتكون أدوات مضمّنة؟
أفضل أداة لموقعك هي تلك التي كان قرّاؤك سيغادرون صفحتك للبحث عنها لولا وجودها. تميل مدونات اللياقة والصحة إلى تضمين حاسبات مؤشر كتلة الجسم أو السعرات الحرارية أو معدل الأيض الأساسي (TDEE). وتضمّن مواقع العقارات والمالية الشخصية حاسبات الرهن العقاري والقرض والفائدة المركبة. وتضمّن مواقع الطلاب والتعليم حاسبات المعدل التراكمي (GPA) والنسبة المئوية، وكثيرًا ما تضيف المدونات العامة حاسبة العمر إلى المقالات الدائمة.
ولأن كل أداة تعرض نسخة مختصرة من الحاسبة مع رابط إلى النسخة الكاملة -- التي تتضمّن جداول تفسير، وأمثلة محلولة، ومصادر -- يحصل قرّاؤك على إجابة فورية في صفحتك ومسار إلى سياق أعمق متى أرادوا ذلك.
الأسئلة الشائعة
هل أداة الحاسبة مجانية فعلًا؟
نعم. لا حاجة إلى تسجيل، ولا مفتاح API، ولا حدّ للاستخدام، ولا أي تكلفة. الشرط الوحيد هو أن يبقى سطر الائتمان الصغير أسفل الأداة، الذي يربط إلى Calculate.Studio، في مكانه.
هل ستبطئ الأداة موقعي؟
لا. يستخدم iframe التحميل الكسول (lazy loading) الأصلي في المتصفح، فلا يُجلَب إلا عندما يقترب الزائر منه بالتمرير، ويجري الحساب بالكامل في متصفح الزائر. وهو لا يضيف عمليًا أي شيء إلى زمن تحميل صفحتك الأولي.
هل يمكنني تضمين حاسبة في موقع تجاري أو موقع عميل؟
نعم. يمكن استخدام الأدوات في المواقع التجارية والمدونات ومشاريع العملاء دون أي تكلفة، شريطة أن يبقى رابط الائتمان أسفل الأداة سليمًا.
هل يمكنني تغيير حجم الأداة أو حدّها؟
نعم. يمكنك تعديل ارتفاع iframe وتنسيق حدّه ليلائم موقعك. أما العرض فهو متجاوب أصلًا (100%)، لذا يتكيف تلقائيًا مع الهواتف والأعمدة الضيقة.
هل يتسبب تضمين الأداة في مشكلات محتوى مكرر لتحسين محركات البحث (SEO)؟
لا. صفحات التضمين مُعلَّمة بـ noindex مع رابط أساسي (canonical) يشير إلى صفحة الحاسبة الكاملة، وهو ما يتوافق مع إرشادات Google الموثّقة، لذا لا تعامل محركات البحث الأداة كمحتوى مكرر في موقعك.
المراجع
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html