Hur man lägger till social inloggning till WordPress (det enkla sättet)

Att lägga till sociala inloggningar på din WordPress-webbplats gör registreringsprocessen enklare för dina besökare. Det gör det möjligt för användare att skapa ett konto med sina befintliga sociala medieprofiler.

Så istället för att skapa ett nytt användarnamn och lösenord kan de logga in med plattformar som Facebook eller Google.

Detta sparar tid och minskar besväret för dina besökare. Dessutom kan du med deras tillstånd få tillgång till deras namn och e-postadress.

Detta kan vara ett utmärkt sätt att bygga en e-postlista så att du kan fortsätta att nå dina besökare och få dem tillbaka till din webbplats.

Vi har ägnat en del tid åt att undersöka det bästa sättet att konfigurera detta. Och i den här guiden visar vi dig hur du lägger till sociala inloggningar till WordPress.

Varför lägga till social inloggning till WordPress?

Det finns många anledningar till varför du kanske vill tillåta användarregistrering på din WordPress-webbplats.

Om du driver en nätbutik, tillåter användarregistrering kunder att spara sin betalnings- och leveransinformation. Detta gör det enklare för dem att handla igen i framtiden.

Användarregistrering är också en viktig del av att skapa en WordPress-medlemskapswebbplats. Det gör att du kan bygga en gemenskap av engagerade användare som har tillgång till exklusivt innehåll.

De flesta tycker dock inte om att fylla i långa registreringsformulär och komma ihåg ytterligare en kombination av användarnamn och lösenord.

Sociala inloggningar låter besökare skapa ett konto på din webbplats med bara ett enda klick. De kan använda användarnamnet och lösenordet från sina befintliga sociala mediekonton, som sina Facebook-inloggningsuppgifter.

Eftersom det är så bekvämt kan social inloggning uppmuntra fler att registrera sig på din webbplats. Med det i åtanke, låt oss se hur du kan lägga till en social inloggning till WordPress.

• How to Add Social Login to WordPress
  • Steg 1: Installera och aktivera Nextend Social Login
  • Steg 2: Skapa din Facebook-utvecklarapp
  • Steg 3: Koppla din webbplats till Facebook-appen
  • Steg 4: Konfigurera apppolicyer och detaljer
  • Steg 5: Gå live och kontrollera appbehörigheter
  • Steg 6: Lägg till app-ID och hemlighet i WordPress
  • Steg 7: Anpassa dina sociala inloggningsknappar
  • Steg 8: Visa knappen för social inloggning på din webbplats
• Videohandledning
• Vanliga frågor om social inloggning

Hur man lägger till social inloggning i WordPress

Det enklaste sättet att lägga till en frontend-inloggning på din WordPress-webbplats är att använda pluginet Nextend Social Login and Register.

Detta gratis plugin låter besökare logga in med Facebook, Twitter eller Google.

Steg 1: Installera och aktivera Nextend Social Login

Först måste du installera och aktivera Nextend-pluginet. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du gå till Inställningar » Nextend Social Login från WordPress-administrationsområdet. På den här skärmen ser du alla olika sociala inloggningsalternativ som du kan lägga till på din WordPress-webbplats.

Processen för att lägga till en social inloggning på din webbplats varierar beroende på om du lägger till Facebook, Twitter eller Google-inloggning.

Låt oss titta på Facebook som ett exempel.

För att lägga till en Facebook-inloggning på din WordPress-webbplats, klickar vi på knappen 'Kom igång' under Facebook-logotypen.

Vid det här laget kan du få en varning från Facebook. Detta beror på att Facebook kräver en säker anslutning för att fungera, vilket är ett standardkrav för säkerhet.

Detta innebär att din webbplats måste använda HTTPS innan du kan lägga till en Facebook-inloggning i WordPress. För att ställa in det, se vår guide om att byta från HTTP till HTTPS i WordPress.

Steg 2: Skapa din Facebook-utvecklarapp

När du använder HTTPS är din nästa uppgift att skapa en Facebook-app. Detta gör att du kan skapa en Appnyckel och Apphemlighet, som du lägger till i Nextend-pluginet.

Att skapa en 'Facebook-app' låter tekniskt, men oroa dig inte. Det betyder inte att du bygger en mobilapp. Det är bara en process för att registrera din webbplats hos Facebook, vilket gör att du säkert kan koppla deras inloggningssystem till din webbplats.

Du behöver inte kunna någon kod, och vi guidar dig genom alla steg.

För att skapa den här appen måste du växla mellan din WordPress-instrumentpanel och webbplatsen Meta för utvecklare. Med det i åtanke är det en bra idé att lämna din WordPress-instrumentpanel öppen i den aktuella fliken och besöka Meta för utvecklare i en ny flik.

I din Meta for Developers-flik klickar du helt enkelt på knappen ‘Create App’.

Du kommer då att hamna i installationsprocessen.

Det första du behöver göra är att välja en affärsportfölj som du vill koppla till den nya appen. Standardinställningen är aktiverad för 'Jag vill inte koppla en affärsportfölj än.' Du kan lämna detta som det är och klicka på 'Nästa.'

I steget 'Användningsfall' väljer du vad din app ska göra.

Eftersom vi vill lägga till social inloggning till WordPress, välj alternativet 'Autentisera och begär data från användare med Facebook-inloggning'.

Därefter vill du klicka på knappen 'Nästa'.

Därefter, i fältet 'Visningsnamn', låt oss skriva in det namn du vill använda för Facebook-appen. Detta namn kommer att visas för besökare, så du vill använda något de känner igen, som din WordPress-webbplats titel.

Efter att ha gett din app ett namn kan du skriva din e-postadress i fältet ‘App contact email’. Detta är adressen som Facebook kommer att använda för att varna dig om potentiella policyöverträdelser och appbegränsningar eller dela information om hur du kan återställa ett raderat konto.

Med det i åtanke vill du skriva in en e-postadress som du kontrollerar regelbundet. Klicka på 'Nästa' för att fortsätta.

Du kommer då att se en granskningssida. På den här sidan kommer Meta for Developers att visa dig alla inställningar du har konfigurerat för den nya appen.

Om allt ser bra ut klickar du helt enkelt på knappen ‘Create App’.

Du bör nu se en meddelandepopup med en knapp 'Gå till instrumentpanelen'.

Låt oss klicka på den.

Steg 3: Koppla din webbplats till Facebook-appen

Du är nu redo att lägga till produkter i Facebook-appen.

Härifrån kan du klicka på 'Anpassa lägga till en Facebook-inloggningsknapp'.

Gå sedan till 'Snabbstart' från menyn 'Facebook-inloggning'.

Härifrån kan du välja alternativet 'Webb'.

Detta öppnar anpassningssektionen.

I fältet 'Webbplats-URL' skriver du helt enkelt in din webbplats URL.

Se till att du får rätt URL. Även ett litet stavfel kommer att orsaka att anslutningen misslyckas, och du kommer troligen att se ett felmeddelande som 'ogiltig omdirigerings-URL'.

För att göra detta, byt helt enkelt tillbaka till fliken som visar din WordPress-instrumentpanel. Den här skärmen ger detaljerade instruktioner om hur du länkar Nextend till Facebook, inklusive den exakta URL:en som du bör använda.

Efter att ha skrivit in din webbplats URL i fältet 'Webbplats-URL', låt oss se till att du klickar på knappen 'Spara' för att spara dina ändringar.

Låt oss sedan gå vidare till avsnittet 'Inställningar'.

På den här skärmen måste du klistra in en giltig oAuth-omdirigering. För att få detta värde, byt bara tillbaka till din WordPress-flik.

Dessa instruktioner inkluderar en URL märkt 'Valid OAuth redirect URIs.' Du kan kopiera denna URL.

Därefter, låt oss växla tillbaka till Meta for Developers-webbplatsen och klistra in URL:en i fältet 'Redirect URI to Check'.

Efter det är du redo att klicka på knappen 'Spara ändringar' längst ner.

Steg 4: Konfigurera apppolicyer och detaljer

När det är klart, gå till Inställningar » Grundläggande i menyn till vänster.

I 'Appdomän', skriv helt enkelt in din webbplats domännamn.

I fältet ‘Privacy Policy URL’ måste du skriva in adressen till din webbplats integritetspolicy.

Denna integritetspolicy bör avslöja vilken information du samlar in från besökare och hur du planerar att använda dessa data, inklusive all information du får från sociala inloggningar.

Om du behöver hjälp med att skapa den här viktiga sidan, se vår guide om hur man lägger till en integritetspolicy i WordPress.

För att följa GDPR måste du tillåta användare att radera sina konton på din webbplats.

Det finns många sätt att låta användare radera sina WordPress-konton, men du bör alltid dela dessa instruktioner med dina besökare.

För att hjälpa användare att hitta denna information, klicka på avsnittet 'Radering av användardata' och välj sedan 'URL för instruktioner för radering av data' från rullgardinsmenyn.

Du kan sedan skriva in eller kopiera/klistra in URL:en där besökare kan hitta information om hur de raderar sitt konto. Du kan till exempel lägga till instruktionerna i din integritetspolicy eller FAQ-sida.

När du har gjort det vill du öppna rullgardinsmenyn 'Kategori' och välja den kategori som bäst representerar hur du planerar att använda social inloggning på din WordPress-webbplats.

Om du till exempel lägger till en Facebook-inloggning till din WooCommerce-butik, vill du vanligtvis klicka på kategorin ‘Shopping’.

När du har gjort det är nästa steg att välja en appikon. Den här ikonen kommer att representera din app i ‘App Center’, som är ett område på Facebook där användare kan hitta nya applikationer.

Detta är inte särskilt viktigt för vår app, men det är ett krav, så du måste fortfarande skapa en appikon.

Din appikon måste ha en transparent bakgrund och vara mellan 512 x 512 och 1024 x 1024 pixlar. När du skapar denna ikon får du inte använda några variationer av Facebooks logotyper, varumärken eller ikoner, inklusive dess WhatsApp-, Oculus- och Instagram-märken.

Du kan inte heller inkludera någon text som 'Facebook' eller 'FB'.

Om du inte redan har en, kan du enkelt skapa en professionellt utseende Facebook-appikon med hjälp av en logotyptillverkare.

När du har skapat en appikon, gå vidare och klicka på avsnittet 'Appikon' och välj den bildfil du vill använda.

Efter allt det kan du klicka på knappen 'Spara ändringar'.

Steg 5: Gå live och kontrollera appbehörigheter

Din Facebook-app är privat som standard, vilket innebär att du är den enda som kan logga in med Facebook.

Innan dina besökare kan skapa ett konto med Facebook måste du göra din app live. För att göra detta, hitta reglaget ‘App Mode: Development’ och klicka på det för att göra det live.

Facebook-applikationer kan antingen ha 'Standardåtkomst' eller 'Avancerad åtkomst' till användarens information. Om din app har standardåtkomst kan besökare inte logga in med Facebooks sociala inloggning.

Tidigare ändrade Facebook sina standardbehörighetsinställningar, så det är alltid värt att kontrollera att din app har rätt behörigheter för att stödja social inloggning.

I menyn till vänster, låt oss navigera till avsnittet 'Behörighet'.

Nu vill du titta på behörigheterna för 'e-post' och 'offentlig_profil'.

För att stödja social inloggning måste båda dessa behörigheter vara markerade som ‘Advanced Access’ och ‘Ready to Use,’ som du kan se i följande bild.

Ser du knapparna 'Få avancerad åtkomst' istället? Detta innebär att din app för närvarande inte har rätt behörigheter för att logga in på sociala medier.

I det här fallet måste du klicka på knappen 'Få avancerad åtkomst' och sedan följa instruktionerna på skärmen.

När du har 'Advanced Access'-behörigheterna, gå vidare och navigera till App setting » Basic från menyn till vänster.

Överst på sidan ser du ett 'App-ID' och en 'App-hemlighet'.

För att visa 'App secret', klicka bara på knappen 'Show'. Sedan kan du ange lösenordet för ditt Facebook-konto. Meta for Developers-webbplatsen kommer nu att uppdateras för att visa din 'App secret'.

Steg 6: Lägg till app-ID och hemlighet i WordPress

Nästa steg är att lägga till 'App secret' och 'App ID' till ditt Nextend-plugin. För att göra detta, låt oss växla tillbaka till WordPress-instrumentpanelen.

Härifrån vill du gå till fliken 'Inställningar' och klistra in ID och hemlighet i fälten 'App-ID' och 'App-hemlighet' i din WordPress-instrumentpanel.

När du har gjort det, fortsätt och klicka på knappen 'Spara ändringar'.

Innan du går vidare är det en bra idé att testa att din sociala inloggning är korrekt inställd. För att göra detta, klicka helt enkelt på knappen 'Verifiera inställningar'.

Detta öppnar ett popup-fönster där du kan skriva in ditt Facebook-användarnamn och lösenord. Om du har konfigurerat den sociala inloggningen korrekt, bör du nu vara inloggad på din WordPress-blogg.

Även om din sociala inloggning fungerar, kan Nextend fortfarande varna dig att leverantören för närvarande är inaktiverad. Om du ser denna varning, klicka bara på knappen 'Aktivera'.

Grattis, du har gjort den svåra delen och framgångsrikt lagt till en social inloggning på din WordPress-webbplats!

Steg 7: Anpassa dina sociala inloggningsknappar

Nu till den roliga delen: låt oss anpassa hur inloggningsknappen ser ut och fungerar på din webbplats.

För att styla den sociala inloggningsknappen, klicka helt enkelt på fliken 'Knappar'. Du kommer sedan att se alla olika stilar som du kan använda.

För att använda en annan stil kan du klicka för att välja dess radio-knapp.

När du har gjort det kan du redigera texten för denna knapps 'Inloggningsetikett' för att ändra texten som Nextend visar.

Du kan också tillämpa viss grundläggande formatering på inloggningsetiketten. Till exempel, i följande bild tillämpar vi en fet effekt genom att använda HTML-taggarna <b> och </b>.

Du har också möjlighet att ändra texten som denna knapp använder för sin 'Länketikett'. Detta är texten som Nextend visar när en besökare har skapat ett konto på din webbplats men inte har länkat det kontot till Facebook.

Du kan använda länketiketten för att uppmuntra inloggade användare att koppla sina konton till olika sociala medieprofiler.

För att ändra denna text, skriv helt enkelt i fältet 'Länktext'. Återigen, du kan använda HTML för att tillämpa viss grundläggande formatering på länktexten.

Du bör också göra det enkelt för besökare att koppla bort sina sociala medieprofiler från din WordPress-webbplats.

Det är här fältet 'Avlänkningsetikett' kommer in.

I detta fält kan du skriva in den text som din webbplats kommer att visa för inloggade användare som redan har kopplat sina sociala konton till din webbplats.

Genom att klicka på den här länken kan användare koppla bort anslutningen mellan din WordPress-webbplats och deras sociala mediekonton.

Dessa inställningar bör räcka för de flesta webbplatser.

Om du däremot föredrar att skapa en helt anpassad knapp kan du alltid markera rutan ‘Use custom button’. Detta lägger till ett nytt avsnitt där du kan skapa din egen sociala inloggningsknapp med hjälp av kod.

När du är nöjd med hur du har stylat din knapp kan du klicka på knappen 'Spara ändringar'.

Steg 8: Visa knappen för social inloggning på din webbplats

Därefter vill du växla till fliken 'Användning'.

Nextend kommer nu att visa alla kortkoder som du kan använda för att lägga till knappen för social inloggning på din WordPress-webbplats.

Dessa kortkoder kan skapa en rad inloggningsknappar. För att skapa en grundläggande inloggningsknapp för Facebook skulle du använda följande kortkod:

[nextend_social_login provider="facebook"]

Följande bild visar ett exempel på hur denna sociala inloggningsknapp kommer att se ut på din webbplats.

Som du kan se i fliken 'Användning', finns det några extra parametrar som du kan lägga till i din kortkod. Detta kommer att ändra hur knappen ser ut eller beter sig.

Om du vill skapa en knapp för social inloggning som inte har en textetikett, kan du lägga till parametern 'icon', till exempel [nextend_social_login provider="facebook" style="icon"]

Här är ett exempel på hur den här knappen kommer att se ut på din WordPress-webbplats.

När en besökare loggar in på din webbplats med ett socialt konto kan du automatiskt omdirigera dem till en sida. Den här skärmen har en exempelkortkod som omdirigerar användare till Nextend-webbplatsen.

Du kan enkelt anpassa denna kortkod för att omdirigera besökare till en sida på din WordPress-webbplats.

Du kan lägga till några andra parametrar till din kortkod. För att se hela listan med parametrar kan du klicka på länken till pluginets dokumentation.

Efter att ha bestämt vilken kortkod du ska använda, kan du lägga till koden på vilken sida, inlägg eller widget-redo område som helst. För steg-för-steg-instruktioner, se vår nybörjarguide om hur man lägger till en kortkod i WordPress.

Videohandledning

Om du inte är ett fan av skriftliga instruktioner, titta då bara på vår videoguide om hur du lägger till social inloggning till WordPress:

Prenumerera på WPBeginner

Vanliga frågor om social inloggning

Här är några frågor som våra läsare ofta ställer om att lägga till social inloggning på din WordPress-webbplats:

Kan jag välja vilka sociala nätverk användare kan logga in med?

Ja, de flesta sociala inloggningsplugins, inklusive Nextend Social Login & Register, låter dig välja vilka nätverk du vill erbjuda.

Du kan aktivera endast de som din publik föredrar, som Google och Facebook, och dölja andra. Till exempel, om du riktar dig till en professionell publik, kanske du aktiverar LinkedIn, medan Google och Facebook är mer populära för allmänna användare.

Behöver jag en utvecklare för att ställa in social inloggning?

Nej, du kan göra det själv utan att skriva kod. De flesta sociala inloggningsplugins för WordPress är nybörjarvänliga och erbjuder detaljerad dokumentation.

Vissa plugins levereras till och med med inbyggda installationsguider som hjälper dig att skapa appnycklar från plattformar som Google eller Facebook. Det tar några extra steg men allt är oftast kopiera-klistra in.

Kommer social inloggning att sakta ner min webbplats?

Att lägga till social inloggning kommer inte att sakta ner din webbplats om du använder ett välkodat plugin.

Populära verktyg som Nextend Social Login & Register är optimerade för prestanda och laddar endast skript när det behövs.

Fortfarande är det en bra idé att övervaka webbplatsens hastighet efter installationen. Om du märker någon fördröjning, överväg att använda prestandainsticken eller en cachelösning för att hålla din webbplats snabb.

Är social inloggning säker för min WordPress-webbplats?

Ja, social inloggning är säker om du använder betrodda plugins och håller dem uppdaterade.

Eftersom inloggning hanteras av stora plattformar som Google eller Facebook, behöver din webbplats inte lagra eller hantera användarlösenord.

Vi rekommenderar dock fortfarande att du använder HTTPS och följer bästa praxis för WordPress-säkerhet för att hålla allt säkert.

Kan jag tillåta social inloggning på WooCommerce eller medlemskapssidor?

Absolut! Social inloggning fungerar utmärkt med WooCommerce, BuddyPress, MemberPress och mer.

Det hjälper kunder och medlemmar att logga in snabbt och minskar övergivna kundvagnar eller friktion vid registrering. Många sociala inloggningsplugins erbjuder till och med inbyggd integration med populära plugins så att du inte behöver någon extra konfiguration.

Vad händer om en användare loggar in med social inloggning och sedan senare använder e-postinloggning?

I de flesta fall kommer pluginet automatiskt att länka deras konton.

Till exempel, om en användare registrerar sig med ett Google-konto med e-postadressen 'jane.doe@example.com' och de redan har ett WordPress-användarkonto med samma e-postadress, kommer pluginet att känna igen matchningen och länka de två.

Detta förhindrar dubbletter av konton. Det är dock alltid en bra idé att testa den här funktionen för att se exakt hur ditt plugin hanterar den innan du går live.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en social inloggning på din WordPress-webbplats. Du kan också kolla in vår guide om de bästa sociala medieplugins för WordPress eller handledningen om hur man lägger till CAPTCHA i WordPress inloggnings- och registreringsformulär.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.