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

Dodanie logowania społecznościowego do Twojej witryny WordPress ułatwia odwiedzającym proces rejestracji. Pozwala użytkownikom na utworzenie konta za pomocą ich istniejących profili w mediach społecznościowych.

Zamiast więc ustawiać nową nazwę użytkownika i hasło, mogą oni logować się za pomocą platform takich jak Facebook lub Google.

Oszczędza to czas i zmniejsza kłopoty dla Twoich odwiedzających. Ponadto, za ich zgodą, możesz uzyskać dostęp do ich imienia i adresu e-mail.

Może to być świetny sposób na zbudowanie listy mailingowej, dzięki czemu możesz stale docierać do swoich odwiedzających i przyciągać ich z powrotem na swoją stronę internetową.

Poświęciliśmy trochę czasu na zbadanie najlepszego sposobu konfiguracji. W tym przewodniku pokażemy Ci, jak dodać logowanie społecznościowe do WordPressa.

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

Istnieje wiele powodów, dla których możesz chcieć zezwalaj na rejestrację użytkowników na swojej stronie WordPress.

Jeśli prowadzisz sklep internetowy, rejestracja użytkowników pozwala kupującym na zapisanie ich danych płatniczych i dostawy. Ułatwia im to ponowne zakupy w przyszłości.

Rejestracja użytkowników jest również ważną częścią tworzenia witryny członkowskiej WordPress. Pozwala ona na zbudowanie społeczności zaangażowanych użytkowników, którzy mają dostęp do ekskluzywnych treści.

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

Logowania społecznościowe pozwalają odwiedzającym na utworzenie konta w Twojej witrynie za pomocą jednego kliknięcia. Mogą oni 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 rejestracji na Twojej stronie internetowej. Mając to na uwadze, zobaczmy, jak dodać logowanie społecznościowe do WordPressa.

• How to Add Social Login to WordPress
  • Krok 1: Zainstaluj i aktywuj Nextend Social Login
  • Krok 2: Utwórz swoją aplikację deweloperską Facebook
  • Krok 3: Połącz swoją witrynę z aplikacją Facebook
  • Krok 4: Konfiguracja zasad i szczegółów aplikacji
  • Krok 5: Uruchomienie i sprawdzenie uprawnień aplikacji
  • Krok 6: Dodaj identyfikator aplikacji i sekret do WordPressa
  • Krok 7: Dostosuj przyciski logowania społecznościowego
  • Krok 8: Wyświetl przycisk logowania społecznościowego na swojej stronie
• Samouczek wideo
• Często zadawane pytania dotyczące logowania społecznościowego

Jak dodać logowanie przez media społecznościowe do WordPressa

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

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

Krok 1: Zainstaluj i aktywuj Nextend Social Login

Najpierw musisz zainstalować i aktywować wtyczkę Nextend. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Ustawienia » Nextend Social Login z obszaru administracyjnego WordPress. Na tym ekranie zobaczysz wszystkie dostępne 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 przez Facebooka, Twittera czy Google.

Przyjrzyjmy się na przykład Facebookowi.

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

W tym momencie możesz otrzymać ostrzeżenie od Facebooka. Dzieje się tak, ponieważ Facebook wymaga bezpiecznego połączenia do działania, co jest standardowym wymogiem bezpieczeństwa.

Oznacza to, że Twoja witryna musi używać protokołu HTTPS, zanim będziesz mógł dodać logowanie przez Facebooka do WordPressa. Aby to skonfigurować, zapoznaj się z naszym przewodnikiem na temat przełączania HTTP na HTTPS w WordPressie.

Krok 2: Utwórz swoją aplikację deweloperską Facebook

Gdy już korzystasz z HTTPS, Twoim kolejnym zadaniem jest utworzenie aplikacji Facebook. Pozwoli Ci to na wygenerowanie klucza aplikacji i sekretnego klucza aplikacji, które dodasz do wtyczki Nextend.

Utworzenie „aplikacji Facebook” brzmi technicznie, ale nie martw się. Nie oznacza to, że tworzysz aplikację mobilną. Jest to po prostu proces rejestracji Twojej witryny w Facebooku, który pozwala bezpiecznie połączyć ich system logowania z Twoją witryną.

Nie musisz znać żadnego kodu, a przeprowadzimy Cię przez wszystkie kroki.

Aby utworzyć tę aplikację, musisz przełączać się między panelem administracyjnym WordPress a witryną Meta for Developers. Mając to na uwadze, dobrym pomysłem jest pozostawienie otwartego panelu administracyjnego WordPress w bieżącej karcie i odwiedzenie Meta for Developers w nowej karcie.

W zakładce Meta for Developers po prostu kliknij przycisk „Utwórz aplikację”.

Następnie przejdziesz do procesu konfiguracji.

Pierwszą rzeczą, którą musisz zrobić, jest wybranie portfolio biznesowego, z którym chcesz połączyć nową aplikację. Domyślne ustawienie jest włączone dla opcji „Jeszcze nie chcę łączyć portfolio biznesowego”. Możesz pozostawić to bez zmian i kliknąć „Dalej”.

Na etapie „Przypadki użycia” wybierzesz, co ma robić Twoja aplikacja.

Ponieważ chcemy dodać logowanie społecznościowe do WordPressa, wybierz opcję „Uwierzytelnij i żądaj danych od użytkowników za pomocą logowania przez Facebook”.

Następnie kliknij przycisk „Dalej”.

Następnie w polu „Nazwa wyświetlana” wpiszmy nazwę, której chcesz użyć dla aplikacji Facebook. Ta nazwa będzie widoczna dla odwiedzających, więc warto użyć czegoś, co rozpoznają, na przykład tytułu Twojej witryny WordPress.

Po nazwaniu aplikacji możesz wpisać swój adres e-mail w polu „Adres e-mail kontaktu z aplikacją”. Jest to adres, którego Facebook użyje do ostrzegania o potencjalnych naruszeniach zasad i ograniczeniach aplikacji lub do udostępniania informacji o tym, jak odzyskać usunięte konto.

Mając to na uwadze, wpisz adres e-mail, który regularnie sprawdzasz. Kliknij „Dalej”, aby kontynuować.

Zobaczysz wtedy stronę przeglądu. Na tej stronie Meta for Developers wyświetli wszystkie ustawienia skonfigurowane dla nowej aplikacji.

Jeśli wszystko wygląda dobrze, po prostu kliknij przycisk „Utwórz aplikację”.

Powinieneś teraz zobaczyć wyskakujące powiadomienie z przyciskiem „Przejdź do panelu”.

Kliknijmy go.

Krok 3: Połącz swoją witrynę z aplikacją Facebook

Jesteś teraz gotowy do dodania produktów do aplikacji Facebook.

Stąd możesz kliknąć „Dostosuj dodawanie przycisku logowania przez Facebooka”.

Następnie przejdź do sekcji „Szybki start” z menu „Logowanie przez Facebooka”.

Stąd możesz wybrać opcję „Web”.

Spowoduje to otwarcie sekcji personalizacji.

W polu „Adres URL witryny” po prostu wpisz adres URL swojej witryny.

Upewnij się, że masz właściwy adres URL. Nawet drobny błąd spowoduje niepowodzenie połączenia i prawdopodobnie zobaczysz komunikat o błędzie, taki jak „nieprawidłowy adres URL przekierowania”.

Aby to zrobić, po prostu przełącz się z powrotem do karty, na której wyświetlany jest Twój panel WordPress. Ten ekran zawiera szczegółowe instrukcje dotyczące łączenia Nextend z Facebookiem, w tym dokładny adres URL, którego powinieneś użyć.

Po wpisaniu adresu URL swojej witryny w polu „Adres URL witryny” upewnij się, że klikniesz przycisk „Zapisz”, aby zapisać zmiany.

Następnie przejdźmy do sekcji „Ustawienia”.

Na tym ekranie będziesz musiał wkleić prawidłowy adres przekierowania oAuth. Aby uzyskać tę wartość, po prostu przełącz się z powrotem do swojej karty WordPress.

Te instrukcje zawierają adres URL zatytułowany „Valid OAuth redirect URIs”. Możesz skopiować ten adres URL.

Następnie przełączmy się z powrotem na stronę Meta for Developers i wklejmy adres URL w pole „Redirect URI to Check”.

Następnie jesteś gotowy, aby kliknąć przycisk „Zapisz zmiany” na dole.

Krok 4: Konfiguracja zasad i szczegółów aplikacji

Po zakończeniu przejdź do Ustawienia » Podstawowe w menu po lewej stronie.

W polu „Domena aplikacji” wpisz po prostu nazwę domeny swojej witryny.

W polu „Adres URL polityki prywatności” musisz wpisać adres polityki prywatności swojej witryny.

Ta polityka prywatności powinna ujawniać informacje, które zbierasz od odwiedzających i jak planujesz wykorzystać te dane, w tym wszelkie informacje uzyskane z logowań społecznościowych.

Jeśli potrzebujesz pomocy w tworzeniu tej ważnej strony, zapoznaj się z naszym przewodnikiem jak dodać politykę prywatności w WordPress.

Aby zapewnić zgodność z RODO, musisz zezwolić użytkownikom na usuwanie ich kont z Twojej witryny.

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

Aby pomóc użytkownikom znaleźć te informacje, kliknij sekcję „Usuwanie danych użytkownika”, a następnie wybierz z menu rozwijanego opcję „URL instrukcji usuwania danych”.

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

Po wykonaniu tej czynności, będziesz chciał otworzyć menu rozwijane „Kategoria” i wybrać kategorię, która najlepiej odzwierciedla sposób, w jaki planujesz używać logowania społecznościowego na swojej stronie WordPress.

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

Po wykonaniu tej czynności następnym krokiem jest wybór ikony aplikacji. Ta ikona będzie reprezentować Twoją aplikację w „Centrum aplikacji”, które jest obszarem 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ć ikonę aplikacji.

Ikona Twojej aplikacji musi mieć przezroczyste tło i mieć rozmiar od 512 x 512 do 1024 x 1024 pikseli. Tworząc tę ikonę, nie możesz używać żadnych wariantów logo, znaków towarowych ani ikon Facebooka, w tym marek WhatsApp, Oculus i Instagram.

Nie możesz również używać żadnego tekstu „Facebook” ani „FB”.

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

Po utworzeniu ikony aplikacji przejdź do sekcji „Ikona aplikacji” i wybierz plik obrazu, którego chcesz użyć.

Po wszystkim możesz kliknąć przycisk „Zapisz zmiany”.

Krok 5: Uruchomienie i sprawdzenie uprawnień aplikacji

Twoja aplikacja Facebook jest domyślnie ustawiona jako prywatna, co oznacza, że tylko Ty możesz się logować za pomocą Facebooka.

Zanim Twoi odwiedzający będą mogli utworzyć konto za pomocą Facebooka, musisz udostępnić swoją aplikację. Aby to zrobić, znajdź suwak „Tryb aplikacji: Rozwój” i kliknij go, aby udostępnić.

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

W przeszłości Facebook zmieniał domyślne ustawienia uprawnień, dlatego zawsze warto sprawdzić, czy Twoja aplikacja ma odpowiednie uprawnienia do obsługi logowania społecznościowego.

W menu po lewej stronie przejdźmy do sekcji „Uprawnienia”.

Teraz przyjrzyj się uprawnieniom „email” i „public_profile”.

Aby umożliwić logowanie społecznościowe, oba te uprawnienia muszą być oznaczone jako „Dostęp zaawansowany” i „Gotowe do użycia”, jak widać na poniższym obrazku.

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

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

Po uzyskaniu uprawnień „Advanced Access” przejdź do Ustawienia aplikacji » Podstawowe z menu po lewej stronie.

Na górze strony zobaczysz „ID aplikacji” i „Sekret aplikacji”.

Aby ujawnić „App secret”, po prostu kliknij przycisk „Pokaż”. Następnie możesz wpisać hasło do swojego konta na Facebooku. Witryna Meta for Developers zaktualizuje się, aby wyświetlić Twój „App secret”.

Krok 6: Dodaj identyfikator aplikacji i sekret do WordPressa

Następnym krokiem jest dodanie „App secret” i „App ID” do wtyczki Nextend. Aby to zrobić, przełączmy się z powrotem do panelu administracyjnego WordPress.

Stąd przejdź do zakładki „Ustawienia” i wklej identyfikator oraz sekret w polach „Identyfikator aplikacji” i „Sekret aplikacji” w swoim panelu WordPress.

Gdy to zrobisz, kliknij przycisk „Zapisz zmiany”.

Zanim przejdziesz dalej, warto sprawdzić, czy Twoje logowanie społecznościowe jest poprawnie skonfigurowane. Aby to zrobić, po prostu kliknij przycisk „Verify Settings”.

Otworzy się okno podręczne, 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 być zalogowany do swojego bloga WordPress.

Nawet jeśli logowanie społecznościowe działa, Nextend może nadal ostrzegać, że dostawca jest obecnie wyłączony. Jeśli widzisz to ostrzeżenie, po prostu kliknij przycisk „Włącz”.

Gratulacje, wykonałeś najtrudniejszą część i pomyślnie dodałeś logowanie społecznościowe do swojej strony WordPress!

Krok 7: Dostosuj przyciski logowania społecznościowego

Teraz przejdźmy do najprzyjemniejszej części: dostosujmy wygląd i działanie przycisku logowania na Twojej stronie.

Aby dostosować styl przycisku logowania społecznościowego, po prostu kliknij zakładkę „Przyciski”. Zobaczysz wtedy wszystkie różne style, których możesz użyć.

Aby użyć innego stylu, możesz kliknąć, aby wybrać jego przycisk radiowy.

Po wykonaniu tej czynności możesz edytować tekst „Etykieta logowania” tego przycisku, aby zmienić tekst, który wyświetla Nextend.

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

Masz również możliwość zmiany tekstu, którego ten przycisk używa dla swojej „Etykiety linku”. Jest to tekst, który Nextend wyświetla, gdy odwiedzający utworzył konto na Twojej stronie, ale nie połączył tego konta z Facebookiem.

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

Aby zmienić ten tekst, po prostu wpisz go w polu „Etykieta linku”. Ponownie, możesz użyć HTML, aby zastosować podstawowe formatowanie do tekstu etykiety.

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

Tutaj pojawia się pole „Etykieta rozłączenia”.

W tym polu możesz wpisać tekst, który Twoja witryna wyświetli zalogowanym użytkownikom, którzy już połączyli swoje konta społecznościowe z Twoją witryną.

Klikając w ten link, użytkownicy mogą rozłączyć połączenie między Twoją witryną WordPress a ich kontami w mediach społecznościowych.

Te ustawienia powinny wystarczyć dla większości stron internetowych.

Jeśli jednak wolisz utworzyć całkowicie niestandardowy przycisk, zawsze możesz zaznaczyć pole „Użyj niestandardowego przycisku”. Dodaje to nową sekcję, w której możesz utworzyć własny przycisk logowania społecznościowego za pomocą kodu.

Gdy będziesz zadowolony z wyglądu swojego przycisku, możesz kliknąć przycisk „Zapisz zmiany”.

Krok 8: Wyświetl przycisk logowania społecznościowego na swojej stronie

Następnie przejdź do zakładki „Użycie”.

Nextend wyświetli teraz wszystkie skróty, których możesz użyć do dodania przycisku logowania społecznościowego do swojej witryny WordPress.

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

[nextend_social_login provider="facebook"]

Poniższy obraz pokazuje przykład tego, jak ten przycisk logowania społecznościowego będzie wyglądał na Twojej stronie.

Jak widać w zakładce „Użycie”, istnieje kilka dodatkowych parametrów, które można dodać do swojego shortcode. Zmieni to wygląd lub działanie przycisku.

Jeśli chcesz utworzyć przycisk logowania społecznościowego bez etykiety tekstowej, możesz dodać parametr „icon”, na przykład [nextend_social_login provider="facebook" style="icon"]

Oto przykład, jak ten przycisk będzie wyglądał na Twojej stronie WordPress.

Kiedy odwiedzający zaloguje się na Twoją stronę za pomocą konta społecznościowego, możesz automatycznie przekierować go na stronę. Ten ekran zawiera przykładowy skrócony kod, który przekieruje użytkowników na stronę Nextend.

Możesz łatwo dostosować ten skrócony kod, aby przekierować odwiedzających na stronę w Twojej witrynie WordPress.

Możesz dodać kilka innych parametrów do swojego skróconego kodu. Aby zobaczyć pełną listę parametrów, możesz kliknąć link do dokumentacji wtyczki.

Po wybraniu shortcode, który chcesz użyć, możesz dodać kod do dowolnej strony, wpisu lub obszaru gotowego na widżety. Instrukcje krok po kroku znajdziesz w naszym poradniku dla początkujących na temat dodawania shortcode w WordPressie.

Samouczek wideo

Jeśli nie jesteś fanem pisemnych instrukcji, obejrzyj nasz samouczek wideo o tym, jak dodać logowanie społecznościowe do WordPressa:

Subskrybuj WPBeginner

Często zadawane pytania dotyczące logowania społecznościowego

Oto kilka pytań, które często zadają nasi czytelnicy dotyczące dodawania logowania społecznościowego do Twojej witryny WordPress:

Czy mogę wybrać, za pomocą których sieci społecznościowych użytkownicy mogą się logować?

Tak, większość wtyczek logowania społecznościowego, w tym Nextend Social Login & Register, pozwala wybrać, które sieci oferować.

Możesz włączyć tylko te, które preferuje Twoja publiczność, takie jak Google i Facebook, i ukryć inne. Na przykład, jeśli celujesz w profesjonalną publiczność, możesz włączyć LinkedIn, podczas gdy Google i Facebook są bardziej popularne wśród ogólnych użytkowników.

Czy potrzebuję programisty do skonfigurowania logowania społecznościowego?

Nie, możesz to zrobić samodzielnie, bez pisania kodu. Większość wtyczek do logowania społecznościowego dla WordPressa jest przyjazna dla początkujących i oferuje szczegółową dokumentację.

Niektóre wtyczki są nawet wyposażone we wbudowane kreatory konfiguracji, które przeprowadzą Cię przez proces tworzenia kluczy aplikacji z platform takich jak Google czy Facebook. Wymaga to kilku dodatkowych kroków, ale wszystko zazwyczaj sprowadza się do kopiuj-wklej.

Czy dodanie logowania społecznościowego spowolni moją stronę internetową?

Dodanie logowania społecznościowego nie spowolni Twojej witryny, jeśli używasz dobrze napisanego wtyczki.

Popularne narzędzia, takie jak Nextend Social Login & Register, są zoptymalizowane pod kątem wydajności i ładują skrypty tylko wtedy, gdy są potrzebne.

Niemniej jednak, dobrym pomysłem jest monitorowanie szybkości witryny po instalacji. Jeśli zauważysz jakiekolwiek opóźnienia, rozważ użycie wtyczek wydajnościowych lub rozwiązania buforującego, aby Twoja witryna działała szybko.

Czy logowanie społecznościowe jest bezpieczne dla mojej witryny WordPress?

Tak, logowanie społecznościowe jest bezpieczne, jeśli korzystasz z zaufanych wtyczek i utrzymujesz je zaktualizowane.

Ponieważ logowanie jest obsługiwane przez duże platformy, takie jak Google lub Facebook, Twoja witryna nie musi przechowywać ani zarządzać hasłami użytkowników.

Jednakże, nadal zalecamy używanie HTTPS i przestrzeganie najlepszych praktyk dotyczących bezpieczeństwa WordPress, aby wszystko było bezpieczne.

Czy mogę zezwolić na logowanie społecznościowe w witrynach WooCommerce lub członkowskich?

Absolutnie! Logowanie społecznościowe świetnie działa z WooCommerce, BuddyPress, MemberPress i innymi.

Pomaga klientom i członkom szybko się logować i zmniejsza porzucanie koszyka lub problemy z rejestracją. Wiele wtyczek logowania społecznościowego oferuje nawet wbudowaną integrację z popularnymi wtyczkami, dzięki czemu nie potrzebujesz żadnej dodatkowej konfiguracji.

Co się stanie, jeśli użytkownik zaloguje się za pomocą logowania społecznościowego, a następnie później użyje logowania przez e-mail?

W większości przypadków wtyczka automatycznie połączy ich konta.

Na przykład, jeśli użytkownik zarejestruje się za pomocą konta Google, używając adresu e-mail „jane.doe@example.com”, a ma już konto użytkownika WordPress z tym samym adresem e-mail, wtyczka rozpozna dopasowanie i połączy oba.

Zapobiega to tworzeniu zduplikowanych kont. Zawsze jednak warto przetestować tę funkcję, aby zobaczyć, jak dokładnie Twoja wtyczka ją obsługuje, zanim przejdziesz do trybu produkcyjnego.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać logowanie społecznościowe do swojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych wtyczkach mediów społecznościowych dla WordPress lub samouczkiem na temat jak dodać CAPTCHA w formularzu logowania i rejestracji WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.