كيفية إضافة زر واتساب في بلوجر دليل شامل لزيادة التفاعل
السلام عليكم عزيزي المتابع مدونه بلوجر بلس. لعلنا نتفق جميعاً على أن التواصل الفعال والمباشر مع زوار موقعك أو مدونتك هو المفتاح السحري لبناء الثقة وزيادة التفاعل. في الوقت الحالي، تحولت الهواتف الذكية إلى المنفذ الأول لتصفح الإنترنت، وتطبيق "واتساب" (WhatsApp) يتربع على عرش أغلب تطبيقات المراسلة الفورية عالمياً بمليارات المستخدمين النشطين.
سواء كنت تدير مدونة شخصية على منصة "بلوجر" (Blogger)، أو تمتلك متجراً إلكترونياً بسيطاً لعرض منتجاتك، فإن غياب وسيلة تواصل سريعة قد يكلفك فقدان الكثير من الزوار والعملاء المحتملين. هنا تبرز الحاجة الماسة وضرورية لتعلم كيفية إضافة زر مشاركة واتساب بشكل احترافي وجذاب، ليكون جسراً مباشراً بينك وبين جمهورك بضغطة زر واحدة. في هذا الدليل المفصل، جمعنا لك خلاصة التجارب البرمجية والتسويقية لنضع بين يديك طرقاً متعددة، آمنة، ومجانية لإضافة هذا الزر السحري لمدونتك بخطوات سهلة تناسب المبتدئين والمحترفين على حد سواء.
اقرأ حول - خطوات إنشاء صفحة اتصل بنا احترافية
جدول المحتويات
- ما هو زر مشاركة واتساب ولماذا تحتاجه مدونتك؟
- الخطوة الأولى: كيفية إنشاء رابط واتساب المباشر (WhatsApp API)
- كيفية إضافة زر مشاركة واتساب داخل مقالات بلوجر (يدوياً)
- طريقة إضافة زر واتساب العائم (Floating Button) في بلوجر
- الفرق بين زر "المحادثة المباشرة" وزر "مشاركة المقال" عبر واتساب
- أفضل الأدوات والمواقع الجاهزة لإنشاء زر واتساب دون أكواد
- مقارنة بين الإضافة اليدوية بالأكواد واستخدام أدوات الطرف الثالث
- كيفية تخصيص ألوان وتصميم زر الواتساب باستخدام CSS
- أخطاء شائعة يجب تجنبها عند دمج واتساب في موقعك
- تأثير زر الواتساب على سرعة الموقع (SEO) وكيفية تحسينه
- أهم الأسئلة الشائعة حول دمج واتساب في مدونات بلوجر
ما هو زر مشاركة واتساب ولماذا تحتاجه مدونتك؟
في عالم التدوين وإدارة المواقع، يُعرف الزر التفاعلي بأنه أداة بصرية مبرمجة لتنفيذ أمر معين عند النقر عليها. زر الواتساب تحديداً هو عبارة عن رابط ذكي (Smart Link) يستدعي تطبيق واتساب المثبت على هاتف المستخدم، أو يفتح نافذة "واتساب ويب" إذا كان الزائر يستخدم جهاز الكمبيوتر.
الاعتماد على هذا الزر ليس مجرد رفاهية تقنية، بل هو ضرورة ملحة؛ فالزائر يميل دائماً إلى الخيارات التي توفر عليه الوقت والجهد. بدلاً من البحث عن صفحة "اتصل بنا"، أو تعبئة نماذج بريد إلكتروني مملة قد تتأخر الردود عليها لأيام، يمنحك الواتساب تواصلاً لحظياً (Real-time Communication). هذا التواصل اللحظي يرفع من معدلات التحويل (Conversion Rates)، ويزيد من ولاء القراء لمدونتك، ويسهل عليهم مشاركة محتواك القيّم مع دوائرهم ومعارفهم.
الخطوة الأولى- كيفية إنشاء رابط واتساب المباشر WhatsApp API
قبل أن نتطرق إلى الجانب المرئي وإضافة الأزرار في بلوجر، يجب أولاً أن نفهم جوهر العملية وكيفية صياغة الرابط البرمجي الذي سينقل الزائر إلى محادثتك. تعتمد هذه الطريقة على بروتوكول واجهة برمجة تطبيقات واتساب (WhatsApp API).
القاعدة الأساسية لإنشاء الرابط هي استخدام التنسيق التالي بدقة متناهية:
لنفصل هذا الرابط خطوة بخطوة لضمان عمله دون مشاكل:
- رقم الهاتف (<phone_number>): يجب استبدال هذا الجزء برقم هاتفك بالتنسيق الدولي الكامل. احذر من وضع أي رموز مثل (+) أو أصفار دولية (00) أو مسافات أو شرطات. على سبيل المثال، إذا كان رقمك في مصر هو 01012345678، فيجب كتابته هكذا: 201012345678.
- الرسالة المخصصة (<custom_message>): هذا الجزء اختياري ولكنه مفيد جداً. يسمح لك بكتابة رسالة تظهر جاهزة في مربع النص لدى الزائر بمجرد فتح التطبيق. يجب ترميز المسافات في الروابط باستخدام الرمز
%20.
مثال عملي 💡: إذا أردت أن يرسل لك الزائر رسالة "مرحباً، أريد الاستفسار عن مقالك"، سيكون الرابط النهائي بهذا الشكل:
https://wa.me/201012345678?text=مرحباً%20أريد%20الاستفسار%20عن%20مقالك
كيفية إضافة زر مشاركة واتساب داخل مقالات بلوجر يدوياً
الآن بعد أن جهزنا الرابط الخاص بنا، دعنا نتعلم زر واتساب في بلوجر بشكل نصي أو مصور داخل مقال معين في مدونتك على منصة بلوجر. هذه الطريقة ممتازة إذا كنت تريد دعوة القارئ للتواصل معك في منتصف أو نهاية موضوع معين (Call to Action).
- تسجيل الدخول لبلوجر 📌 افتح لوحة تحكم مدونتك، وتوجه إلى قسم "المشاركات" (Posts) لإنشاء مقال جديد أو تعديل مقال حالي.
- التبديل إلى وضع HTML 📌 في شريط الأدوات العلوي لمحرر بلوجر، انقر على أيقونة القلم (أقصى اليمين أو اليسار حسب لغة الواجهة) واختر "عرض HTML" بدلاً من "عرض وضع الإنشاء".
- لصق كود الزر 📌 ابحث عن المكان الذي ترغب بظهور الزر فيه (مثلاً في نهاية المقال)، وقم بلصق الكود البرمجي التالي، مع تذكر تغيير الرابط بالرابط الذي أنشأناه في الخطوة السابقة.
بمجرد العودة إلى "عرض وضع الإنشاء"، ستلاحظ ظهور زر أخضر أنيق جاهز للنقر. ميزة هذه الطريقة هي البساطة التامة وعدم تحميل المدونة أي ملفات جافا سكريبت ثقيلة.
طريقة إضافة زر واتساب العائم Floating Button في بلوجر
الزر العائم هو ذلك الزر الذي يظل ثابتاً في زاوية الشاشة (عادةً في الأسفل يساراً أو يميناً) مهما قام الزائر بالتمرير (Scrolling) لأعلى أو لأسفل. يعتبر هذا التصميم هو الأقوى والأكثر استخداماً حالياً في المتاجر والمواقع الاحترافية. لتطبيقه في بلوجر، اتبع الخطوات الدقيقة التالية:اقرأ حول - كيف معرفة اسم المتصل بمجرد إدخال رقم الهاتف - خطوات سهلة وفعالة
- الخطوة 1: من لوحة تحكم بلوجر الرئيسية، انتقل إلى قسم "التنسيق" (Layout).
- الخطوة 2: في أي مكان متاح (يفضل الشريط الجانبي Sidebar أو تذييل الصفحة Footer)، انقر على "إضافة أداة" (Add a Gadget).
- الخطوة 3: من القائمة المنبثقة، اختر أداة "HTML/JavaScript".
- الخطوة 4: اترك حقل "العنوان" فارغاً، وانسخ الكود التالي بالكامل والصقه في مربع "المحتوى". (لا تنسَ تعديل رقم الهاتف).
<a href="https://wa.me/201012345678" target="_blank" style="position: fixed; bottom: 20px; right: 20px; background-color: #25d366; color: white; border-radius: 50px; padding: 15px 20px; font-size: 20px; z-index: 1000; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); text-decoration: none; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
الآن قم بحفظ الأداة واعرض مدونتك. ستشاهد أيقونة واتساب دائرية احترافية تطفو أسفل يمين (أو يسار حسب الكود) الشاشة.
الفرق بين زر "المحادثة المباشرة" وزر "مشاركة المقال" عبر واتساب
من أهم النقاط التي يختلط فيها الأمر على المبتدئين عند البحث عن كيفية إضافة واتساب للموقع هي التفريق بين وظيفتين أساسيتين، ولكل منهما كود مختلف وهدف تسويقي مختلف:
| النوع | الهدف والتطبيق | شكل الرابط البرمجي |
|---|---|---|
| زر المحادثة (Chat Button) | يهدف إلى جعل الزائر يرسل لك رسالة على رقمك الشخصي/التجاري للاستفسار والدعم الفني. | wa.me/YourNumber |
| زر المشاركة (Share Button) | يهدف إلى جعل الزائر يرسل رابط مقالك إلى أصدقائه أو مجموعاته على واتساب لنشر محتواك (Viral Traffic). | شارك عبر واتساب
|
إذا كنت ترغب في إضافة زر مشاركة المقال ليقوم زوارك بمشاركة مواضيعك، فإن الكود يختلف قليلاً ليعتمد على رابط الصفحة الحالية. في بلوجر، يتم ذلك عادة عبر أزرار المشاركة الاجتماعية الافتراضية، أو باستخدام أدوات خارجية تقوم بجلب رابط الصفحة التلقائي (URL) وعنوان المقال وإرفاقه في رسالة الواتساب للزائر.
أفضل الأدوات والمواقع الجاهزة لإنشاء زر واتساب دون أكواد
إذا كنت لا تفضل التعامل مع الأكواد البرمجية (HTML و CSS)، وتخشى من العبث بقالب بلوجر الخاص بك، فإن الإنترنت مليء بمنصات تقدم لك "ودجات" (Widgets) جاهزة قابلة للتخصيص الكامل بضغطة زر. تقوم هذه المواقع بتوليد كود جافا سكريبت قصير (Script) تقوم بلصقه مرة واحدة في موقعك.اقرأ حول - دليل إضافة زر تحميل التطبيق APK في بلوجر بشكل احترافي
من أشهر هذه الأدوات الموثوقة:
- موقع GetButton.io: يعتبر من أسهل المواقع عالمياً. تدخله، تضع رقم هاتفك، تختار الألوان، وتكتب رسالة ترحيبية. ثم يعطيك كوداً جاهزاً.
- منصة Elfsight: توفر أداة دردشة واتساب متطورة جداً تتيح لك وضع صورة شخصية لك، وتحديد أوقات العمل (كي لا يظهر الزر وأنت غير متاح)، وإضافة ردود آلية بسيطة.
- أداة ShareThis: متخصصة أكثر في "أزرار المشاركة". تتيح لك إضافة شريط جانبي عائم يحتوي على أيقونة واتساب وفيسبوك وتويتر لمشاركة المقالات بسهولة.
مقارنة بين الإضافة اليدوية بالأكواد واستخدام أدوات الطرف الثالث
لتوضيح الصورة بشكل كامل ومساعدتك على اتخاذ القرار التقني السليم لمدونتك، نعقد هذه المقارنة السريعة:
| وجه المقارنة | الأكواد اليدوية (HTML/CSS) | أدوات الطرف الثالث (مثل GetButton) |
|---|---|---|
| سرعة الموقع (Performance) | سريعة جداً ولا تؤثر إطلاقاً على زمن تحميل الصفحة لأنها أكواد بسيطة مدمجة. | قد تؤدي إلى بطء طفيف لأنها تستدعي ملفات خارجية (External Scripts) من سيرفرات أخرى. |
| سهولة التعديل | تتطلب معرفة مبدئية بالأكواد لتغيير الألوان أو الأحجام أو الرسائل. | سهلة جداً، تعديل بصري عبر واجهة تحكم الموقع الموفر للأداة. |
| المميزات المتقدمة | محدودة بوظيفة فتح الرابط فقط. | تتبع تحليلات جوجل، رسائل ترحيب منبثقة، تحديد ساعات العمل، تصميمات متعددة. |
| التكلفة | مجانية 100% مدى الحياة، ولا تحتوي على علامات مائية. | النسخة المجانية غالباً تضع شعار الشركة (علامة مائية صغيرة)، وتحتاج دفع اشتراك لإزالتها. |
كيفية تخصيص ألوان وتصميم زر الواتساب باستخدام CSS
الجماليات تلعب دوراً مهماً في تشجيع الزائر على النقر. لون واتساب الرسمي هو الأخضر (الرمز اللوني #25D366). ومع ذلك، يمكنك باستخدام لغة التنسيق CSS تعديل الزر ليتماشى مع هوية مدونتك البصرية.
إذا أضفت الكود اليدوي، يمكنك التحكم في شكل الزر من خلال تعديل الخصائص التالية داخل سمة style="...":
- لتغيير حجم الزر: قم بتغيير قيمة
padding(مثلاًpadding: 20px;لزر أكبر). - لجعل الزر دائرياً بالكامل: استخدم الخاصية
border-radius: 50%;مع التأكد من أن الطول والعرض متساويان. - لإضافة تأثير ظل (3D): استخدم الخاصية
box-shadow: 0px 4px 6px rgba(0,0,0,0.3);ليعطي بروزاً جميلاً فوق المحتوى. - لتغيير موضعه في الشاشة: في الزر العائم، الخصائص
bottom: 20px;وright: 20px;تعني أن الزر يبعد 20 بيكسل عن الحافة السفلية واليمنى. يمكنك تغييرrightإلىleftليظهر على اليسار.
ملاحظة تسويقية 💡: في المواقع العربية (التي تبدأ من اليمين لليسار RTL)، يُفضل دائماً وضع الأزرار العائمة في أسفل اليسار، حتى لا يغطي الزر على شريط التمرير (Scrollbar) أو زر الصعود للأعلى (Back to top) الذي يتواجد عادة في اليمين.
أخطاء شائعة يجب تجنبها عند دمج واتساب في موقعك
بناءً على تحليل الكثير من المدونات، نجد بعض الأخطاء القاتلة التي يقع فيها أصحاب المواقع عند تطبيق زر تواصل واتساب، مما يؤدي إلى نتائج عكسية:
- استخدام رقم شخصي بحت 📌 تجنب وضع رقم هاتفك الشخصي الخاص بعائلتك. قم بتخصيص رقم لعملك واستخدم تطبيق WhatsApp Business لتتمكن من إعداد ردود تلقائية وعرض كتالوج خدماتك.
- كتابة الرقم بصيغة محلية 📌 الكثير ينسى رمز الدولة. الرابط
wa.me/012345678لن يعمل إطلاقاً وسيعطي الزائر صفحة خطأ، مما يعكس عدم احترافية موقعك. - حجم الزر المبالغ فيه على الهواتف 📌 بعض الأزرار تبدو جيدة على الكمبيوتر ولكنها تغطي ربع شاشة الموبايل وتعيق قراءة المقال. تأكد من اختبار موقعك على شاشة هاتفك بعد تركيب الكود.
- نسيان خاصية (Target="_blank") 📌 في الكود البرمجي الذي ذكرناه، وضعنا كود
target="_blank"وهو ضروري جداً. وظيفته هي فتح الواتساب في نافذة جديدة (Tab) بدلاً من إغلاق مدونتك. إغلاق مدونتك فجأة يرفع من معدل الارتداد (Bounce Rate) ويضر بترتيب موقعك في جوجل.
تأثير زر الواتساب على سرعة الموقع (SEO) وكيفية تحسينه
في عالم تحسين محركات البحث (السيو SEO)، سرعة الموقع تعتبر عامل تصنيف أساسي. الإكثار من الودجات الخارجية قد يضر بسرعتك. لذلك، يُنصح بشدة باستخدام الطريقة اليدوية (HTML/SVG) المذكورة في (القسم الرابع) من هذا المقال.
استخدام أكواد SVG المدمجة (كما في الكود المرفق) لعرض أيقونة الواتساب بدلاً من تحميل صورة خارجية بصيغة PNG أو JPG يقلل من طلبات الخادم (HTTP Requests)، مما يجعل المدونة تفتح بلمح البصر. علاوة على ذلك، زيادة بقاء المستخدم داخل الموقع وتفاعله الإيجابي عن طريق الواتساب يرسل إشارات إيجابية لجوجل بأن موقعك يقدم تجربة مستخدم (UX) ممتازة، مما يرفع من تصنيفات مقالاتك بشكل غير مباشر.
أهم الأسئلة الشائعة حول دمج واتساب في مدونات بلوجر
هل يؤثر زر واتساب على ظهور إعلانات أدسنس في بلوجر؟
لا، زر الواتساب المكتوب بأكواد HTML نظيفة لا يتعارض نهائياً مع إعلانات Google AdSense. ولكن يجب عليك الانتباه إلى عدم وضع الزر العائم فوق أماكن ظهور الإعلانات المنبثقة الثابتة (Anchor Ads) في أسفل الشاشة على الهواتف حتى لا تحدث نقرات غير شرعية تؤدي لتقييد حسابك.اقرأ حول - حل مشكلة عدم ظهور إعلانات أدسنس-الدليل الشامل
ماذا يحدث إذا نقر الزائر على الزر من جهاز الكمبيوتر؟
الرابط الذكي wa.me يتعرف تلقائياً على نوع الجهاز. إذا كان الزائر يتصفح من هاتفك الذكي، سيفتح تطبيق الواتساب مباشرة. أما إذا كان يتصفح من جهاز الكمبيوتر أو اللابتوب، فسيقوم بتوجيهه إلى صفحة (واتساب ويب - WhatsApp Web) ليتمكن من استكمال المحادثة عبر المتصفح أو عبر تطبيق واتساب المكتبي.
كيف يمكنني تتبع عدد النقرات على زر واتساب؟
لتتبع النقرات وتحليلها عبر (Google Analytics)، ستحتاج إلى إضافة كود تتبع للأحداث (Event Tracking) داخل كود HTML الخاص بالزر. بدلاً من ذلك، يمكنك استخدام خدمة تقصير الروابط مثل (Bitly) لتقصير رابط الواتساب ووضع الرابط المختصر في الزر، مما يتيح لك رؤية عدد النقرات من خلال لوحة تحكم Bitly بسهولة.
هل يمكنني إضافة أرقام متعددة في مدونة واحدة؟
نعم، يمكنك ذلك باستخدام الأدوات الخارجية (Third-party widgets) المتقدمة التي تتيح لك إظهار نافذة صغيرة عند النقر على الأيقونة تعرض عدة أقسام، مثل: (تواصل مع المبيعات - تواصل مع الدعم الفني)، وكل قسم يوجه الزائر إلى رابط wa.me ورقم مختلف.
إضافة زر مشاركة واتساب احترافي (متوافق مع جميع الأجهزة + تصميم جذاب)
إذا كنت تبحث عن طريقة احترافية فعلاً لإضافة زر مشاركة واتساب، فهذا الكود التالي يعتبر الأفضل لأنه:
- يعمل على جميع الأجهزة (Android - iPhone - كمبيوتر)
- يجلب عنوان المقال والرابط تلقائياً
- يحتوي على تصميم جذاب مع تأثيرات عند المرور (Hover)
- خفيف جداً ولا يؤثر على سرعة الموقع
📌 الكود الاحترافي الكامل
💡 لماذا هذا الكود أفضل؟
- يستخدم API الرسمي الخاص بواتساب
- يعرض عنوان المقال + الرابط تلقائياً
- يحتوي على SVG بدل الصور (أسرع في التحميل)
- تصميمه متجاوب مع جميع الشاشات
- 🚀 جرّب الآن: انسخ الكود بالأعلى وأضفه في مدونتك خلال دقيقتين فقط
اقرأ حول - دليل تفعيل واتساب بدون رقم هاتف
الخاتمة🙋 في النهاية، فهم كيفية إضافة زر مشاركة واتساب وتطبيقه في مدونتك على بلوجر ليس مجرد خطوة تقنية، بل هو قرار تسويقي ذكي يبني جسراً من الثقة والشفافية مع قُراءك. سواء اخترت دمج الكود البرمجي البسيط والخفيف بنفسك، أو استعنت بأدوات الطرف الثالث لسرعة الإنجاز، فإن النتيجة الحتمية هي زيادة ملحوظة في التفاعل وتحسين في تجربة المستخدم الشاملة. نرجو أن يكون هذا الدليل المرجعي قد وفر لك كل ما تحتاجه لتطبيق الفكرة باحترافية وأمان.
