القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

أصبحت وسائل التواصل الاجتماعي جزءًا لا يتجزأ من حياتنا اليومية وهي منصة رائعة للشركات للوصول إلى عملائها. يمكن أن تساعدك إضافة أزرار المشاركة الاجتماعية إلى تطبيق React في زيادة وصولك وظهورك على منصات الوسائط الاجتماعية. في هذه المقالة ، ستتعلم كيف يمكنك بسهولة إضافة أزرار المشاركة الاجتماعية في تطبيق React.

إضافة أزرار المشاركة الاجتماعية إلى تطبيق React الخاص بك

قبل البدء ، ستحتاج إلى فهم أساسي لـ React وكيفية ذلك قم بإعداد تطبيق React. يجب أن يكون لديك أيضًا حساب على منصة (منصات) الوسائط الاجتماعية التي تريد إضافة أزرار مشاركة لها.

تثبيت وحدة رد فعل-مشاركة

هناك العديد من الخيارات المتاحة لإضافة أزرار المشاركة الاجتماعية إلى تطبيق React الخاص بك. خيار واحد هو استخدام رد فعل حصة الوحدة النمطية ، وهي مكتبة خفيفة الوزن وسهلة الاستخدام لإضافة أزرار المشاركة الاجتماعية إلى تطبيقك. لتثبيت ملف رد فعل حصة الوحدة النمطية ، تحتاج إلى تشغيل الأمر التالي:

npm ثَبَّتَ تتفاعل-يشارك
instagram viewer

إنشاء زر مشاركة على Facebook

بمجرد حصولك على ملف رد فعل حصة الوحدة النمطية المثبتة ، يمكنك البدء في إضافة أزرار المشاركة الاجتماعية إلى تطبيقك. للقيام بذلك ، ستحتاج إلى استيراد المكونات المطلوبة من ملف رد فعل حصة وحدة. على سبيل المثال ، لإضافة مشاركة إلى زر Facebook ، تحتاج إلى استخدام الكود التالي:

يستورد {الفيس بوكزر} من"رد فعل المشاركة";

يمكنك بعد ذلك استخدام ملف الفيس بوكزر مكون في التعليمات البرمجية الخاصة بك لإضافة زر المشاركة إلى Facebook إلى تطبيقك.

يستورد تتفاعل من'تتفاعل';
يستورد {فيسبوكبوتون ، FacebookIcon} من"رد فعل المشاركة";
مقدار ثابت التطبيق = () => {
يعود (
<شعبة>
 url = {' https://www.example.com'}
 اقتباس = {"نص وهمي!"}
 علامة التجزئة ="#muo"
 >
<الفيسبوكمقاس={32}دائري />
الفيس بوكزر>
شعبة>
 );
};
يصدّرتقصير برنامج؛

يوجد أدناه الإخراج الذي يعرض زر المشاركة على Facebook:

في هذا الرمز ، يجب عليك أولاً استيراد المكونات المطلوبة من ملف رد فعل حصة وحدة. بعد ذلك ، قم بإنشاء مكون وظيفي يسمى برنامج الذي يحتوي على زر مشاركة Facebook. ال الفيس بوكزر مكون يستخدم لإنشاء زر المشاركة و الفيسبوك يتم استخدام المكون لعرض شعار Facebook على الزر.

ال الفيس بوكزرالمكون لديه العديد من الدعائم التي يمكن استخدامها لتخصيص زر المشاركة. في هذا المثال ، حددنا الامتداد عنوان url, يقتبس، و الوسم الدعائم.

أخيرًا ، تحتاج إلى تصدير ملف برنامج ، بحيث يمكن استخدامه في أماكن أخرى من تطبيقنا. عند النقر فوق الزر "مشاركة على Facebook" ، سيتم فتح مربع حوار مشاركة مملوء مسبقًا مع المحدد عنوان url, يقتبس، و الوسم.

بالإضافة إلى Facebook ، فإن رد فعل حصة توفر الوحدة النمطية أيضًا مكونات لإضافة أزرار المشاركة الاجتماعية للعديد من الأنظمة الأساسية الأخرى ، بما في ذلك Instagram و Twitter و LinkedIn والمزيد.

لإضافة زر مشاركة اجتماعية لمنصة مختلفة ، ستحتاج إلى استيراد المكونات المطلوبة من ملف رد فعل حصة وحدة. على سبيل المثال ، لإضافة زر مشاركة Twitter ، تحتاج أولاً إلى استيراد ما يلي:

يستورد {TwitterIcon} ، الزر TwitterIcon} من"رد فعل المشاركة";

يمكنك بعد ذلك استخدام ملف التغريد و تويتر المكونات الموجودة في التعليمات البرمجية الخاصة بك لإضافة زر المشاركة إلى Twitter إلى تطبيقك.

 url = {' https://www.example.com'}
 اقتباس = {"نص وهمي!"}
 علامة التجزئة ="#muo"
>
<تويترمقاس={32}دائري />
التغريد>

يوجد أدناه الإخراج الذي يعرض المشاركة على Facebook والمشاركة على أزرار Twitter:

عند النقر فوق زر مشاركة Twitter ، سيفتح مربع حوار مشاركة مملوء مسبقًا بعنوان URL المحدد والاقتباس.

تخصيص الأزرار

تحتوي مكونات زر المشاركة الاجتماعية على العديد من الدعائم التي يمكنك استخدامها لتخصيص الزر. تتضمن بعض الدعائم المتوفرة ما يلي:

  • عنوان url: عنوان URL المراد مشاركته على Facebook
  • يقتبس: الاقتباس الذي سيتم مشاركته على Facebook
  • الوسم: علامة التصنيف المراد إضافتها إلى المنشور المشترك على Facebook

يمكنك العثور على قائمة كاملة بأزرار ودعائم المشاركة الاجتماعية المتاحة في رد فعل حصة الوثائق الرسمية.

احصل على المزيد من مشاهدات الصفحة باستخدام أزرار المشاركة الاجتماعية

يمكن أن تساعدك إضافة أزرار المشاركة الاجتماعية إلى تطبيق React في زيادة وصولك وظهورك على منصات الوسائط الاجتماعية. من خلال تسهيل مشاركة المستخدمين للمحتوى الخاص بك ، من المحتمل أن تتمكن من الوصول إلى جمهور أكبر وجذب المزيد من الزيارات إلى تطبيقك. بالإضافة إلى ذلك ، يمكن أن تساعد أزرار المشاركة الاجتماعية أيضًا في زيادة مصداقية وسلطة علامتك التجارية ، حيث يمكن أن تكون المشاركات بمثابة توصيات لتطبيقك.