Do you want to add social logins to your WordPress website?
Social logins allow visitors to create an account with your WordPress website by using their existing social media accounts. Instead of creating a new username or password, users can simply login with Facebook, Google, or another platform. This saves them time, reduces friction, and still get you access to their name / email address for future marketing purposes.
In this article, we will show you how you can add social login to WordPress.
Why ââAdd Social Login To WordPress?
There are many reasons why you may want to allow user registration on your WordPress website. If youâre running an online store, then user registration allows shoppers to save their payment and delivery information. This makes it easier for them to buy again in the future.
User registration is also an important part of creating a WordPress membership site.
However, most people donât like filling out long user registration forms and remember yet another username / password.
Social logins let visitors create an account with your website just by clicking a button. They can use the username and password from their existing social media accounts, such as their Facebook login details.
Since itâs so convenient, social login can encourage more people to register with your website. With that being said, letâs see how you can add social login to WordPress.
How To Add Social Login To WordPress
The easiest way to add a front end login to your WordPress website is by using the Nextend Social Login and Register plugin.
This free plugin lets visitors log in using Facebook, Twitter, or Google.
Note: Want to add social login for a site other than Facebook, Twitter, or Google? There is also a Nextend Social Login pro version that adds social login for lots of different sites including PayPal, Slack, and TikTok.
First, youâll need to install and activate the Nextend plugin. For more details, please see our beginnerâs guide on how to install a WordPress plugin.
Upon activation, go to Settings » Nextend Social Login in the WordPress admin area. On this screen, you see all the different social login options that you can add to your WordPress site.

The process of adding a social login to your site will vary depending on whether youâre adding Facebook, Twitter, or Google login.
Letâs look at Facebook as an example.
To add Facebook login to your WordPress website, click on the âGetting Startedâ button under the Facebook logo.
At this point, you may get a warning that Facebook only allows HTTPS OAuth Redirects. This means your site must be using HTTPS before you can add Facebook login to WordPress. To set it up, see our guide on how to switch from HTTP to HTTPS in WordPress.
Once youâre using HTTPs, your next task is creating a Facebook app. This allows you to create an App Key and App Secret, which youâll add to the Nextend plugin.
Creating a Facebook app sounds technical, but donât worry. You donât need to know any code, and weâll walk you through all the steps.
To create this app, youâll need to switch between your WordPress dashboard and the Facebook Developers website. With that in mind, itâs a good idea to leave your WordPress dashboard open in the current tab and visit the Facebook Developers in a new tab.
In your Facebook Developers tab, simply click on the âCreate Appâ button.

You can now choose an app type. Since we want to add social login to WordPress, go ahead and click on âConsumer.â
After that, scroll to the bottom of the screen and click on the âNextâ button.

In the âDisplay nameâ field, type in the name that you want to use for the Facebook app. This name will be shown to visitors, so youâll want to use something theyâll recognize such as the name of your WordPress website.
Next, type your email address into the âApp contact emailâ field.
This is the address that Facebook will use to warn you about potential policy violations and app restrictions, or share information about how you can recover a deleted account. With that in mind, youâll want to type in an email address that you check regularly.

If you have multiple Facebook pages, then you may have created a Facebook Business Manager account. This lets you give team members full or partial access to your Facebook pages without sharing your login details.
If youâve created a Facebook Business Manager account, then you can connect your new app to your manager account by opening the âBusiness Accountâ dropdown. Then, simply choose an account manager from the dropdown menu.
If you donât have a Facebook Business Manager, then you can simply leave this dropdown set to âNo Business Manager account selected,â which is the default setting.

After that, youâre ready to click on the âCreate appâ button.
In the popup that appears, type in the password for your Facebook account and then click on the âSubmitâ button.
Youâre now ready to add products to the Facebook app. Go ahead and find the Facebook Login section and then click on the âSet upâ button.

Next, simply click on âWeb.â
In the Site URL field, type in your websiteâs URL.

To get the right URL, simply switch back to the tab thatâs showing your WordPress dashboard.
This screen has detailed instructions on how to link Nextend to Facebook. This includes showing the exact URL that you should use.

After typing your siteâs URL into the âSite URLâ field, make sure you click on the âSaveâ button to save your changes.
In the left-hand menu, find the âFacebook Loginâ section and click on âSettings.â

On this screen, youâll need to paste a ââvalid oAuth redirect. To get this value, just switch back to your WordPress tab.
These instructions include a URL thatâs labelled as the âValid OAuth redirect URIs.â You can go ahead and copy this URL.

Next, switch back to the Facebook Developer website and paste the URL into the âValid OAuth Redirect URIsâ field.
After that, youâre ready to click on the âSave changesâ button at the bottom.

In the left-hand menu, click on Settings » Basic.
In âApp domain,â type in your siteâs domain name.

In the Privacy Policy URL field, youâll need to type in the address of your websiteâs privacy policy. This privacy policy should disclose the information you collect from visitors and how you plan to use that data, including any information you get from social logins.
If you need help creating this important page, then please see our guide on how to add a privacy policy in WordPress.

To comply with GDPR, you must give users a way to delete their account on your website.
There are lots of ways that you can allow users to delete their WordPress accounts, but you should always share these instructions with your visitors.
To help users find this information, click on the âUser Data Deletionâ section, and then choose âData Deletion Instructions URLâ from the dropdown menu.
You can then type in, or copy/paste the URL where visitors can find information on how to delete their account. For example, you might add the instructions to your privacy policy or FAQ page.

Once youâve done that, open the âCategoryâ dropdown menu and choose the category that best represents how you plan to use social login on your WordPress website.
For example, if youâre adding Facebook login to your WooCommerce store, then youâll typically want to click on the âShoppingâ category.

Once youâve done that, the next step is choosing an App Icon. This icon will represent your app in the App Center, which is an area of Facebook where users can find new applications.
This isnât particularly important for our app, but itâs a requirement so youâll still need to create an app icon.
Your app icon must be between 512 x 512 and ââ1024 x 1024 pixels, and it must have a transparent background. When creating this icon, you canât use any variations of Facebookâs logos, trademarks, or icons including its WhatsApp, Oculus, and Instagram brands.
You also canât include any âFacebookâ or âFBâ text.
If you donât already have one, then you can easily create a professional-looking Facebook app icon using a logo maker.
Once youâve created an app icon, click on the âApp Iconâ section and then choose the image file that you want to use.

After all that, click on the Save Changes button.
Your Facebook app is set to private by default. This means youâre the only person who can log in using Facebook.
Before your visitors can create an account using Facebook, youâll need to make your app live. To do this, find the âApp Mode: Developmentâ slider and click on it to turn the slider from white to blue.

Facebook applications can either have âStandard accessâ or âAdvanced accessâ to the userâs information. If your app has standard access, then visitors wonât be able to log in using Facebookâs social login.
In the past Facebook has changed its default permission settings, so itâs always worth checking that your app has the right permissions to support social login.
In the left-hand menu, click on App Review » Permissions and Features.

Now, find the âemailâ and âpublic_profileâ permissions.
To support social login, both of these permissions must be marked as âAdvanced Accessâ and âReady to Useâ as you can see in the following image.

Do you see âGet Advanced Accessâ buttons instead? This means that your app currently doesnât have the right permissions for social login.
In this case, youâll need to go ahead and click on the âGet Advanced Accessâ button, and then follow the onscreen instructions.
Once you have the Advanced Access permissions, go ahead and click on Settings » Basic in the left-hand menu.
At the top of the page youâll see an âApp IDâ and âApp secret.â

To reveal the App secret, just click on the âShowâ button and then type in the password for your Facebook account.
The Facebook Developers website will now update to show your App secret.
The next step is adding the App secret and App ID to your Nextend plugin. To do this, switch back to the WordPress dashboard.
Here, click on the âSettingsâ tab. You can now paste the ID and secret into the âApp IDâ and âApp secretâ fields in your WordPress dashboard.
Once youâve done that, click on the Save Changes button.
Before you go any further, itâs a good idea to test that your social login is set up correctly. To do this, simply click on the Verify Settings button.

This will open a popup where you can type in your Facebook username and password. If youâve set up the social login correctly, then you should now be logged into your WordPress blog.
Even if your social login is working, Nextend may still warn you that the provider is currently disabled. If you do see this warning, then simply click on the Enable button.

Youâve now successfully added social login to your WordPress website. The next step is changing how the login button looks and acts on your site.
To style the social login button, simply click on the âButtonsâ tab. You will now see all the different styles that you can use for the social login button.
To use a different style, simply click to select its radio button.

Once youâve done that, you can change the text that Nextend shows on this button by editing the âLogin labelâ text.
You can also apply some basic formatting to the login label. For example, in the following image weâre applying a bold effect by using and HTML tags.

Aside from that, you also have the option to change the text that this button uses for its âLink label.â This is the text that Nextend shows when the visitor has created an account on your website, but hasnât linked that account to Facebook.
You can use the link label to encourage logged-in users to connect their account to various social media profiles.
To change this text, simply type into the âLink labelâ field. Once again, you can use HTML to apply some basic formatting to the label text.
You should also make it easy for visitors to disconnect their social media profiles from your WordPress website.
This is where the âUnlink labelâ field comes in.
In this field, you can type in the text that your site will show to logged-in users who have already connected their social account to your website.
By clicking on this link, users will be able to break the connection between your WordPress website and their social media account.
These settings should be enough for most websites. However, if you prefer to create a completely custom button, then you can always check the âUse custom buttonâ box.
This adds a new section where you can create your own social login button using code.

When youâre happy with how youâve styled your button, click on the Save Changes button.
Next, click on the âUsageâ tab. Nextend will now show all the shortcodes that you can use to add the social login button to your WordPress website.

These shortcodes can create a range of login buttons. To create a basic login button for Facebook, you would use the following shortcode:
[nextend_social_login provider=âfacebookâ]
The following image shows an example of how this social login button will look on your site.

As you can see in the âUsageâ tab, there are a few extra parameters that you can add to your shortcode. This will change how the button looks or acts.
If you want to create a social login button that doesnât have a text label, then you can add the âiconâ parameter, for example [nextend_social_login provider=âfacebookâ style=âiconâ]
Here is an example of how this button will look on your WordPress website.

When a visitor logs into your site using a social account, you can redirect them to a page automatically. This screen has an example shortcode that will redirect users to the Nextend site.
You can easily customize this shortcode so that it redirects the visitor to a page on your own WordPress website.

There are a few other parameters that you can add to your shortcode, to see the full list of parameters click on the link in the plugin documentation.
After deciding what shortcode you want to use, you can add the code to any page, post, or widget ready area. For step by step instructions, see our beginnerâs guide on how to add a shortcode in WordPress.
We hope this article helped you learn how to add social login to your WordPress website. You can also go through our guide on the best social media plugins for WordPress and how to track website visitors to your WordPress website.
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.
The post How To Add Social Login To WordPress (The Easy Way) first appeared on WPBeginner.