Integrating social media login options such as Google and Facebook can increase sign-up for your website since it makes registration more convenient for users. Also, they can avoid the hassle of filling out lengthy registration forms by simply using their existing social media account information.
Moreover, by allowing users to use their preferred social media account to log in, you’ll provide them with a sense of familiarity and comfort, making them more likely to return to your site and engage with your content.
Adding Social Media Login in Elementor
If you’re using Elementor Pro to design your website, you may already be aware of the Login widget feature. With this widget, you can create a customized login page with a unique and stunning design. However, if you want to enable social media log-in on your website, you may need to add additional Elementor add-ons like Essential Addons. This is because the default Login widget of Elementor does not support this feature yet.
Essential Addon is a freemium Elementor add-on that has a huge amount of downloads and is one of the most popular add-ons. It comes with a set of new unique widgets and an improved version of Elementor’s default widget such as the Login | Register Form widget which has social media login option.
In this tutorial, we will guide you through adding Google and Facebook logins using the Essential Addons Login widget to your website.
Steps to Add Social Media Login in Elementor
Getting Ready
Install Essential Addons Pro Plugin
To utilize the social login feature, it is necessary to have the Essential Addons Pro plugin installed and activated. While the Login | Register Form widget is accessible on the free version of Essential Addons, which can be obtained from WordPress.org, the social login feature is exclusively available on the Pro version.
Enable User registration
Before utilizing the social login feature, it is crucial to enable user registration on your WordPress website. To do so, navigate to Settings → General → Membership and ensure that the “Anyone can register” option is enabled. It is important to note that when a user utilizes social login, a new user account will be created on your WordPress website by default.
Enable Login | Register Widget Form
Make sure the Login | Register Form Widget is enabled by navigating to Essential Addons → Elements from your WordPress dashboard.
To integrate the social login option properly, you need to add Google Client ID for Google, and Facebook APP ID & Facebook APP Secret for Facebook in the widget settings .
Let’s get those IDs now!
Getting Google Client ID
To get the Google Client ID, first, head over to Google Cloud Console and sign in to your Google account to create a New Project.
Afterward, add the Project name you want and you can leave the Location as “No organization“.
After you’ve clicked the Create button, select the project from the recent notification to continue with the project.
On your project dashboard, click on the hamburger menu at the top left of the page, and then select APIS & Services → Credentials menu.
On the Credential page, click CREATE CREDENTIALS and select the OAuth Client ID option.
A new window will appear asking to configure your consent screen, continue by clicking the CONFIGURE CONSENT SCREEN button.
On the OAuth consent screen window, select the External option and then click the Create button.
Now, you’ll need to provide some information for your app. Provide all required information like App information, App domain, and Developer Contact Information. And once you’re ready, click the SAVE AND CONTINUE button to continue.
On the Scope window, you can request a specific type of user data from their Google account, or you can leave it as it is and click SAVE AND CONTINUE button.
On the Test users window, we don’t need a tester for Google login, so just click the SAVE AND CONTINUE button to continue.
On the Summary window, you can review the OAuth Consent details and click the BACK TO DASHBOARD button once you’ve finished.
Let’s go back to the Credentials menu on the API & Services page. Click on the CREATE CREDENTIALS button and select OAuth client ID again to get your Google Client ID.
In this window, set the Application type to Web application and give it a name. Provide the Authorized JavaScript origins with your site URL and Authorized redirect URIs with the link you want to redirect users after they have authenticated with Google (you also can use your site URL again for this). And once youre ready, click on the Create button to get your Google Client ID.
Now you’ll have the Client ID ready for your social login integration with the Essential Addons.
Getting Facebook APP ID & APP Secret
Register as Facebook Developer
The first step to having your Facebook APP ID & APP Secret is by registering as Facebook Developer. While logged into our Facebook account, head over to Meta for Developers registration page. Afterward, click on the Continue button to accept the Meta’s Platform Terms and Developer Policies terms and start the registration process.
The next step is to verify your account. They will send a confirmation code to your provided phone number and your account email address.
Once you’ve passed the verification, select the occupation that describes you and then click the Complete Registration button to complete the registration.
Get Your APP ID and APP Secret
After you’ve completed the registration, you will be taken to the developer dashboard. Click Create App button to start creating an app.
Next, select the type of app you want to create. For Facebook login integration, select Consumer type and then click Next to continue.
Next, you need to provide the name of your app, and the app contact email and then click the Create APP button to create the app.
And once you’ve created the app, Add a product from your dashboard, the Facebook Login product by clicking on the Setup button.
Now, select Web for the Quickstart option.
Afterward, add your website URL in the Site URL text field then click Save.
Now, head over to the Settings block of the Facebook Login product, scroll down a bit to enable the Login with the JavaScript SDK option, and add your website domain on Allowed Domains for the JavaScript SDK. Continue by saving the changes by clicking on the Save button.
Now, you can get your app ID and app secret by navigating to Settings → Basic from your Meta for Developers dashboard like follows.
However, before you go copy the APP ID and the App secret, there are some steps that need to be done first. Firstly, you need to toggle Live the app you’ve created. To do so, still on Settings → Basic, fill out the following text fields.
- App Domain
- Privacy Policy URL
- Terms of Service URL
- User Data Deletion (if present)
Once you’ve filled them out, save the changes by clicking the Save Changes button.
Now, toggle the Live switch to on , then you can copy the App ID and the App secret to continue to the Facebook login integration.
Note: Facebook updates its policies and requirements regularly, and currently, the public_profile permission for Facebook login requires ‘advanced access.’ However, to obtain ‘advanced access,’ you need to have a business verification in place. This means that you will have to verify your Facebook business account to access the public_profile permission for Facebook login.
Integrating and Adding the Social Media Login
Now that you’ve got all requirements for Google and Facebook login integration, let’s add them to the Login | Register Form settings on Essential Addons → Elements from your WordPress dashboard.
Save the changes by clicking the Save button on the active window, then save the settings by clicking the Save Settings button afterward.
Now that the integration is ready, it’s time to add social login to the login form.
Start by navigating to your desired login page, and edit with the Elementor editor. Once you’re in, add the Login | Register Form widget to the canvas area and open up the Social Login block to Enable Login with Google and Enable Login with Facebook options.
Afterward, you can style up your login form and page as you desire, and then publish the page so your user can log in with their social media account on your website.
The Bottom Line
If you want to increase your sign-up, integrating social media login options such as Google and Facebook could help you with that since it makes registration more convenient for users as they can avoid the hassle of filling out lengthy registration forms, and provide them with a sense of familiarity and comfort which can make them more likely to return to your site and engage with your content.
This tutorial shows you how to add Google and Facebook logins using the Essential Addons Login widget to your website.