دکمه های اشتراک گذاری اجتماعی می توانند به شما کمک کنند تا ترافیک بیشتری را به برنامه خود هدایت کنید.
رسانه های اجتماعی به بخشی جدایی ناپذیر از زندگی روزمره ما تبدیل شده اند و یک پلت فرم عالی برای کسب و کارها هستند تا به مشتریان خود دسترسی پیدا کنند. افزودن دکمه های اشتراک گذاری اجتماعی به برنامه React می تواند به شما کمک کند دسترسی و دید خود را در پلتفرم های رسانه های اجتماعی افزایش دهید. در این مقاله، یاد خواهید گرفت که چگونه می توانید به راحتی دکمه های اشتراک گذاری اجتماعی را در برنامه React خود اضافه کنید.
اضافه کردن دکمه های اشتراک گذاری اجتماعی به برنامه React شما
قبل از شروع، باید درک اولیه ای از React و نحوه راه اندازی یک برنامه React داشته باشید. همچنین باید یک حساب کاربری در پلتفرم(های) رسانه اجتماعی داشته باشید که می خواهید دکمه های اشتراک گذاری را برای آن اضافه کنید.
نصب ماژول react-share
چندین گزینه برای اضافه کردن دکمه های اشتراک گذاری اجتماعی به برنامه React شما وجود دارد. یکی از گزینه ها استفاده از ماژول react-share است که یک کتابخانه سبک وزن و آسان برای اضافه کردن دکمه های اشتراک گذاری اجتماعی به برنامه شما است. برای نصب ماژول react-share باید دستور زیر را اجرا کنید:
npm install react-share
ایجاد دکمه اشتراک گذاری در فیس بوک
هنگامی که ماژول react-share را نصب کردید، می توانید شروع به اضافه کردن دکمه های اشتراک گذاری اجتماعی به برنامه خود کنید. برای انجام این کار، باید اجزای مورد نیاز را از ماژول react-share وارد کنید. به عنوان مثال، برای افزودن دکمه اشتراک گذاری به فیس بوک، باید از کد زیر استفاده کنید:
import { FacebookShareButton } from 'react-share';
سپس می‌توانید از مؤلفه FacebookShareButton در کد خود برای اضافه کردن دکمه اشتراک‌گذاری به فیس بوک به برنامه خود استفاده کنید.
import React from 'react';
import { FacebookShareButton, FacebookIcon } from 'react-share';
const App = () => {
return (
<div>
<FacebookShareButton
url={'https://www.example.com'}
quote={'Dummy text!'}
hashtag="#muo"
>
<FacebookIcon size={32} round />
</FacebookShareButton>
</div>
);
};
export default App;
در زیر خروجی نمایش دکمه اشتراک گذاری در فیس بوک است:
در این کد ابتدا باید اجزای مورد نیاز را از ماژول react-share وارد کنید. پس از آن، یک جزء کاربردی به نام App ایجاد کنید که حاوی دکمه اشتراک گذاری فیس بوک است. مؤلفه FacebookShareButton برای ایجاد دکمه اشتراک گذاری و مؤلفه FacebookIcon برای نمایش آرم فیس بوک روی دکمه استفاده می شود.
کامپوننت FacebookShareButton دارای چندین پایه است که می توان از آنها برای سفارشی کردن دکمه اشتراک گذاری استفاده کرد. در این مثال، url، quote و props هشتگ را مشخص کرده ایم.
در نهایت، باید مؤلفه App را صادر کنید تا بتوان از آن در مکان‌های دیگر برنامه ما استفاده کرد. هنگامی که دکمه اشتراک‌گذاری در فیسبوک کلیک می‌شود، یک گفتگوی اشتراک‌گذاری از پیش پر شده با نشانی اینترنتی، نقل قول و هشتگ مشخص شده باز می‌شود.
ایجاد دکمه های اشتراک گذاری اجتماعی برای دیگر پلتفرم های رسانه های اجتماعی
علاوه بر فیسبوک، ماژول react-share همچنین اجزایی را برای اضافه کردن دکمه‌های اشتراک‌گذاری اجتماعی برای چندین پلتفرم دیگر از جمله اینستاگرام، توییتر، لینکدین و غیره فراهم می‌کند.
برای افزودن دکمه اشتراک گذاری اجتماعی برای پلتفرم دیگری، باید اجزای مورد نیاز را از ماژول react-share وارد کنید. به عنوان مثال، برای اضافه کردن دکمه اشتراک گذاری توییتر، ابتدا باید موارد زیر را وارد کنید:
import { TwitterShareButton, TwitterIcon } from 'react-share';
سپس می‌توانید از اجزای TwitterShareButton و TwitterIcon در کد خود برای اضافه کردن دکمه اشتراک‌گذاری به توییتر به برنامه خود استفاده کنید.
<TwitterShareButton
url={'https://www.example.com'}
quote={'Dummy text!'}
hashtag="#muo"
>
<TwitterIcon size={32} round />
</TwitterShareButton>
در زیر خروجی نمایش دکمه های اشتراک فیسبوک و اشتراک گذاری در توییتر است:
وقتی روی دکمه اشتراک‌گذاری توییتر کلیک می‌کنید، یک گفتگوی اشتراک‌گذاری از پیش پر شده با URL و نقل قول مشخص شده باز می‌شود.
سفارشی کردن دکمه ها
اجزای دکمه اشتراک گذاری اجتماعی دارای چندین پایه هستند که می توانید برای سفارشی کردن دکمه از آنها استفاده کنید. برخی از لوازم موجود عبارتند از:
- url: آدرس اینترنتی که در فیس بوک به اشتراک گذاشته می شود
- نقل قول: نقل قولی که در فیس بوک به اشتراک گذاشته می شود
- هشتگ: هشتگی که باید به پست اشتراک گذاری شده در فیس بوک اضافه شود
می‌توانید فهرست کاملی از دکمه‌ها و ابزارهای اشتراک‌گذاری اجتماعی موجود را در مستندات رسمی react-share بیابید.
با دکمه های اشتراک گذاری اجتماعی، بازدیدهای بیشتری از صفحه دریافت کنید
افزودن دکمه های اشتراک گذاری اجتماعی به برنامه React می تواند به شما کمک کند دسترسی و دید خود را در پلتفرم های رسانه های اجتماعی افزایش دهید. با سهولت اشتراک‌گذاری محتوای خود برای کاربران، می‌توانید به طور بالقوه به مخاطبان بیشتری دست پیدا کنید و ترافیک بیشتری را به برنامه خود هدایت کنید. علاوه بر این، دکمه های اشتراک گذاری اجتماعی نیز می توانند به افزایش اعتبار و اعتبار برند شما کمک کنند، زیرا اشتراک ها می توانند به عنوان توصیه هایی برای برنامه شما عمل کنند.