How to set up social login (Google, Facebook, Twitter )?

Table of Contents

Social Login Plugin

  • To add Facebook, Google, and Twitter login to your website, you need to install and activate Traveler Social Login plugin on Theme Settings > Extension
Social Login Image 1
  • Go to Theme Settings > Theme Options > Social Options
Social Login Image 2

Adding Facebook Login

  • Click to Create App to create a new app ID
  • On Add a Product section, set up Facebook Login and enter your website URL to get quick started
  • On Basic Settings, insert your site URL on App Domain and complete others required fields. 
Social Login Image 3
  • On Facebook Login > Settings, insert your site URL in these fields 
Social Login Image 27
  • On App Review > Permissions and Features, please set Access level: Advanced access for email and public_profile
Social Login 15
  • Finally, copy and paste your Facebook App ID on Theme Settings > Theme Options> Social Option
Social Login Image 5
  • Here is the video to show you how to add Facebook login to your website

Adding Google Login

  • 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 Project” text on the right side! ( If you already have a project, then in the top bar click on the name of your project 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 in the dashboard. ( If earlier you have already had a Project, then make sure you select the created project in the top bar! )
  • Click the “OAuth consent screen” button on the left hand side.
  • Choose a User Type according to your needs and press “Create“. 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 “App name” field, which will appear as the name of the app asking for consent.
  • For the “User support email” field, select an email address that users can use to contact you with questions about their consent.
  • Under the “Authorized domains” section press the “Add Domain” button and enter your domain name, probably: localhost without subdomains!
  • At the “Developer contact information” section, enter an email address that Google can use to notify you about any changes to your project.
  • Press “Save and Continue” then press it again on the “Scopes“, “Test users” pages, too!
  • 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 Application type.
  • Enter a “Name” for your OAuth client ID.
  • Under the “Authorised redirect URIs” section click “Add URI” and add the following URL: https://yourdomain/wp-admin/admin-ajax.php?action=st_googleplus
  • Add “Authorized JavaScript origins” is your domain
  • 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.
  • Currently your App is in Testing mode, so only limited number of people can use it. To allow this App for any user with a Google Account, click on the “OAuth consent screen” option on the left side, then click the “PUBLISH APP” button under the “Publishing status” section, and press the “Confirm” button.
  • Finally, copy and paste your Client ID and Client Secret on Theme Settings > Theme Options> Social Option
Social Login Image 6
  • Here is the video to show you how to add Google login to your website

Adding Twitter Login

Create Twitter Developer Account

Social Login Image 7
  • Click Apply for a Developer Account
Social Login Image 8
  • Choose Exploring the API
Social Login Image 9
  • Fill in the basic information and click Submit Application
Social Login Image 10
Social Login Image 11
Social Login Image 12
Social Login Image 13
  • Check your new email to verify your account
Social Login Image 15
Social Login Image 16

Create Twitter Developer Account

  • Click Create Project
Social Login Image 17
  • Name your project
Social Login Image 18
  • Which best describe you?
Social Login Image 19
  • Describe your new project?
Social Login Image 20
  • Name your app
Social Login Image 21
  • Save your API Key and API Secret Key
Social Login Image 22

Edit Your App

  • Click on your app (eg Traveler Twitter) and edit it in Settings
Social Login Image 23
  • App Name: your app name – Traveler Twitter
  • App Icon: your app icon
  • Description: this app was created to use the Twitter API
  • App Permission: Read Only
  • 3-legged OAuth: set enabled
  • Callback URL: use this suffix after your domain URL /social-login/twitter/callback. For example
  • Website URL: your full website URL
  • Organization name: None
  • Organization Website
  • URL: None
  • Terms of service URL: this URL for the term of service page
  • Privacy policy URL: this URL for the privacy policy page
Social Login Image 24
  • Navigate to Theme Settings > Social Options. On the Twitter tab, enable Twitter Login to allow the user log in to the Twitter account. Copy the consumer key and consumer secret on the Client ID and Client Secret on the Twitter Developer
Social Login Image 25