كود HTML الأساسي لإنشاء زر مشاركة لـ WhatsApp

Hisham Abouzied · 5 مايو 2023

عايز كود html اضعه لمشاركه اى شئ اريد من موقعى الى الواتس اب

يعنى لو فى حد زار موقعى اواعجب بصوره مثلا عايز اضع جمب صور او فديو زر مشاركة الفديو اوالصوره للواتساب

عمر قره محمد · 5 مايو 2023

يمكنك فعل ذلك عبر إضافة عنصر من النوع a كالتالي :

<a href="https://wa.me/?text=انا استخدم واتساب" target="_blank">شارك في واتساب</a>

حيث تضع بعد الـ text= النص الذي تريد من المستخدم مشاركته.

بلال زيادة · 5 مايو 2023

لا يمكن استخدام كود HTML فقط لإرسال محتوى من موقع الويب مباشرة إلى تطبيق WhatsApp. ومع ذلك ، يمكن استخدام رابط WhatsApp لإنشاء رابط مباشر للمحتوى الذي تريد مشاركته.

فيما يلي كود HTML الأساسي لإنشاء زر مشاركة لـ WhatsApp:

<a href="https://api.whatsapp.com/send?text=اكتب نص الرسالة الذي تريد مشاركته هنا">مشاركة عبر WhatsApp</a>

يجب استبدال "اكتب نص الرسالة الذي تريد مشاركته هنا" بالنص الذي تريد مشاركته. ومن الممكن تعديل الرمز أيضًا ليشمل الصورة أو الفيديو المراد مشاركتها.

على سبيل المثال، يمكنك استخدام هذا الرمز لإضافة زر مشاركة إلى صورة:

<a href="whatsapp://send?text=اكتب نص الرسالة الذي تريد مشاركته هنا">
<img src="اسم الصورة" alt="وصف الصورة">
</a>

يجب استبدال "اسم الصورة" بـ URL الخاص بالصورة التي تريد مشاركتها.

Mustafa Suleiman · 5 مايو 2023

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

أما إذا كنت تريد الكود، فإليك كود HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Share on WhatsApp</title>
    <style>
        .whatsapp-share-button {
            display: inline-block;
            text-align: center;
            background-color: #25d366;
            color: #fff;
            border-radius: 4px;
            padding: 8px;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
            font-size: 16px;
        }
        .whatsapp-share-button:hover {
            background-color: #128c7e;
        }
    </style>
</head>
<body>
    <a class="whatsapp-share-button" href="https://api.whatsapp.com/send?text=Enter%20your%20message%20here&phone=whatsapp_number_with_country_code" target="_blank">Share on WhatsApp</a>
</body>
</html>

وإليك كود جافاسكريبت لتحديث الرابط المراد مشاركته مع الرسالة:

<script>
function shareOnWhatsApp() {
  const text = "Enter your message here";
  const url = "https://www.example.com/image.jpg";
  const message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
  const whatsapp_url = "https://api.whatsapp.com/send?text=" + message;
  window.open(whatsapp_url);
}
  document.querySelector('.whatsapp-share-button').addEventListener('click', shareOnWhatsApp );

</script>

ثم يتم استدعاء الدالة "shareOnWhatsApp()" عند النقر على زر مشاركة الواتساب:

ويجب استبدال "Enter your message here" بالنص الذي تريد مشاركته و"https://www.example.com/image.jpg" بالرابط الخاص بالصورة أو المنشور أو الفيديو الذي تريد مشاركته.

عبدالباسط ابراهيم · 7 مايو 2023

هناك طرق مختلفة لإضافة زر مشاركة للواتساب إلى صفحة الويب الخاصة بك.

WhatsApp API:

WhatsApp API هي خدمة مقدمة من WhatsApp تتيح للمطورين إنشاء زر مشاركة للواتساب على صفحة الويب الخاصة بهم. يعتمد استخدام هذه الخدمة على عدة خطوات:

- الحصول على مفتاح API من WhatsApp Business API.
- إنشاء رسالة نصية تحتوي على النص أو الرابط الذي يريد المستخدم مشاركته.
- إنشاء رابط يحتوي على المفتاح الخاص بك ورسالتك النصية.
- إضافة الرابط الذي تم إنشاؤه إلى صفحة الويب الخاصة بك.

عندما ينقر المستخدم على الزر المشاركة ، يتم فتح WhatsApp مع رسالة جاهزة للإرسال إلى جهات الاتصال الخاصة به.

مكتبات الوسائط الاجتماعية:

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

خيارات مخصصة:

يمكن للمطورين إنشاء خيارات مخصصة لإضافة زر مشاركة للواتساب إلى صفحات الويب الخاصة بهم. يمكن أن تختلف هذه الخيارات بشكل كبير وتشمل إضافة رمز الزر مباشرة إلى HTML أو استخدام JavaScript لإنشاء زر مخصص.على سبيل المثال، يمكن إنشاء زر مشاركة للواتساب باستخدام الكود التالي:

<button onclick="whatsAppShare()">مشاركة على الواتساب</button>

<script>
function whatsAppShare() {
  var message = "اكتب النص الذي تريد مشاركته هنا";
  var phone = "رقم الهاتف الذي تريد إرساله إليه";
  var url = "https://api.whatsapp.com/send?text=" + encodeURIComponent(message) + "&phone=" + phone;
  window.open(url);
}
</script>

عندما ينقر المستخدم على الزر المشاركة ، يتم فتح WhatsApp مع رسالة جاهزة للإرسال إلى جهات الاتصال الخاصة به.

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

عماد بوجوال · 26 يناير

بتاريخ On 5‏/5‏/2023 at 08:17 قال بلال زيادة:
=

Blue%20Orange%20Playful%20Business%20Lin ن

كود HTML الأساسي لإنشاء زر مشاركة لـ WhatsApp

السؤال

Hisham Abouzied

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عماد بوجوال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية