أضافة ايقونة WhatsApp كزر في صفحة HTML على الجانب الأيسر وربطها مع رقم هاتف- Add WhatsApp icon as button in left side page HTML

تطوير الويب FrontEnd - CSS

بنتعلم في هذا المقال كيف نضيف ايقونة للواتس WhatsApp في اسفل الشاشة وبمكان ثابت في اسفل الصفحه الي اليمين ( واكيد بكون متحرك لفوق وتحت عند تحريك المؤشر) وبعدها بنتعلم كيف بتم ربطها مع رقم هاتف، ايضا كيف ممكن نرسل رسالة. وبنحكي عن كيفية الاضافة في صفحات Web وصفحات Mobile.  

الشكل المطلوب عرض الايقونه فيه بالشكل التالي: 

وهذا الشكل بكون لصفحات Web بالاضافة الى صفحات Mobile (اكيد في كود خاص لكل متصفح).

تمام نشوف كيف نطبق هذا الكلام. 

اول اشي لازم يكون عندك صورة الايقونه الخاصة بالواتس (ممكن تستخدم ايقونه الواتس باستخدام خطوط fontawesome ) 

في هذا المثال بنستخدم صورة JPG لأيقونة الواتس. 

ملف CSS 

ممكن تعمل ملف منفصل ل CSS او تضيف الكود في نفس الصفحه. 

الكود الخاص ب CSS بكون بالشكل التالي : 

  .fixedButton {
        position: fixed;
        bottom: 0px;
        right: 0px;
        padding: 20px;
    }
    .roundedFixedBtn {
        height: 100px;
        line-height: 80px;
        width: 60px;
        font-size: 2em;
        font-weight: bold;
        border-radius: 50%;
        /* background-color: #4CAF50;*/
        color: white;
        text-align: center;
        cursor: pointer;
    }

هذا الكود مسؤول عن تحديد مكان الايقونة في اسفل الشاشة من جهة اليمين. 

كود HTML 

<div class="fixedButton" href="#">
    <div class="roundedFixedBtn">
        <i class="fa fa-whatsapp">
            <a target="_blank" title="Contact Us On WhatsApp" href="https://web.whatsapp.com/send?phone=+90000000000&amp;text=Hi, I would like to get more information.." class="whatsapplink hidemobile">
                <img src="~/Content/Images/WhatsApp.png" width="75" height="75" />
            </a>
            <a target="_blank" title="Contact Us On WhatsApp" href="https://api.whatsapp.com/send?phone=+90000000000&text=Hi, I would like to get more information.." class="whatsapplink hideweb">
                <img src="~/Content/Images/WhatsApp.png" width="75" height="75" />
            </a>
        </i>
    </div>
</div>

تمام نفهم شو عملنا

اضفنا <Div> وطبقنا عليها class باسم fixedButton لتحديد مكان الايقونه وبكون بمكان ثابت في الصفحه عند تحريك المؤشر لاسفل او اعلى. بع هيك اضفنا <Div> ثاني وطبقنا عليه class باسم  roundFixedBtn الي من خلالو بتم التحكم بمواضفات الايقونه الطول والعرض، حجم ونوع الخط ... الخ. 

بعد هيك اضفنا <a tag> لاستدعاء API الخاص بشركة WhatsApp بستقبل Parameters 2 الاول رقم الهاتف باسم phone والثاني نص الرسالة المبدئية المطلوب ارسالها باسم text. 

الكود :

<a target="_blank" title="Contact Us On WhatsApp" href="https://web.whatsapp.com/send?phone=+90000000000&amp;text=Hi, I would like to get more information.." class="whatsapplink hidemobile">

 بعد هيك اضفنا صورة لايقونة الواتس (ممكن تستخدم الايقونات الخاصة ب fontawesome )

اذا استخدمت ايقونات fontawesome  بكون الكود: 

<i class="fa fa-whatsapp" aria-hidden="true"></i>

واكيد ما تنسى تضيف ملف fontawesome  

لاحظ في الكود السابق انو اضفنا 2 <a tag> لاستدعاء API. الاول للتعامل مع صفحات Web وطبقنا عليه class باسم 

class="whatsapplink hidemobile"

والثاني للتعامل مع صفحات Mobile وطبقنا عليه class 

class="whatsapplink hideweb"

ملف JavaScript

الاضافة الاخيره هي الكود الخاص بملف JavaScript 

الهدف من هذا الكود هو عرض الايقونه حسب المستعرض اذا كان Web او Mobile 

الكود :

<script>
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
    if (mobile) {
        $('.hidemobile').css('display', 'none'); // OR you can use $('.hidemobile').hide();
    }
    else {
        $('.hideweb').css('display', 'none'); // OR you can use $('.hideweb').hide();
    }
</script>

عملنا فحص لنوع المتصفح وخزنا النتيجة في متغير باسم mobile وبناء عليه اظهرنا او اخفنيا الايقونه