# Setup the Social Login feature EngineThemes

### Setting in the back-end

Following these below steps to set up a page for your users to login via their social network accounts:

1. Go to **Pages** → **Add new**. Create a new page named “**Social connect**”.

Paste the shortcode **\[social\_connect\_page]** to the content section. In template box, keep the “**Default Template**”.

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/56c6e208c697915005a72a5f/images/579eceb4c6979160ca14987b/file-ep658YFD1w.png)

2. Choose **Engine settings**→ **Social login**→ **Social API**: Insert the API in each Social API section.

In the General setting: Paste the link of the “ **Social connect page**” you've just created above. Then, select the Users roles.

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/56c6e208c697915005a72a5f/images/579ed15c903360293603b500/file-QBOXEowRu3.png)

### Get the APIs key

**Facebook**

1. Login to Facebook.
2. Go to [Facebook Developer application](https://developers.facebook.com/) to upgrade your personal account to a Facebook Developer account. If you have already had a Developer account, please skip this step.
3. After that, you will be prompted to a screen where you can create a new Facebook app. Please click “Create App ID” button.
4. Fill all required information, including **Display Name** & **Contact Email**. Then, hit “**Create App ID**” button to create a new app ID. Please note that your app will have a unique app ID. You will use this ID whenever you use one of Facebook’s [SDKs](https://developers.facebook.com/docs/apis-and-sdks) or [SDKs](https://developers.facebook.com/docs/apis-and-sdks) or [Open Graph tags for sharing](https://developers.facebook.com/docs/sharing/webmasters/) . &#x20;
5. At that time, you will be redirected to the product setup page, please click “**Get Started**” button in the Facebook Login section.
6. On the next screen, you will be given choice a platform among 4 options.  Make sure you select **Web**.
7. After that, you need to input your **Site URL** and click the “**Save**” button. Please note that this URL includes **http\://** or **https\://**. EngineThemes will enter [https://www.enginethemes.com](http://enginethemes.com/) if we wish to use this feature for our site for example.
8. Use the same URL you entered in the **Site URL** field above, and paste it in the **Valid OAuth redirect URIs** option (**Products** → **Facebook Login** → **Settings**). Don’t forget to click “**Save Changes**” button.
9. Navigate to Settings section from the left sidebar to fill in your contact information. Otherwise, your app could not be accessed.

Enter your website domain in the App Domains field. For example, if your site URL is [www.enginethemes.com](http://www.enginethemes.com/) or [enginethemes.com](http://enginethemes.com/), you must to add [www.enginethemes.com](http://www.enginethemes.com/) or [enginethemes.com](http://enginethemes.com/) in this field.

* Next, you should upload the app icon and select category.
* Hit “**Save Changes**” button.

10 In the **App Reviews** section, click the button to the right of your app’s name to make your app be public. If you see the green dot – that means your app is online. Now your customers could log in using Facebook login.

11. Finally, go to your app’s dashboard and copy your Facebook API data and add it in **Engine Settings** → **Settings** → **Socials**.

That’s finished.

**Twitter**

1. Similar to Facebook, you also create new apps on Twitter at <https://apps.twitter.com/> .
2. Fill in all required information on the **Create an application** form. Then click the “**Create your Twitter** **application**” button to submit.
3. Get **Consumer key** and **Consumer secret** on your Application settings.
4. In **Home** → **My applications** → **Settings page**, you tick on the “**Allow this application to be used to Sign in with Twitter**” option to finish the registration processing. Please note, you should check the “**callback URL**” field if it is your domain URL. Also, you must input your site **Privacy Policy URL** & **Terms of Services URL**.
5. Go to **Permissions** tab to set up what type of access your application need.

* By default, your Twitter app should have **Read and Write** access. If this is not the case,  modify your app to ensure that you have Read and Write access to give the application permission to post on your behalf.
* Besides, you can tick on the “**Request email addresses from users**” option under the Additional Permissions to get user’s email addresses whenever they log into your site via their Twitter account.

6. Add Co nsumer key and Consumer secret to your site. It locates at **Engine Settings** → **Settings** → **Socials**.

Now, your user can log into your site via Twitter account.

**Google Plus**

1. Go to the [Google Developers Console](https://console.developers.google.com/apis/library?project=_) to create a project.
2. After that, you will be redirected to the Library page where you must enable the **Google+ API** service.
3. Then, check your Google+ API status to make sure it is **enabled**.
4. Select **Credentials** tab under “API Manager” section in the left sidebar.

5 In the Credentials tab, click the “**Create credentials**” drop-down list, and choose the **QAuth client ID**.

6 Before selecting the application type, you must set your product name in advance by click on the “**Configure consent screen**” button.

In this step, you must fill all required fields as instructed, then click on the " **Save**" button to submit.

7. On the next screen, you must select **Other** as your application type. Then, click on the “**Create**” button.
8. After that, you copy the **Client ID**, **Client secret** from the QAuth client dialog box to your site. It locates at **Engine Settings** → **Settings** → **Socials**.

Now your users can access your website via Google Plus.

**LinkedIn API**

JobEngine & FreelanceEngine theme support importing user information from LinkedIn to your job seekers’ profile. You only need to register one LinkedIn API Key to set the system working.

Please follow the steps below to get LinkedIn API:

1. Create a LinkedIn API application at <https://www.linkedin.com/secure/developer?newapp=> .
2. Click the “ **Create Application**” button.
3. Fill in required fields in the **Create a New Application** form as descriptions below:

* Company Name: Specify your company name.
* Name: Specify the name of your app (You can type whatever name you wish , but it’s recommended to enter your website or company name in this field).
* Description: Enter short description of your company/website.
* Application Logo URL: https URL of the logo of your company/website, in PNG or JPG format (preferably 80×80 pixels).
* Application Use: Select Other.
* Website URL: Go to your website homepage, copy this URL and paste it in this option. Please make sure that this URL includes \[http\:// or]\(<https://docs.enginethemes.com/article/527-setup-the-social-login-featurehttp://> or) \[https\:// (for]\(<https://docs.enginethemes.com/article/527-setup-the-social-login-featurehttps://> (for) example: [http://mywebsite.com](http://mywebsite.com/) or[http://www.mywebsite.com](http://www.mywebsite.com/)).
* Business Email: Specify email address.
* Business Phone: Specify your contact number.
* I have read and agree to the [LinkedIn API Terms of Use](https://developer.linkedin.com/legal/api-terms-of-use): Tick on the checkbox.

Then, click the “ **Submit**” button to complete.

4. Make sure **r\_basicprofile** , **r\_emailaddress** are selected in Default Application Permissions section. Fill the blanks. Next, click “**Update**” button on LinkedIn app page.

\*\*\***Notice**: In the **Authorized redirect URIs** field, you must enter this default URL: [**https://yourdomain.com/?action=linked\_auth\_callback**](https://yourdomain.com/?action=linked_auth_callback). EngineThemes will enter <http://enginethemes.com/?action=linked_auth_callback> for example.

5. Navigate to **Settings** section from the left sidebar. Set Application Status to **Live** and click “**Update**” button.
6. Move to JavaScript section from the left sidebar. Enter exactly the same URL as in Website URL option in step 3 above, in the Valid SDK Domains option and click “**Add**” button.
7. After the page refresh, you should see the domain (you have just saved) below the option. Click “ **Update**” button.
8. Copy **Client ID** and **Client Secret** to your site **(Engine Settings** → **Settings** → **Socials**).

That’s finished.
