تحسين زر مشاركة WhatsApp الخاص بك
يعد تضمين زر مشاركة WhatsApp على موقع الويب الخاص بك طريقة رائعة لزيادة تفاعل المستخدم لأنه يسهل على المستخدمين مشاركة معلوماتك مع شبكاتهم. يعد استخدام رابط لتنشيط WhatsApp على الأجهزة المحمولة بسلاسة هو الطريقة القياسية.
ومع ذلك، فإن إصدار WhatsApp لسطح المكتب غير متوافق مع هذه الإستراتيجية. ستعلمك هذه المشاركة التعليمات البرمجية والتعليمات التي تحتاجها لإنشاء زر مشاركة يعمل على إصدارات WhatsApp عبر الإنترنت والهواتف المحمولة.
| يأمر | وصف |
|---|---|
| encodeURIComponent() | يقوم بتشفير مكون URI عن طريق استبدال تسلسل هروب واحد أو اثنين أو ثلاثة يتوافق مع ترميز UTF-8 الخاص بالحرف لكل تواجد لحرف معين. |
| window.open() | يسمح بمشاركة الروابط على WhatsApp Web عن طريق فتح نافذة متصفح جديدة أو علامة تبويب باستخدام عنوان URL المقدم. |
| express.static() | يقدم ملفات ثابتة للعميل، مما يسمح بالوصول إليها عن طريق HTML وCSS وJavaScript، من الدليل المقدم. |
| res.redirect() | يعيد توجيه العميل إلى عنوان URL المقدم عن طريق إرسال رد إعادة التوجيه إليه؛ وهذا مفيد لإعادة التوجيه إلى رابط مشاركة WhatsApp Web. |
| app.use() | يقدم ملفات ثابتة عن طريق تركيب وظائف البرامج الوسيطة في تطبيق Express في هذا المثال. |
| app.get() | ينشئ نقطة نهاية لرابط مشاركة WhatsApp Web عن طريق تحديد معالج المسار لاستعلامات GET. |
| document.getElementById() | يوفر مثيلًا لعنصر HTML بالمعرف المحدد حتى يتمكن البرنامج النصي من التعامل مع الأحداث. |
| onclick | ينشئ معالج حدث ليتم تشغيله عند حدوث نقرة على عنصر HTML معين، وهذه هي الطريقة التي يتم بها تشغيل ميزة المشاركة. |
تمكين إمكانيات المشاركة عبر واتساب عبر الأنظمة الأساسية
يقوم البرنامج النصي الأول بإنشاء أزرار مشاركة لإصدارات WhatsApp عبر الإنترنت والهاتف المحمول من خلال الاستفادة من HTML و JavaScript. زر المشاركة على الجوال href تفتح السمة تطبيق WhatsApp على الأجهزة المحمولة برسالة مملوءة مسبقًا باستخدام whatsapp://send?text= مخطط URL. زر مع id تم تصميم "shareButton" لإصدار سطح المكتب. يحتوي هذا الزر الآن على onclick تمت إضافة مستمع الحدث بواسطة البرنامج النصي. عندما يتم النقر عليه، https://web.whatsapp.com/send?text= يُستخدم لإنشاء عنوان URL لتطبيق WhatsApp Web. والاستخدامات encodeURIComponent لتشفير الرسالة. window is then used to open the created URL in a new browser tab.open، مما يتيح لمستخدمي WhatsApp Web توزيع الرسالة.
يستخدم البرنامج النصي الثاني Node.js و HTML لكل من تطوير الواجهة الأمامية والخلفية. ال Express يتم استخدام الإطار من قبل Node.js البرنامج النصي الخلفي لتكوين الخادم. يحدد الخادم الطريق /share الذي يعيد التوجيه إلى عنوان URL لمشاركة WhatsApp Web برسالة مملوءة مسبقًا ويقدم ملفات ثابتة من الدليل "العام". يتم إنشاء أزرار المشاركة للويب والجوال بواسطة البرنامج النصي للواجهة الأمامية. نفس الشيء whatsapp://send?text= يتم استخدام مخطط URL بواسطة زر الهاتف المحمول. ال /share يتم ربط نقطة النهاية الموجودة على الخادم بواسطة زر مشاركة الويب. عند الوصول إلى نقطة النهاية هذه، يتم إرسال المستخدم إلى WhatsApp Web باستخدام الرسالة المشفرة res.redirect، تمكين مشاركة الويب عبر WhatsApp.
تطوير حل كامل للويب والهاتف المحمول لزر مشاركة WhatsApp
حل HTML وجافا سكريبت
<!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><!-- Mobile Share Button --><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><!-- Desktop Share Button --><button id="shareButton">Share on WhatsApp Web</button><script>document.getElementById('shareButton').onclick = function () {var url = 'https://web.whatsapp.com/send?text=' + encodeURIComponent('Hello World!');window.open(url, '_blank');};</script></body></html>
وضع حل الواجهة الأمامية والخلفية لمشاركة WhatsApp موضع التنفيذ
التكامل بين HTML وNode.js
// Backend: server.js (Node.js)const express = require('express');const app = express();const port = 3000;app.use(express.static('public'));app.get('/share', (req, res) => {const message = 'Hello World!';const url = `https://web.whatsapp.com/send?text=${encodeURIComponent(message)}`;res.redirect(url);});app.listen(port, () => {console.log(`Server running at http://localhost:${port}`);});<!-- Frontend: public/index.html --><!DOCTYPE html><html><head><title>WhatsApp Share Button</title></head><body><a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a><a href="/share">Share on WhatsApp Web</a></body></html>
استخدام أزرار المشاركة في WhatsApp لتحسين تجربة المستخدم
تعد تجربة المستخدم على الأجهزة المختلفة عاملاً أساسيًا يجب أخذه في الاعتبار عند وضع أزرار مشاركة WhatsApp في مكانها الصحيح. عند التفاعل، يتصرف مستخدمو الهاتف المحمول بشكل مختلف عن مستخدمي سطح المكتب. ونتيجة لذلك، من الضروري ضمان أن ميزات المشاركة في كلا النظامين تعمل بشكل لا تشوبه شائبة. يريد المستخدمون أنشطة سريعة وسريعة عند استخدام الأجهزة المحمولة. أصبح التواصل المباشر مع تطبيق WhatsApp ممكنًا من خلال استخدام whatsapp://send?text= مخطط URL، الذي يوفر تجربة مشاركة سريعة وبسيطة.
يمثل تكرار هذه التجربة السلسة على جهاز الكمبيوتر تحديًا. لا يجب الوصول إلى واجهة WhatsApp Web فحسب، بل يجب أيضًا التأكد من إعداد الرسالة وتجهيزها للإرسال. وهذا يتطلب معالجة حذرة لعنوان URL وترميز الرسائل الصحيح encodeURIComponent. علاوة على ذلك، قد يجد مستخدمو سطح المكتب أنه من المفيد أن يكون زر المشاركة سهل الوصول إليه ومرئيًا، وهو ما يمكن تحقيقه من خلال التخطيط الدقيق لتخطيط الزر وتحديد موضعه على الصفحة. يمكنك تطوير وظيفة مشاركة سهلة الاستخدام وتزيد التفاعل على جميع الأجهزة من خلال الاهتمام بهذه التفاصيل الصغيرة.
الأسئلة المتداولة بخصوص أزرار المشاركة على واتساب
- كيف يمكنني إنشاء زر مشاركة لتطبيق WhatsApp على هاتفي؟
- في ال href سمة أ a العلامة، استخدم whatsapp://send?text= مخطط URL.
- كيف يمكنني تشغيل زر المشاركة في WhatsApp Web؟
- استفد من عنصر الزر الذي ينشئ عنوان URL الخاص بـ WhatsApp Web ويفتحه باستخدام ملف window الحدث عند النقر.فتح.
- ماذا فعلت encodeURIComponent بمثابة؟
- من أجل ضمان تنسيق عنوان URL بشكل مناسب، فإنه يقوم بتشفير مكون URI عن طريق استبدال تسلسل الهروب لأحرف محددة.
- لأي سبب يتطلب زر المشاركة واجهة خلفية؟
- توفر الواجهة الخلفية حل مشاركة أكثر موثوقية وقابلية للتكيف حيث يمكنها إدارة إنشاء عنوان URL وإعادة التوجيه.
- كيف اكسبرس res.redirect وظيفة؟
- يتلقى العميل إجابة إعادة توجيه منه لتوجيهه إلى عنوان URL المحدد.
- هل يمكنني استخدام أزرار المشاركة عبر الهاتف المحمول والويب في نفس الوقت؟
- نعم، يمكنك تصميم أزرار فريدة لمنصات الويب والهواتف المحمولة أو استخدام برنامج نصي لتحديد النظام الأساسي وتعديل عنوان URL بشكل مناسب.
- هل تتطلب مشاركة سطح المكتب استخدام window.open؟
- بالتأكيد، window.To make sure the message is transmitted, use the open خيار لفتح علامة تبويب جديدة باستخدام عنوان URL لمشاركة WhatsApp Web.
- كيف يمكنني جعل زر المشاركة أكثر وضوحًا؟
- على موقع الويب الخاص بك، اعرض الزر بشكل بارز واستفد من النص أو الرموز التي تشير بوضوح إلى ما يجب القيام به.
- ماذا يحدث إذا لم يكن الجهاز المحمول الخاص بالمستخدم مزودًا بتطبيق WhatsApp المثبت؟
- إذا لم يكن تطبيق WhatsApp مثبتًا، فستتم مطالبتهم بتنزيله، ولن تنجح محاولة المشاركة.
- هل يمكنني تغيير الرسالة المكتوبة مسبقًا في رابط المشاركة؟
- نعم، يمكنك تغيير الرسالة عن طريق تشفيرها بشكل صحيح وتعديل معلمة النص في عنوان URL.
ملاحظات ختامية حول إضافة أزرار مشاركة WhatsApp
يؤدي تضمين زر مشاركة WhatsApp على موقع الويب الخاص بك إلى تسهيل مشاركة المحتوى عبر الأنظمة الأساسية، مما يزيد من تفاعل المستخدم. يعد استخدام أنظمة URL معينة وأساليب JavaScript أمرًا ضروريًا لضمان التوافق مع إصدارات WhatsApp لسطح المكتب والهاتف المحمول. علاوة على ذلك، يمكن أن يوفر دعم الواجهة الخلفية لـ Node.js حلاً موثوقًا وقابلاً للتكيف. يمكنك تصميم ميزة مشاركة تزيد من سهولة الاستخدام ومدى الوصول مع كونها فعالة وسهلة الاستخدام من خلال أخذ هذه الأشياء في الاعتبار.