Nextend Social Login is a #1, simple to use and free WordPress plugin. It lets your customers and visitors register and login to your site using their social profiles (Facebook, Google, Twitter, etc.) instead of forcing them to spend valuable time to fill out the default registration form.
Login Via Facebook
To allow your visitors to log in with their Facebook account, first, you must create a Facebook App. The following guide will help you through the Facebook App creation process. After you have created your Facebook App, head over to “Settings” and configure the given “App ID” and “App secret” according to your Facebook App.
Create Facebook App
- Navigate to https://developers.facebook.com/apps/
- Log in with your Facebook credentials if you are not logged in
- Click on the “Add a New App” button
- If you see the message “Become a Facebook Developer“, then you need to click on the green “Register Now” button, fill the form then finally verify your account.
- Fill “Display Name” and “Contact Email“. The specified “Display Name” will appear on your Consent Screen!
- Click the “Create App ID” button and complete the Security Check.
- On the left side, click on the “Settings” menu point, then click “Basic”.
- Enter your domain name to the “App Domains” field.
- Enter your domain name to the “App Domains” field, probably: Example.com
- Select a “Category”, an “App Icon” and pick the “Business Use” option that describes your the App best, then press “Save Changes”.
- On the left side, click on the “Facebook Login” menu point, then click “Settings”.
- Add the following URL to the “Valid OAuth redirect URIs” field: https://example.com/demo/wp-login.php?loginSocial=facebook
- Click on “Save Changes”
- Your application is currently private, which means that only you can log in with it. In the top bar click on the switch next to the “In development” label, then click the “Switch Mode” button.
- Finally, on the left side, click on the “Settings” menu point, then click “Basic” again. Here you can see your “APP ID” and you can see your “App secret” if you click on the “Show” button. These will be needed in the plugin’s settings.
Login Via Google
To allow your visitors to log in with their Google account, first you must create a Google App. The following guide will help you through the Google App creation process. After you have created your Google App, head over to “Settings” and configure the given “Client ID” and “Client secret” according to your Google App.
Create Google App
- Navigate to https://console.developers.google.com/apis/
- Log in with your Google credentials if you are not logged in
- If you don’t have a project yet, you’ll need to create one. You can do this by clicking on the blue “Create” button on the right side! ( If you already have a project, click on the name of your project in the dashboard instead, which will bring up a modal and click “New Project“. )
- Name your project and then click on the “Create” button again
- Once you have a project, you’ll end up on the dashboard.
- Click the “OAuth consent screen” button on the left-hand side.
- Choose a User Type according to your needs. If you want to enable the social login with Google for any users with a Google account, then pick the External option!
Note: We don’t use sensitive or restricted scopes either. But if you will use this App for other purposes too, then you may need to go through an independent security review!
- Enter a name for your App to the “Application name” field, which will appear as the name of the app asking for consent.
- Fill the “Authorized domains” field with your domain name probably: Example.com without subdomains!
- Save your settings!
- On the left side, click on the “Credentials” menu point, then click the “+ Create Credentials” button in the top bar.
- Choose the “OAuth client ID” option.
- Select the “Web application” under the Application type.
- Enter “Name” that for your OAuth client ID.
- Add the following URL to the “Authorised redirect URIs” field: https://example.com/demo/wp-login.php?loginSocial=google
- Click on the “Create” button
- A modal should pop up with your credentials. If that doesn’t happen, go to the Credentials in the left-hand menu and select your app by clicking on its name and you’ll be able to copy-paste the “Client ID” and “Client Secret” from there.
Login Via Twitter
To allow your visitors to log in with their Twitter account, first you must create a Twitter App. The following guide will help you through the Twitter App creation process. After you have created your Twitter App, head over to “Settings” and configure the given “Consumer Key” and “Consumer Secret” according to your Twitter App.
Create Twitter App
- Navigate to https://developer.twitter.com/en/apps/create
- Log in with your Twitter credentials if you are not logged in yet
- If you don’t have a developer account yet, please apply one by filling all the required details! This is required for the next steps!
- Once your developer account is complete, navigate back to https://developer.twitter.com/en/apps/create if you aren’t already there!
- Fill the App name, Application description fields. Then enter your site’s URL to the Website URL field: https://example.com/demo
- Tick the checkbox next to Enable Sign in with Twitter!
- Add the following URL to the “Callback URLs” field: https://example.com/demo/wp-login.php
- Click the Create button.
- Read the Developer Terms and click the Create button again!
- Select the Permissions tab and click Edit.
- Tick the Request email address from users under the Additional permissions section and click Save.
- Go to the Keys and tokens tab and find the API key and API secret key