אם אתם מפתחים אתר מן הסתם התבקשתם להוסיף לאתר כפתורי שיתוף. אם אתם מפתחי אתם בפלטפורמת WP אני מניחה שהדבר הראשון שאמרתם לעצמכם זה משהו כמו "אה, בטח יש איזשהו תוסף טוב שעושה את העבודה". בפוסט הזה נלמד איך להוסיף לאתר בקלי קלות כפתורי שיתוף לרשתות חברתיות, את מה אנחנו בעצם משתפים ועוד.
מהם כפתורי שיתוף?
מבחינת הHTML, כפתורי שיתוף הם לינקים לכל דבר ועניין. הhref של הקישור תלוי ברשת החברתית שבה תרצו לשתף. מומלץ להוסיף לקישורים שלכם את המאפיין target="_blank" או target="_new" על מנת שיפתחו בטאב או חלון חדש ולא באותו טאב שבו האתר שלכם.
לפני שתקבלו את הקישורים הנדרשים – כדאי לשים לב שהרבה פעמים המעצב או הלקוח מגדירים לכם בכפתורי השיתוף גם שיתוף ביוטיוב או באינסטגרם. אלו שתי רשתות חברתיות שבהן לא ניתן לשתף עמודים של אתר כי הן לא מבוססות על שיתוף של עמודים. זאת לעומת פייסבוק למשל.
נו, אז מה הקישור עצמו?
בדרך כלל כשהגולש לוחץ על כפתור/קישור שיתוף – הוא משתף את הקישור לעמוד, ולא טקסט או תמונה ספציפיים. אמנם ברשת החברתית יוצגו תמונה, כותרת ותקציר ולא סתם קישור. בהמשך הפוסט נדבר על המאפיינים שיש לתת לעמוד על מנת להציג ברשת כזו או אחרת נתונים כאלה ואחרים.
להלן רשימה של קישורים לשיתוף ברשתות החברתיות הנפוצות. שימו לב, במקום התווים URL – יש להכניס את כתובת העמוד שלכם (בהמשך אפרט איך עושים את זה באופן אוטומטי בפלטפורמת וורדפרס).
פייסבוק: https://www.facebook.com/sharer/sharer.php?u=URL
טוויטר: הקישור שלהם השתנה לפני תקופה, וכעת הקישור הנכון הוא
https://twitter.com/intent/tweet?text=URL
גוגל פלוס: https://plus.google.com/share?url=URL
לינקד אין: https://www.linkedin.com/shareArticle?mini=true&url=URL
ואיך אפשר בלי whatsApp. כאן זה קצת מעניין יותר. בגלל שזו אפליקציה שונה בדסקטופ ובמובייל – יש צורך להגדיר קישורים שונים עבור שתי הרזולוציות הללו.
עבור דסקטופ הקישור הוא https://web.whatsapp.com/send?text=URL
ועבור המובייל הקישור הוא https://whatsapp.com/send?text=URL
אכן דומה, אבל שונה…
לגבי שליחת קישור במייל, ניתן להגדיר שלחיצה על הקישור תפתח בטאב/חלון חדש מייל של הגולש, כאשר בנושא מופיע הקישור לעמוד. עושים את זה כך: mailto:?subject=URL.
אם תרצו שהקישור יהיה בגוף המייל ולא בנושא – פשוט תחליפו את subject בbody, באופן הזה: mailto:?body=URL
אם יש רשתות חברתיות נוספות שתרצו קישור שלהן – תוכלו לגגל את שם הרשת והמילים share link, לכתוב בטופס התגובה.
כפתורי שיתוף לדוגמה
בדרך כלל נשתמש בfontAwesome על מנת להוסיף את האייקונים של הרשתות. במקרים אחרים הסטודיו ידרוש שימוש בחיתוכים מהPSD או העיצוב שהוא מספק.
בדוגמה שכאן השתמשתי בfontAwesome. שימו לב לשתי סטים של כפתורים – בין הכותרת לתוכן, ובנוסף מופיעים כפתורים מרחפים, שזה מרשים לגמרי, אבל בסך הכל מדובר בposition: fixed. אם תגללו את העמוד למעלה ולמטה תוכלו לראות את הריחוף של הכפתורים, כך שהם מלווים אתכם לכל אורך הגלילה.
במעבר עכבר הוספתי לכפתורים גם אנימציה פשוטה, באמצעות transition, ולכפתורים שאינם נעוצים הוספתי גם tooltip.
הגדרת הנתונים להצגה ברשתות החברתיות לאחר שיתוף העמוד
כמו שצויין למעלה, הגולש משתף קישור לעמוד, ואנחנו צריכים להגדיר לרשתות השונות אילו נתונים – כותרת, תיאור ותמונה – להציג עבור הקישור ששותף. ההגדרה מתבצעת באמצעות תגי מטא (meta) שיוגדרו בתוך הhead של הHTML שלנו. תגיות אלו נותנות לרשתות החברתיות את כל המידע על הפוסט ששותף.
הרובוטים של הרשת החברתית סורקים את האתר דף אחרי דף (בדומה לרובוטים של גוגל), ועבור כל דף נשמרים הנתונים שנאספו מתגי המטא המדוברים. מספר נקודות לגבי זה:
- אם האתר שלנו מוגדר כמוסתר למנועי חיפוש – אם נבדוק את השיתוף שלו – יוצג קישור בלבד ולא הנתונים שאנחנו רוצים, למרות שמוגדרים תגי המטא. זאת בגלל שהרובוטים של פייסבוק לצורך העניין, לא נכנסים לאתר וסורקים את העמודים שלו.
- הסריקה לא מתבצעת בשניה שבה פרסמנו או עדכנו את הנתונים של העמוד. לכן לפעמים לא נראה את העדכון באופן מיידי ברשתות החברתיות, אלא רק לאחר יום-יומיים.
עבור שתי הנקודות שלעיל, בהמשך נלמד איך להכריח כמה רשתות חברתיות לסרוק עמודים באופן ידני. כך נוכל לבדוק את תקינות ההגדרות שלנו באופן מדויק יותר.
אנא ערכו היכרות עם תגי המטא הבאים
og:title – מגדיר את הכותרת של העמוד, כפי שתוצג
og:description – מגדיר את התיאור/תקציר של העמוד
og:image – מגדיר כמובן את התמונה.
לדוגמה בפוסט שאתם קוראים עכשיו, מוגדרות התגיות כך:
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="article" />
<meta property="og:title" content="הוספת כפתורי שיתוף ברשתות חברתיות - Cagdash בניית אתרים" />
<meta property="og:description" content="הוספה של כפתורי שיתוף לאתר מעולם לא היתה קלה יותר. לאחר שתקראו את הפוסט הזה תדעו בדיוק איך להוסיף לאתר שלכם כפתורי שיתוף ברשתות השונות, ואילו הגדרות לתת להם" />
<meta property="og:url" content="https://chani-k.co.il/?p=900" />
<meta property="og:site_name" content="Cagdash בניית אתרים" />כפי שניתן לראות, ישנן תגיות נוספות שנותנות מידע נוסף לרשתות החברתיות. תוכלו לשחק עם ההגדרות ולראות את ההשפעה שלהן על תוצאות השיתוף.
עבור טוויטר, יש צורך להגדיר בנפרד. כפי שניתן לראות בתגי המטא של הפוסט הנוכחי:
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="הוספה של כפתורי שיתוף לאתר מעולם לא היתה קלה יותר. לאחר שתקראו את הפוסט הזה תדעו בדיוק איך להוסיף לאתר שלכם כפתורי שיתוף ברשתות השונות, ואילו הגדרות לתת להם" /> <meta name="twitter:title" content="הוספת כפתורי שיתוף ברשתות חברתיות - Cagdash בניית אתרים" />
די פשוט. card מגדיר את סוג התצוגה. האם יוצג מלל עם תמונה קטנה בצד, או תמונה רחבה ומלל מתחתיה.
כיצד נעדכן את הנתונים באופן יזום?
כאמור, הסריקה מתבצעת אחת לכמה זמן, ולא כל דקה. על מנת לעדכן את הנתונים באופן יזום, או לבדוק מדוע התצוגה שונה ממה שהתכוונתם תוכלו להשתמש בכלים הבאים.
על מנת לעדכן נתונים במערכת פייסבוק, יש להכנס לקישור הזה: https://developers.facebook.com/tools/debug/
שימו לב להיכנס כגולשים רשומים.
כאן נכניס את הקישור לעמוד שאותו רוצים לבדוק, ונוכל לראות אם יש הערות (לדוגמה תמונה בגודל לא מתאים שלכן היא לא מוצגת, או שחסרה תגית מסויימת וכו'). במידה ופייסבוק עדיין לא סרק את העמוד תופיע לנו הודעה על כך, וכפתור scratch now. גם אם נרצה להכריח את פייסבוק לעדכן את הנתונים מחדש – יש כפתור עם הכיתוב scratch again, שלחיצה עליו תרענן את נתוני העמוד במסד הנתונים של פייסבוק.
בדרך כלל, איך שזה מתקבל בפייסבוק – כך מתקבל ומוצג גם בגוגל פלוס. הכלי שלהם הרבה יותר מפורט ומשמעותי: http://www.google.com/webmasters/tools/richsnippets. ממליצה להכנס ולבדוק. יש שם נתונים לא רק על השיתוף, אלא הגדרות נוספות בעמוד שהם ממליצים לתקן או להוסיף כדי לשפר את הסריקה ואת ה"איך אנחנו מבינים את העמוד שלך".
עבור בדיקה בטוויטר, ניכנס לקישור הבא: https://cards-dev.twitter.com/validator. גם כאן אתם צריכים להיות משתמשים רשומים של טוויטר על מנת לקבל גישה לעמוד.
הרעיון די דומה לפייסבוק. תקבלו תצוגה מקדימה של איך טוויטר קורא את העמוד, התגיות שהוא סרק ומצא, מה לא תקין במידה ויש, וכפתור של ריענון נתונים.
עד כאן לבינתיים. בפוסט הבא אפרט איך מבצעים את כל זה באמצעות מערכת וורדפרס, לאתרים שמבוססים על המערכת הזו.
כל שאלה שיש לכם, עניין לא פתור, הצעה לנושא שהייתם רוצים להרחיב עליו את הידע, בכל נושא שקשור לכפתורי שיתוף, CSS, jQuery, וורדפרס או מערכת השמש – תוכלו לפרט בטופס התגובה, ואשמח לקרוא ולהגיב.