ראיתי לאחרונה כמה פעמים באתרים שנדרש כפתור whatsApp עגול ירוק נעוץ, שבלחיצה פותח בחלון חדש אפשרות להתכתב עם מנהל האתר.
ברבים מהמקרים כדי לממש את הכפתור – התקינו תוסף ייעודי, ואם את מכירה אותי – זה בדיוק הדבר שגורם לי לכתוב פוסט 🙂 איך אפשר לצמצם את כמות התוספים בלי הרבה מידי עבודה.
יצירת כפתור מרחף
מאחר ואני רוצה שהכפתור יופיע בכל עמודי האתר, כדי ליצור אותו כחלק מהfooter. נוסיף ווידג'ט של כפתור, נעצב אותו, ונגדיר לו מיקום נעוץ. כעת נגדיר את המיקום המדוייק – מלמטה וימין/שמאל.
אפשר ליצור באופן הזה גם כפתורי שיתוף מרחפים. אבל בואי נתמקד בכפתור ליצירת קשר בwhatsApp הפעם.
הקישור עצמו
הלקוח ייתן לך את מספר הטלפון ליצירת קשר, ועליך קודם כל להמיר אותו למספר בינלאומי. בישראל – הקידומת תהיה 972 ואז המספר, בלי אפס בהתחלה. בנוסף יש להשמיט מקפים, פלוסים וסוגריים. נשאיר רק ספרות.
לדוגמה אם המספר הוא 050-1234567, המספר ליצירת קשר יהיה 972501234567.
הקישור המלא יהיה:
הגדירי לקישור פתיחה בטאב חדש, וזהו :).
קישור דינמי
את יכולה לאפשר ללקוח להזין את הקישור בעצמו, באיזשהו עמוד options page. (עוד על שליפת שדות מoptions page כתבתי באחד הפוסטים האחרונים).
בשליפה – שלפי עם תגיות דינמיות את השדה של המספר, ואז הוסיפי לפני השדה שנשלף את ההתחלה של הקישור:
כפתורי שיתוף מרחפים
לפני מלאאא זמן כתבתי פוסט על איך ליצור כפתורי שיתוף ברשתות חברתיות. הפוסט מיועד במקור למי שמשתמשים בקוד, אבל תוכלי לקחת משם את ההתנהגות הנדרשת גם עבורך. שלפי בתגיות דינמיות את הקישור של העמוד שבו נמצאים, והוסיפי לפני ואחרי את שאר התוכן הנדרש.
כאן תוכלי לקרוא מה הקישורים הנדרשים לרשתות השונות
וכאן תוכלי לקרוא איך להגדיר באמצעות yoastSEO תגיות מטא, שמאפשרות לך לשלוט איך תיראה התצוגה המקדימה של העמוד ברשתות החברתיות.
שימי ❤️ שבמקרה הזה כדי שהמיקום של הכפתורים יהיה תקין, עליך להכניס את כל הכפתורים לתוך אלמנט אחד (איזור או קונטיינר), ולאותו אלמנט הגדירי נעיצה ומיקום, ולא הגדרה נפרדת לכל כפתור.
בהצלחה רבה!