Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Друштвени медији су постали саставни део нашег свакодневног живота и одлична су платформа за предузећа да допру до својих купаца. Додавање дугмади за дељење на друштвеним мрежама вашој Реацт апликацији може вам помоћи да повећате свој досег и видљивост на платформама друштвених медија. У овом чланку ћете научити како можете лако да додате дугмад за дељење на друштвеним мрежама у вашој Реацт апликацији.

Додавање дугмади за друштвено дељење вашој апликацији Реацт

Пре него што почнете, мораћете да имате основно разумевање Реацт-а и како да то урадите подесите Реацт апликацију. Такође би требало да имате налог на платформи друштвених медија за коју желите да додате дугмад за дељење.

Инсталирање модула реацт-схаре

Постоји неколико доступних опција за додавање дугмади за друштвено дељење у вашу Реацт апликацију. Једна опција је да користите реаговати-делити

instagram viewer
модул, који је лагана библиотека која се лако користи за додавање дугмади за друштвено дељење вашој апликацији. Да бисте инсталирали реаговати-делити модул, потребно је да покренете следећу команду:

нпм инсталирај реаговати-Објави

Креирање дугмета Дели на Фацебоок-у

Једном када имате реаговати-делити модул инсталиран, можете почети да додајете дугмад за дељење на друштвеним мрежама у своју апликацију. Да бисте то урадили, мораћете да увезете потребне компоненте из реаговати-делити модул. На пример, да бисте додали дељење дугмету Фацебоок, потребно је да користите следећи код:

увоз { ФацебоокСхареБуттон } из'реагуј-дели';

Затим можете користити ФацебоокСхареБуттон компоненту у вашем коду да бисте својој апликацији додали дугме за дељење на Фацебоок.

увоз Реаговати из'реаговати';
увоз { ФацебоокСхареБуттон, ФацебоокИцон } из'реагуј-дели';
конст Апп = () => {
повратак (
<див>
 урл={' https://www.example.com'}
 куоте={'Лажни текст!'}
 хасхтаг="#муо"
 >
<ФацебоокИцонвеличина={32}округли />
ФацебоокСхареБуттон>
див>
 );
};
извозУобичајено Апликација;

Испод је излаз који приказује дугме за дељење на Фацебоок-у:

У овом коду прво морате да увезете потребне компоненте из реаговати-делити модул. Након тога креирајте функционалну компоненту под називом Апликација који садржи дугме за дељење на Фејсбуку. Тхе ФацебоокСхареБуттон компонента се користи за креирање дугмета за дељење и ФацебоокИцон компонента се користи за приказ Фацебоок логотипа на дугмету.

Тхе ФацебоокСхареБуттонкомпонента има неколико реквизита који се може користити за прилагођавање дугмета за дељење. У овом примеру смо навели урл, цитат, и хаштег реквизити.

Коначно, потребно је да извезете Апликација компоненту, тако да се може користити на другим местима наше апликације. Када се кликне дугме за дељење на Фацебоок-у, отвориће се унапред попуњен дијалог за дељење са наведеним урл, цитат, и хаштег.

Поред Фејсбука, реаговати-делити модул такође обезбеђује компоненте за додавање дугмади за друштвено дељење за неколико других платформи, укључујући Инстаграм, Твиттер, ЛинкедИн и још много тога.

Да бисте додали дугме за друштвено дељење за другу платформу, мораћете да увезете потребне компоненте из реаговати-делити модул. На пример, да бисте додали дугме за дељење на Твиттер-у, прво морате да увезете следеће:

увоз { ТвиттерСхареБуттон, ТвиттерИцон } из'реагуј-дели';

Затим можете користити ТвиттерСхареБуттон и ТвиттерИцон компоненте у вашем коду да бисте својој апликацији додали дугме за дељење на Твиттер-у.

 урл={' https://www.example.com'}
 куоте={'Лажни текст!'}
 хасхтаг="#муо"
>
<ТвиттерИцонвеличина={32}округли />
ТвиттерСхареБуттон>

Испод је излаз који приказује дугмад за дељење на Фацебоок-у и дељење на Твиттер-у:

Када кликнете на дугме за дељење на Твиттер-у, отвориће се унапред попуњен дијалог за дељење са наведеним УРЛ-ом и цитатом.

Прилагођавање дугмади

Компоненте дугмета за друштвено дељење имају неколико реквизита које можете користити да прилагодите дугме. Неки од доступних реквизита укључују:

  • урл: УРЛ који ће се делити на Фејсбуку
  • цитат: цитат који ће бити подељен на Фејсбуку
  • хаштег: хештег који ће бити додат у заједничку објаву на Фејсбуку

Можете пронаћи комплетну листу доступних дугмади и реквизита за дељење на друштвеним мрежама у реаговати-делити званична документација.

Добијте више приказа страница помоћу дугмади за дељење на друштвеним мрежама

Додавање дугмади за дељење на друштвеним мрежама вашој Реацт апликацији може вам помоћи да повећате свој досег и видљивост на платформама друштвених медија. Олакшавајући корисницима да деле ваш садржај, потенцијално можете да досегнете већу публику и усмерите више саобраћаја на своју апликацију. Поред тога, дугмад за дељење на друштвеним мрежама такође могу помоћи да се повећа кредибилитет и ауторитет вашег бренда, јер дељења могу да делују као препоруке за вашу апликацију.