Do you want to add a social logins to your WordPress site ?
Social logins allow visitors to create an account on your WordPress site using their existing social media accounts. Instead of creating a new username or password, users can simply log in using Facebook, Google or any other platform. This saves them time , and gives you access to their name / email address for future marketing purposes.
In this article, we’ll show you how you can add a social login to WordPress.
Why add social logins to WordPress ?
There are many reasons why you might want to allow user registration on your WordPress site. If you run an online store, 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 .
However, most people do not like to fill out long user registration forms and remember another username / password.
Social logins allow visitors to create an account on your website by simply clicking a button. They can use the username and password from their existing social media accounts, such as Facebook login details.
Since it is very convenient, social login can encourage more people to register on your website. With that being said, Let’s see how you can add a social login to WordPress.
How to add a social logins to WordPress ?
One of the best tools that helps you customize and modify WordPress and add a login through social media is the addition of Nextend Social Logins and Register .
This free plugin allows visitors to log in using Facebook, Twitter or Google.
Note :
Do you want to add a social login for a site other than Facebook, Twitter or Google There is also a professional version of Nextend Social Login that adds social login to many different sites including PayPal, Slack and TikTok.
First, you will need to install and activate the nextend plugin. For more details, please see our beginner’s guide on how to install the WordPress plugin .
When activated, go to the settings “Nextend Social Login in the WordPress Management 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 are adding a login to Facebook, Twitter or Google.
Let’s look at Facebook as an example.
To facebook login to your WordPress site, click the “Get Started” button under the Facebook logo.
At this point, you may receive a warning that Facebook only allows https OAuth forwarding.
This means that your site must use HTTPS before you can add a Facebook login to WordPress. To set it up, check out our guide on how to switch from HTTP to HTTPS in WordPress .
Once you have used HTTPs, your next task is to create a Facebook application. This allows you to create the application key and the application secret, which you will add to the nextend plugin.
Creating a Facebook app sounds technical, but don’t worry. You don’t need to know any code, we will guide you through all the steps.
To create this app, you will need to switch between WordPress dashboard and Facebook Developers website . With that in mind, it’s a good idea to leave the WordPress dashboard open on the current tab and visit Facebook Developers on a new tab.
On the Facebook Developers tab, just click on the “Create an application”button.
Now you can choose the type of application. Since we want to add a social login to WordPress, go ahead and click on “consumer”.
After that, scroll to the bottom of the screen and click the “next”button.
In the “display name” field, type the name you want to use for the Facebook application.
This name will appear to visitors, so you’ll want to use something they’ll recognize like the name of your WordPress site .
After that, type your email address in the “application contact email”field.
This is the address that Facebook will use to warn you about possible policy violations and application restrictions, or share information on how to recover a deleted account. With that in mind, you’ll want to write down an email address that you check regularly.
If Facebook has multiple pages, you may have created a Business Manager Facebook account. This allows you to give Team Members full or partial access to your Facebook pages without sharing your login details.
If you have created a Business Manager Facebook account, you can connect your new application to your manager account by opening the “business account”drop-down menu. After that, just select an account manager from the drop-down menu.
If you don’t have Facebook Business Manager, you can simply leave this drop-down menu set to “Business Manager Account not selected”, which is the default setting.
After that, you are ready to click on the “Create Application”button.
In the pop-up window that appears, type the password for your Facebook account, and then click the “Submit”button.
Now you are ready to add products to the Facebook app. Go ahead and find the Facebook Login section, then click the “setup”button.
After that, just click on “web”.
In The address field of the site, type the URL address of your website.
To get the correct URL address, just switch back to the tab that displays your WordPress dashboard.
This screen contains detailed instructions on how to connect Nextend to Facebook. This includes showing the exact address that you should use.
After typing the URL address of your site in the “URL address of the site” field, be sure to click the “Save” button to save the changes.
In the left menu, find the “login to Facebook” section and click “Settings”.
On this screen, you will need to paste a Valid oAuth Redirect. To get this value, just switch back to your WordPress tab.
These instructions include an address URL called “addresses صالحة valid for OAuth forwarding”. You can go ahead and copy the address of URL this.
After that, go back to the Facebook Developer website and paste The عنوان address into the “Valid OAuth Redirect URIs”field.
After that, you are ready to click the “Save Changes” button at the bottom.
In the left menu, click on the Settings ” Basic .
In the” application domain”, type the domain name of your site .
At the address field of the Privacy Policy, You will need to type the address of the privacy policy of your website.
This privacy policy should disclose what information you collect from visitors and how you plan to use this data, including any information you obtain from social media logins.
To comply with the General Data Protection Act ( GDPR), you must give users a way to delete their accounts on your website.
There are many ways 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 “delete user data” section, and then choose “address URL for data deletion instructions” from the drop-down menu.
You can then type in an address URL or copy / paste it where visitors can find information on how to delete their account.
For example, you can add instructions to the privacy policy or FAQ page.
Once you have done this, open the “category” drop-down menu and choose the category that represents the best way to use the social login on your WordPress site.
For example, if you are adding Facebook login information to your WooCommerce store, you usually want to click on the “shopping”category.
Once this is done, the next step is to choose the application icon. This icon will represent your app in the App Center, an area on Facebook where users can find new apps.
This is not particularly important for our application, but it is a requirement for this you will still need to create the application icon.
The size of the application icon should be between 512 × 512 and 1024 × 1024 pixels, and it should have a transparent background.
Instagram Facebook logo when creating this icon, you cannot use any variations of Facebook logos, trademarks or icons including WhatsApp, Oculus and Instagram tags.
You also can’t include any “Facebook” or “FB”text.
If you don’t already have one, you can easily create a professional-looking Facebook app icon with Logo Maker .
Once the application icon has been created, click on the “application icon” section and then choose the image file you want to use.
After all that press the Save Changes button.
Your Facebook app is set to private mode by default. This means that you are the only person who can log in using Facebook.
Before your visitors can create an account using Facebook, you will need to activate your app. To do this, find the slider “application mode: development” and click on it to turn the slider from white to blue.
Facebook applications can have either “standard access” or “advanced access” to user information. If your application has standard access, visitors will not be able to log in using the social login on Facebook.
In the past, Facebook has changed its default permission settings, so it’s always worth checking that your app has the correct permissions to support social login.
In the left menu, click on the application review ” permissions and features .
Now, look for the “email” and “public profile”permissions.
To support social logins, “advanced access” and “ready to use” should be marked on both permissions as you can see in the following image.
Do you see “Get Advanced Access” buttons instead? – This means that your application currently does not have the correct permissions to log in via social networks.
In this case, you will need to go ahead and click the “get advanced access” button, and then follow the instructions on the screen.
Once you have the advanced access permissions, go ahead and click on Settings “Basic” in the left menu.
At the top of the page you will see “Application ID” and “application secret”.
To reveal the secret of the application, just click the “show” Button and then type the password for your Facebook account.
The Facebook Developers website will now be updated to show the secret of your application.
The next step is to add the app secret and App ID to your Nextend plugin. To do this, return to the WordPress dashboard.
Here, click on the “Settings”tab. Now you can paste the ID and secret in the “application ID” and “application secret” fields of the WordPress dashboard.
Once this is done, 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, just click on the check Settings button.
This will open a pop-up window where you can type in your Facebook username and password. If you have set up the social logins correctly, you should now log in to your WordPress blog .
Even if your social login is working, Nextend may warn you that the provider is currently disabled. If you see this warning, just click the Enable button.
Now you have successfully added the social login to your WordPress site. The next step is to change how the login button looks and works on your site.
To design a social logins button, just click on the “buttons”tab. Now you will see all the different styles that you can use for the social login button.
To use a different style, just click to select its radio button.
Once you have done this, you can change the text that Nextend shows on this button by editing the “login”text.
You can also apply some basic formatting to the login sticker.
For example, in the following image we are applying a bold effect using the <b> and </ b> HTML tags.
Apart from that, you also have the option to change the text that this button uses to “name the link”. This is the text that Nextend displays when a visitor creates an account on your website, but has not linked this account to Facebook.
You can use the link label to encourage logged-in users to link their accounts to various social media profiles.
To change this text, just type in the “link label”field. Again, you can use HTML to apply some basic formatting to the label text.
You should also make it easier for visitors to separate their social media profiles from your WordPress site.
This is where the “Unlink label”field comes in.
In this field, you can type the text that your site will show to logged-in users who have already linked their social accounts to your website.
By clicking on this link, users will be able to disconnect between your WordPress site and their social media account.
These settings should be enough for most websites. However, if you prefer to create a completely custom button, you can always check the “Use custom button”box.
This adds a new section where you can create your own social login button with the code.
When you are satisfied with how your button is designed, click the Save Changes button.
After that, click on the “usage”tab. Nextend will now display all the shortcodes that you can use to add a social login button to your WordPress site.
These shortcodes can create a combination of login buttons. To create a basic login button to Facebook, you can use the following shortcode:
[nextend_social_login Provider = ”facebook”]
The following photo shows an example of how this social login button looks on your site.
As you can see on the “usage” tab, there are some additional parameters that you can add to your shortcode. This will change the shape of the button or the way it works.
If you want to create a social login button that does not have a text label, you can add the “icon” parameter , for example [nextend_social_login Provider = “facebook” style = “icon”]
Here is an example of how this button looks on your WordPress site.
When a visitor logs into your site using a social account, you can automatically redirect him to a page. This screen contains an example of a 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 WordPress site.
There are some 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 selecting the shortcut icon you want to use, you can add the icon to any page, post, or area ready for widgets.
We hope this article helped you learn how to add a social login to your WordPress site.