קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

המדיה החברתית הפכה לחלק בלתי נפרד מחיי היומיום שלנו ומהווה פלטפורמה מצוינת לעסקים להגיע ללקוחות שלהם. הוספת כפתורי שיתוף חברתיים לאפליקציית React שלך יכולה לעזור לך להגדיל את טווח ההגעה והנראות שלך בפלטפורמות המדיה החברתית. במאמר זה, תלמד כיצד תוכל להוסיף בקלות לחצני שיתוף חברתי באפליקציית React שלך.

הוספת לחצני שיתוף חברתי לאפליקציית React שלך

לפני שתתחיל, תצטרך להיות בעל הבנה בסיסית של React וכיצד לעשות זאת הגדר אפליקציית React. כדאי שיהיה לך גם חשבון בפלטפורמת (ים) המדיה החברתית שעבורו ברצונך להוסיף כפתורי שיתוף.

התקנת מודול react-share

ישנן מספר אפשרויות זמינות להוספת כפתורי שיתוף חברתי לאפליקציית React שלך. אפשרות אחת היא להשתמש ב- להגיב-שתף מודול, שהוא ספרייה קלת משקל וקלה לשימוש להוספת כפתורי שיתוף חברתי לאפליקציה שלך. כדי להתקין את להגיב-שתף מודול, עליך להפעיל את הפקודה הבאה:

npm להתקין לְהָגִיב-לַחֲלוֹק

יצירת כפתור שיתוף לפייסבוק

ברגע שיש לך את להגיב-שתף מודול מותקן, אתה יכול להתחיל להוסיף לחצני שיתוף חברתי לאפליקציה שלך. לשם כך, תצטרך לייבא את הרכיבים הנדרשים מה-

instagram viewer
להגיב-שתף מודול. לדוגמה, כדי להוסיף כפתור שיתוף לפייסבוק, עליך להשתמש בקוד הבא:

יְבוּא { FacebookShareButton } מ'תגובה-שתף';

לאחר מכן תוכל להשתמש ב- FacebookShareButton רכיב בקוד שלך כדי להוסיף את כפתור השיתוף לפייסבוק לאפליקציה שלך.

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { FacebookShareButton, FacebookIcon } מ'תגובה-שתף';
const אפליקציה = () => {
לַחֲזוֹר (
<div>
 url={' https://www.example.com'}
 ציטוט={'טקסט דמה!'}
 hashtag="#muo"
 >
<סמל פייסבוקגודל={32}עִגוּל />
FacebookShareButton>
div>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

להלן הפלט המציג את כפתור השיתוף לפייסבוק:

בקוד זה, תחילה עליך לייבא את הרכיבים הנדרשים מה- להגיב-שתף מודול. לאחר מכן, צור רכיב פונקציונלי בשם אפליקציה שמכיל את כפתור השיתוף בפייסבוק. ה FacebookShareButton הרכיב משמש ליצירת כפתור השיתוף וה- סמל פייסבוק הרכיב משמש להצגת הלוגו של פייסבוק על הכפתור.

ה FacebookShareButtonלרכיב יש כמה אביזרים שניתן להשתמש בו כדי להתאים אישית את כפתור השיתוף. בדוגמה זו, ציינו את ה כתובת אתר, ציטוט, ו סולמית אביזרים.

לבסוף, עליך לייצא את ה אפליקציה רכיב, כך שניתן יהיה להשתמש בו במקומות אחרים באפליקציה שלנו. כאשר לוחצים על כפתור השיתוף לפייסבוק, הוא יפתח תיבת דו-שיח שיתוף מלאה מראש עם ההגדרה שצוינה כתובת אתר, ציטוט, ו סולמית.

בנוסף לפייסבוק, ה להגיב-שתף המודול מספק גם רכיבים להוספת כפתורי שיתוף חברתי עבור מספר פלטפורמות אחרות, כולל אינסטגרם, טוויטר, לינקדאין ועוד.

כדי להוסיף לחצן שיתוף חברתי עבור פלטפורמה אחרת, תצטרך לייבא את הרכיבים הנדרשים מה- להגיב-שתף מודול. לדוגמה, כדי להוסיף כפתור שיתוף בטוויטר, תחילה עליך לייבא את הדברים הבאים:

יְבוּא { TwitterShareButton, TwitterIcon } מ'תגובה-שתף';

לאחר מכן תוכל להשתמש ב- TwitterShareButton ו TwitterIcon רכיבים בקוד שלך כדי להוסיף את כפתור השיתוף לטוויטר לאפליקציה שלך.

 url={' https://www.example.com'}
 ציטוט={'טקסט דמה!'}
 hashtag="#muo"
>
<TwitterIconגודל={32}עִגוּל />
TwitterShareButton>

להלן הפלט המציג את כפתורי השיתוף לפייסבוק ושיתוף לטוויטר:

כאשר תלחץ על כפתור השיתוף בטוויטר, הוא יפתח תיבת דו-שיח שיתוף מלאה מראש עם כתובת האתר והציטוט שצוינו.

התאמה אישית של הכפתורים

לרכיבי כפתור השיתוף החברתי יש כמה אביזרים שבהם אתה יכול להשתמש כדי להתאים אישית את הכפתור. חלק מהאביזרים הזמינים כוללים:

  • כתובת אתר: כתובת ה-URL לשיתוף בפייסבוק
  • ציטוט: הציטוט שישתף בפייסבוק
  • סולמית: ההאשטאג שיתווסף לפוסט המשותף בפייסבוק

תוכל למצוא רשימה מלאה של כפתורי שיתוף חברתיים זמינים ואביזרים ב- להגיב-שתף תיעוד רשמי.

קבל יותר צפיות בדף עם לחצני שיתוף חברתיים

הוספת כפתורי שיתוף חברתיים לאפליקציית React שלך יכולה לעזור לך להגדיל את טווח ההגעה והנראות שלך בפלטפורמות המדיה החברתית. על ידי כך שיהיה קל למשתמשים לשתף את התוכן שלך, אתה יכול להגיע לקהל גדול יותר ולהביא יותר תנועה לאפליקציה שלך. בנוסף, כפתורי שיתוף חברתי יכולים גם לעזור להגביר את האמינות והסמכות של המותג שלך, שכן שיתופים יכולים לשמש כהמלצות לאפליקציה שלך.