RealHomes Social Login Setup
In this step by step guide, we will show how to setup login/register with social networks Facebook, Google and Twitter in a RealHomes website as you can see in the following screenshot.
Prerequisites: ensure the RealHomes theme and Easy Real Estate plugin is installed and activated on your website before you follow this guide.
This post will take you through the following sections.
Social Login Settings
For the social login settings navigate to the Dashboard > Easy Real Estate > Settings > Social tab and look for the Social Login Settings section.
Facebook Login Setup
This section allows you to Enable/Disable the login/register with Facebook on login forms and set the App ID* and App Secret* values.
Get your Facebook App Keys
You would need to create a Facebook Login App. Login to the Facebook Developer account using your Facebook account access credentials. After login, go to the Facebook Apps page and click on Create App button.
You will see the following dialog, in which you have to select the last option.
Provide the App Display Name and App Contact Email address, leave the third field as it is and then press the Create App ID button.
There might be a reCaptcha security check, Once you pass that check it will redirect you to the Add a Products page.
Click on the Set Up button of the Facebook Login product and it will take you to the Quickstart. Choose Web and provide your Site URL as displayed in screenshots below.
After saving Site URL navigate to the Settings page of the Facebook Login. Provide your website URL in the Valid OAuth Redirect URIs field and click on the Save Changes button.
Now go to the Facebook App Settings > Basic and provide Privacy Policy URL, Terms of Services URL, App Domain and Choose a Category then click the Save Changes button.
After that click on the small switch button next to In development label in top bar to make your Facebook App Live as guided in the following screenshot.
Now copy the App ID and App Secret to the Facebook Login settings on your website.
Google Login Setup
This section allows you to Enable/Disable the login/register with Google on login forms and set the API Key*, Client ID* and Client Secret* values.
Get your Google API and Client Keys
You would need to create a Google Project. Login to Google Developer Console with your Gmail account access credentials. Go to the Cloud Resource Manager page and click on the CREATE PROJECT button.
Enter the Project name then select an Organization and Location for your project and press the CREATE button.
Once the project is created, select it and go to its OAuth consent screen page. Select External and press the CREATE button.
Enter the Application name and select Support email.
Note: Don’t upload the App logo image. Otherwise you would need to get your application verified by Google team before you start using it.
Scroll to the very bottom and add your domain name in Authorized domains. Also, add the Application home page link, Application privacy policy link and Application terms of service link. Then enter the developer email address under Developer contact information section and click the SAVE AND CONTINUE button.
Click on the ADD OR REMOVE SCOPES button.
Add Scopes for Google APIs. Ensure required scopes email, profile, and openid are added.
Click the SAVE AND CONTINUE Button.
No need to add any test user (unless your App require verification by Google team) and click the SAVE AND CONTINUE Button.
Click BACK TO DASHBOARD button then click the PUBLISH APP button.
Click on the CONFIRM button.
Now go to the Credentials page and click on the CREATE CREDENTIALS > API key button.
An API Key will be created and you can copy it to the Google Login settings on your website.
After that click on the CREATE CREDENTIALS > OAuth client ID button.
Select the Application type as Web application and enter Name. Then set Authorized JavaScript origins and Authorized redirect URIs to your website URL and press the CREATE button.
Client ID and Client Secret will be created and you can copy these keys to the Google Login settings on your website and test login/register with Google from the frontend side of your website.
Twitter Login Setup
This section allows you to Enable/Disable the login/register with Twitter on login forms, set Consumer Key* and Consumer Secret* values.
Get your Twitter App Keys
You would need to create a Twitter App and for that purpose, you must have an approved Twitter Developer account which will take 1 to 2 weeks to get an approved Developer account. For more details, read and follow the Developer application process.
Login to your approved Twitter Developer account using your Twitter account access credentials. Go to the Twitter Apps page and click on the Create an app button.
Provide the fields information of the App details that are pointed in the following screenshot then press the Create/Save button.
Go to the Details of the App you just created and click on the Edit permissions button.
Ensure App permissions are set correctly according to the screenshot given below.
Now go to the Keys and tokens tab and copy the Consumer API Keys to the Twitter Login settings on your website and test login/register with Twitter from the frontend side of your website.
If you follow the above guide properly and still need further assistance regarding any step/section, you can reach our dedicated support team through our support website by clicking here.
Or if you got any feedback about this feature or guide improvement you can share it with us via feedback form by clicking here.