Jak dodać logowanie społecznościowe do WordPress (prosty sposób)

Czy chcesz dodać loginy społecznościowe do twojej witryny internetowej WordPress?

Loginy społecznościowe umożliwiają odwiedzającym utworzenie konta w Twojej witrynie internetowej WordPress przy użyciu ich istniejących kont w mediach społecznościowych. Zamiast tworzyć nową nazwę użytkownika lub hasło, użytkownicy mogą po prostu zalogować się za pomocą Facebooka, Google lub innej platformy. Oszczędza to ich czas, zmniejsza tarcia i nadal zapewnia dostęp do ich nazwy / adresu e-mail do przyszłych celów marketingowych.

W tym artykule pokażemy, jak dodać logowanie społecznościowe do WordPress.

Dlaczego warto dodać logowanie społecznościowe do WordPressa?

Istnieje wiele powodów, dla których warto zezwolić na rejestrację użytkowników na twojej witrynie internetowej WordPress. Jeśli prowadzisz sklep internetowy, rejestracja użytkowników umożliwia kupującym zapisanie informacji o płatności i dostawie. Ułatwia im to ponowne dokonanie zakupu w przyszłości.

Rejestracja importerów jest również ważną częścią tworzenia witryny członkowskiej WordPress.

Jednak większość ludzi nie lubi wypełniać długich formularzy rejestracji użytkownika i pamiętać kolejnej nazwy użytkownika / hasła.

Loginy społecznościowe umożliwiają odwiedzającym utworzenie konta w twojej witrynie internetowej poprzez kliknięcie przycisku. Mogą użyć nazwy użytkownika i hasła ze swoich istniejących kont w mediach społecznościowych, takich jak dane logowania do Facebooka.

Ponieważ jest to tak wygodne, logowanie społecznościowe może zachęcić więcej osób do zarejestrowania się w twojej witrynie internetowej. Mając to na uwadze, zobaczmy, jak dodać logowanie społecznościowe do WordPress.

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Jak dodać logowanie społecznościowe do WordPress

Najprostszym sposobem na dodanie logowania front-end do twojej witryny internetowej WordPress jest użycie wtyczki Nextend Social Login and Register.

Ta darmowa wtyczka pozwala odwiedzającym logować się za pomocą Facebooka, Twittera lub Google.

Uwaga: Chcesz dodać logowanie społecznościowe dla witryny innej niż Facebook, Twitter lub Google? Istnieje również wersja pro Nextend Social Login, która dodaje logowanie społecznościowe dla wielu różnych witryn, w tym PayPal, Slack i TikTok.

Najpierw należy zainstalować i włączyć wtyczkę Nextend. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź do Ustawienia ” Nextend Social Login w obszarze administracyjnym WordPress. Na tym ekranie zobaczysz wszystkie różne opcje logowania społecznościowego, które możesz dodać do swojej witryny WordPress.

Proces dodawania logowania społecznościowego do twojej witryny będzie się różnić w zależności od tego, czy dodajesz logowanie do Facebooka, Twittera czy Google.

Przyjrzyjmy się Facebookowi jako przykładowi.

Aby dodać logowanie do Facebooka do twojej witryny internetowej WordPress, kliknij przycisk „Rozpocznij” pod logo Facebooka.

W tym momencie może pojawić się ostrzeżenie, że Facebook zezwala tylko na przekierowania HTTPS OAuth. Oznacza to, że twoja witryna musi korzystać z HTTPS, zanim będziesz mógł dodać logowanie przez Facebooka do WordPress. Aby to skonfigurować, zapoznaj się z naszym przewodnikiem na temat przełączania z HTTP na HTTPS w WordPress.

Gdy korzystasz już z protokołu HTTP, Twoim kolejnym zadaniem jest utworzenie aplikacji na Facebooku. Umożliwi to utworzenie klucza App Key i App Secret, które zostaną dodane do wtyczki Nextend.

Tworzenie aplikacji na Facebooku brzmi technicznie, ale nie martw się. Nie musisz znać żadnego kodu, a my przeprowadzimy Cię przez wszystkie kroki.

Aby utworzyć tę aplikację, musisz przełączać się między twoim kokpitem WordPress a witryną internetową Facebook Developers. Mając to na uwadze, dobrym pomysłem jest pozostawienie twojego kokpitu WordPress otwartego w obecnej, aktualnej karcie i przejście na stronę Facebook Developers w nowej karcie.

Na twojej karcie Facebook Developers wystarczy kliknąć przycisk „Create App”.

Teraz możesz wybrać rodzaj aplikacji. Ponieważ chcemy dodać logowanie społecznościowe do WordPressa, kliknij „Consumer”.

Następnie przewiń ekran do dołu i kliknij przycisk „Dalej”.

W polu „Wyświetlana nazwa” wpisz rodzaj nazwy, której chcesz używać dla aplikacji Facebook. Ta nazwa będzie wyświetlana odwiedzającym, więc warto użyć czegoś, co rozpoznają, na przykład nazwy Twojej witryny internetowej WordPress.

Następnie wpisz swój e-mail w polu „App contact e-mail”.

Jest to adres, którego Facebook użyje, aby ostrzec Cię o potencjalnych naruszeniach zasad i ograniczeniach aplikacji lub udostępnić informacje o tym, jak możesz odzyskać usunięte konto. Mając to na uwadze, warto wpisać rodzaj adresu e-mail, który regularnie sprawdzasz.

Jeśli masz wiele stron na Facebooku, być może utworzyłeś konto Facebook Business Manager. Umożliwia to członkom zespołu pełny lub częściowy dostęp do twoich stron na Facebooku bez konieczności udostępniania danych logowania.

Jeśli utworzyłeś konto Facebook Business Manager, możesz połączyć twoją nową aplikację z kontem menedżera, otwierając menu rozwijane „Konto biznesowe”. Następnie wystarczy wybrać menedżera konta z menu rozwijanego.

Jeśli nie masz Business Managera na Facebooku, możesz po prostu pozostawić to menu rozwijane ustawione na „Nie wybrano konta Business Managera”, co jest ustawieniem domyślnym.

Następnie możesz kliknąć przycisk „Utwórz aplikację”.

W wyświetlonym oknie wpisz rodzaj hasła do twojego konta na Facebooku, a następnie kliknij przycisk „Prześlij”.

Teraz możesz dodać produkty do aplikacji Facebook. Przejdź dalej i znajdź sekcję Facebook Login, a następnie kliknij przycisk „Set up”.

Następnie kliknij „Sieć”.

W polu Adres URL witryny wpisz adres URL twojej witryny internetowej.

Aby uzyskać właściwy adres URL, wystarczy przełączyć się z powrotem na kartę wyświetlającą twój kokpit WordPress.

Ten ekran zawiera szczegółowe instrukcje dotyczące odnośnika Nextend do Facebooka. Obejmuje to pokazanie dokładnego adresu URL, którego należy użyć.

Po wpisaniu adresu URL twojej witryny w polu „Adres URL witryny”, upewnij się, że kliknąłeś przycisk „Zapisz”, aby zapisać zmiany.

W menu po lewej stronie znajdź sekcję „Facebook Login” i kliknij „Ustawienia”.

Na tym ekranie należy wkleić prawidłowe przekierowanie oAuth. Aby uzyskać tę wartość, wystarczy przełączyć się z powrotem na twoją kartę WordPress.

Instrukcje te zawierają adres URL oznaczony jako „Ważne URI przekierowania OAuth”. Możesz skopiować ten adres URL.

Następnie przejdź z powrotem do witryny internetowej Facebook Developer i wklej adres URL w polu „Valid OAuth Redirect URIs”.

Następnie możesz kliknąć przycisk „Zapisz zmiany” u dołu.

W menu po lewej stronie kliknij Ustawienia ” Podstawowe.

W polu „App domain” wpisz nazwę domeny twojej witryny.

W polu Adres URL polityki prywatności musisz wpisać adres polityki prywatności twojej witryny internetowej. Ta polityka prywatności powinna ujawniać informacje, które zbierasz od odwiedzających i w jaki sposób planujesz wykorzystać te dane, w tym wszelkie informacje uzyskane z loginów społecznościowych.

Jeśli potrzebujesz pomocy przy tworzeniu tej ważnej strony, zapoznaj się z naszym przewodnikiem na temat dodawania polityki prywatności w WordPress.

Aby zachować zgodność z RODO, musisz dać użytkownikom możliwość usunięcia swojego konta w witrynie internetowej.

Istnieje wiele sposobów, aby umożliwić użytkownikom usunięcie ich kont WordPress, ale zawsze powinieneś udostępniać te instrukcje swoim odwiedzającym.

Aby ułatwić użytkownikom znalezienie tych informacji, należy kliknąć sekcję „Usuwanie danych użytkownika”, a następnie z rozwijanego menu wybrać „Adres URL instrukcji usuwania danych”.

Następnie możesz wpisać lub skopiować/wkleić adres URL, pod którym odwiedzający mogą znaleźć informacje o tym, jak usunąć swoje konto. Na przykład, możesz dodać instrukcje do twojej polityki prywatności lub strony FAQ.

Gdy już to zrobisz, otwórz menu rozwijane „Kategoria” i wybierz kategorię, która najlepiej reprezentuje sposób, w jaki planujesz używać logowania społecznościowego na swojej witrynie internetowej WordPress.

Na przykład, jeśli dodajesz logowanie przez Facebooka do twojego sklepu WooCommerce, zazwyczaj będziesz chciał kliknąć kategorię „Zakupy”.

Gdy już to zrobisz, następnym krokiem jest wybranie ikonki aplikacji. Ta ikonka będzie reprezentować twoją aplikację w App Center, czyli obszarze Facebooka, w którym użytkownicy mogą znaleźć nowe aplikacje.

Nie jest to szczególnie ważne dla naszej aplikacji, ale jest to wymóg, więc nadal będziesz musiał utworzyć ikonkę aplikacji.

Twoja ikonka aplikacji musi mieć rozmiar od 512 x 512 do 1024 x 1024 pikseli i przezroczyste tło. Podczas tworzenia tej ikonki nie można używać żadnych odmian logo, znaków towarowych ani ikon Facebooka, w tym jego marek WhatsApp, Oculus i Instagram.

Nie można również umieszczać tekstu „Facebook” lub „FB”.

Jeśli jeszcze jej nie masz, możesz łatwo stworzyć profesjonalnie wyglądającą ikonkę aplikacji Facebook za pomocą kreatora logo.

Po utworzeniu ikony aplikacji kliknij sekcję „App Icon”, a następnie wybierz plik z obrazkiem, którego chcesz użyć.

Następnie kliknij przycisk Zapisz zmiany.

Twoja aplikacja na Facebooku jest domyślnie ustawiona jako prywatna. Oznacza to, że jesteś jedyną osobą, która może logować się za pomocą Facebooka.

Zanim odwiedzający będą mogli utworzyć konto za pomocą Facebooka, musisz uruchomić twoją aplikację. Aby to zrobić, znajdź suwak „App Mode: Rozwój” i kliknij go, aby zmienić kolor suwaka z białego na niebieski.

Aplikacje na Facebooku mogą mieć „Standardowy dostęp” lub „Zaawansowany dostęp” do informacji o użytkowniku. Jeśli twoja aplikacja ma dostęp standardowy, odwiedzający nie będą mogli logować się za pomocą logowania społecznościowego Facebooka.

W przeszłości Facebook zmienił swoje domyślne ustawienia uprawnień, więc zawsze warto sprawdzić, czy twoja aplikacja ma odpowiednie uprawnienia do obsługi logowania społecznościowego.

W menu po lewej stronie kliknij Przegląd aplikacji ” Uprawnienia i funkcje.

Teraz znajdź uprawnienia „e-mail” i „public_profile”.

Aby zapewnić obsługę logowania społecznościowego, oba te uprawnienia muszą być oznaczone jako „Dostęp zaawansowany” i „Gotowe do użycia”, jak widać na poniższym obrazku.

Czy zamiast tego widzisz przyciski „Uzyskaj zaawansowany dostęp”? Oznacza to, że twoja aplikacja nie ma obecnie odpowiednich uprawnień do logowania społecznościowego.

W takim przypadku należy kliknąć przycisk „Uzyskaj dostęp zaawansowany”, a następnie postępować zgodnie z instrukcjami wyświetlanymi na ekranie.

Po uzyskaniu uprawnień dostępu zaawansowanego, kliknij Ustawienia ” Podstawowe w menu po lewej stronie.

W górnej części strony zobaczysz „Identyfikator aplikacji” i „Sekret aplikacji”.

Aby ujawnić sekret aplikacji, wystarczy kliknąć przycisk „Pokaż”, a następnie wpisać rodzaj hasła do twojego konta na Facebooku.

Witryna internetowa Facebook Developers zostanie teraz zaktualizowana, aby wyświetlać twoją aplikację w tajemnicy.

Następnym krokiem jest dodanie App Secret i App ID do twojej wtyczki Nextend. Aby to zrobić, przełącz się z powrotem do kokpitu WordPress.

Tutaj kliknij kartę „Ustawienia”. Teraz możesz wkleić identyfikator i sekret do pól „App ID” i „App secret” w twoim kokpicie WordPress.

Gdy to zrobisz, kliknij przycisk Zapisz zmiany.

Zanim przejdziesz dalej, warto sprawdzić, czy twój login społecznościowy jest poprawnie skonfigurowany. Aby to zrobić, wystarczy kliknąć przycisk Weryfikuj ustawienia.

Spowoduje to otwarcie wyskakującego okienka, w którym możesz wpisać swoją nazwę użytkownika i hasło do Facebooka. Jeśli poprawnie skonfigurowałeś logowanie społecznościowe, powinieneś teraz logować się do swojego bloga WordPress.

Nawet jeśli twój login społecznościowy działa, Nextend może nadal ostrzegać, że dostawca jest obecnie wyłączony. Jeśli zobaczysz to ostrzeżenie, po prostu kliknij przycisk Włącz.

Udało ci się dodać logowanie społecznościowe do twojej witryny internetowej WordPress. Następnym krokiem jest zmiana wyglądu i działania przycisku logowania na twojej witrynie.

Aby nadać styl przyciskowi logowania społecznościowego, wystarczy kliknąć kartę „Przyciski”. Zobaczysz teraz wszystkie różne style, których możesz użyć dla przycisku logowania społecznościowego.

Aby użyć innego stylu, wystarczy kliknąć przycisk opcji.

Gdy już to zrobisz, możesz zmienić tekst wyświetlany przez Nextend na tym przycisku, edytując tekst „Etykieta logowania”.

Do etykiety logowania można również zastosować podstawowe formatowanie. Na przykład na poniższym obrazku stosujemy efekt pogrubienia za pomocą tagów HTML <b> i </b>.

Oprócz tego masz również możliwość zmiany tekstu, którego ten przycisk używa jako „Etykiety odnośnika”. Jest to tekst, który Nextend wyświetla, gdy odwiedzający utworzył konto na twojej witrynie internetowej, ale nie powiązał tego konta z Facebookiem.

Możesz użyć etykiety odnośnika, aby zachęcić zalogowanych użytkowników do połączenia swojego konta z różnymi profilami w mediach społecznościowych.

Aby zmienić ten tekst, wystarczy wpisać go w polu „Etykieta odnośnika”. Po raz kolejny możesz użyć HTML, aby zastosować podstawowe formatowanie do tekstu etykiety.

Powinieneś również ułatwić odwiedzającym odłączenie swoich profili w mediach społecznościowych od Twojej witryny internetowej WordPress.

W tym miejscu pojawia się pole „Unlink label”.

W tym polu możesz wpisać rodzaj tekstu, który twoja witryna będzie wyświetlać zalogowanym użytkownikom, którzy już połączyli swoje konto społecznościowe z twoją witryną internetową.

Klikając na ten odnośnik, użytkownicy będą mogli zerwać połączenie między twoją witryną internetową WordPress a ich kontem w mediach społecznościowych.

Ustawienia te powinny być wystarczające dla większości witryn internetowych. Jeśli jednak wolisz stworzyć całkowicie własny przycisk, zawsze możesz zaznaczyć pole „Użyj niestandardowego przycisku”.

Powoduje to utworzenie nowej sekcji, w której można utworzyć twój własny przycisk logowania społecznościowego za pomocą kodu.

Gdy będziesz zadowolony ze stylu twojego przycisku, kliknij przycisk Zapisz zmiany.

Następnie kliknij kartę „Usage”. Nextend pokaże teraz wszystkie krótkie kody, których możesz użyć, aby dodać przycisk logowania społecznościowego do twojej witryny internetowej WordPress.

Te krótkie kody mogą tworzyć różne przyciski logowania. Aby utworzyć podstawowy przycisk logowania dla Facebooka, należy użyć następującego krótkiego kodu:

[nextend_social_login provider=”facebook”]

Poniższy obrazek przedstawia przykład tego, jak przycisk logowania społecznościowego będzie wyglądał na twojej witrynie.

Jak widać na karcie „Użycie”, istnieje kilka dodatkowych parametrów, które można dodać do twojego krótkiego kodu. Zmieni to wygląd lub działanie przycisku.

Jeśli chcesz utworzyć przycisk logowania społecznościowego, który nie ma etykiety tekstowej, możesz dodać parametr „ikonka”, na przykład [nextend_social_login provider=”facebook” style=”ikonka”].

Oto przykład tego, jak ten przycisk będzie wyglądał na twojej witrynie internetowej WordPress.

Gdy odwiedzający loguje się do twojej witryny za pomocą konta społecznościowego, możesz automatycznie przekierować go na stronę. Na tym ekranie znajduje się przykładowy krótki kod, który przekieruje użytkowników do witryny Nextend.

Możesz łatwo dostosować ten krótki kod, aby przekierowywał odwiedzającego do strony w twojej własnej witrynie internetowej WordPress.

Istnieje kilka innych parametrów, które możesz dodać do twojego krótkiego kodu, aby zobaczyć pełną listę parametrów kliknij odnośnik w dokumentacji wtyczki.

Po podjęciu decyzji, jakiego krótkiego kodu chcesz użyć, możesz dodać kod do dowolnej strony, wpisu lub obszaru gotowego na widżet. Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem dla początkujących, jak dodać krótki kod w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać logowanie społecznościowe do twojej witryny internetowej WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat najlepszych wtyczek mediów społecznościowych dla WordPress i jak śledzić odwiedzających twoją witrynę internetową WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.