Login with social networks

Allow users to log in/sign in using their Facebook, Google and other popular social network accounts.

Requirements

To login with social networks, the Snax plugin is required.

Locations

The social login links are integrated into:

Snax Login Popup

To change buttons template for this location, please go to WP admin panel › Settings › Snax › Social Login › Locations page.

BuddyPress Registration Page

To change buttons template for this location, please go to WP admin panel › Settings › Snax › Social Login › Locations page.

Workflow

By logging in using social networks a user:

• DON'T have to fill in a registration form - an account is created under the hood
• DON'T have to activate an account using an activation link - an account is activated immediately, after successful social network authentication
• DON'T have to register again on different site within a network - the existing account is used to grant access to a site

Settings

All module related settings are on the WP admin panel › Settings › Snax › Social Login page.

Enable/Disable

You can enable the social login module on the WP admin panel › Settings › Snax › Social Login page, in the General tab.

Networks setup

Currently the following networks are supported:

• Facebook
• Google
• Twitter
• Instagram
• LinkedIn

To set up the networks, please follow these steps:

• Go to the WP admin panel › Settings › Snax › Social Login section
• Choose the Networks tab
• Check the Enabled box right next to a network you want to active
• Provide the Application ID. How to get this info for each network, is explained further on this page
• Provide the Application Secret. How to get this info for each network, is explained further on this page
• Save changes

Facebook

To enable authentication with Facebook, please follow the steps:

1. Go to https://developers.facebook.com/apps
2. Click Add a New App button
3. Fill in Display Name and Contact Email and click Create App ID button

4. Find Facebook Login product and click Set up button below it

5. Click Web from available platforms

6. Provide your Site URL, click Save and then Continue

7. Skip all next steps by clicking Next button
8. Now, from the left menu select Settings under Facebook Login product

9. Return back to your site and go to WP admin panel › Settings › Snax › Social Login › Networks page
10. In Facebook section, click Where do I get this info? link
11. You should see Valid OAuth Redirect URI, copy it

12. Paste the copied URL into Valid OAuth Redirect URIs field and Save Changes

13. You have to also provide a link to your site's privacy policy. It's required to go live
14. To do that, please select Settings » Basic from the left menu
15. Fill in Privacy Policy URL and click Save Changes

16. You application is currently in development mode. We have to make it live to allow users log in with it
17. Click OFF in top right corner, choose Category and click Confirm
18. When your app is live, you should see green ON switch

19. Your app is now ready to use. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and past the created application credentials (APP ID and App Secret) into the Facebook fields

20. Make sure that Enabled box is checked
21. Save changes

Google

To enable authentication with Google, please follow the steps:

1. Go to https://console.developers.google.com
2. Click Select a project in top left corner
3. When projects popup shows up, click New project
4. Fill in Project name and Location and click Create button

5. Once the project is created. Select it (screen, point 1). Then click left side menu (screen, point 2) and go to APIs & Services › Dashboard (screen, point 3)

6. Click + ENABLE APIS AND SERVICES

7. From API Library, select Google+ API and on the next screen click Enable

8. Click CREATE CREDENTIALS button

9. Select Google+ API, Web browser (javascript) and User data like on the screen below and click What credentials do I need? button

10. Once the popup shows up, click Set up OAuth consent screen

11. Fill in Application name and Support email
12. Fill in Authorized domains. It's your site's domain
13. Fill in Application Homepage link. It's your site's homepage
14. Fill in Application Privacy Policy link
15. Click Save button

16. Now, click Create credentials button and select OAuth client ID

17. Select Web application as application type
18. Fill in Name
19. Provide Authorized JavaScript origins. It's your site's domain
20. Provide Authorized redirect URIs. Read the next step from where you can get it

20. To get Authorized redirect URI, please return back to your site and go to WP admin panel › Settings › Snax › Social Login › Networks page
21. In Google section, click Where do I get this info? link
22. You should see Authorized redirect URI, copy it

24. Paste the copied URL into Authorized redirect URIs and click Create
25. Popup with created credentials should show up

26. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and past the application credentials into the Google fields. Application Client ID into Snax Application ID and Client Secret into Application Secret
27. Make sure that Enabled box is checked
28. Save changes

Twitter

To enable authentication with Twitter, please follow the steps:

1. Go to https://developer.twitter.com/apps
2. Click Create an app button
3. Fill in required fields:
   • App name - has to be unique
   • Application description - explain what your app is built for
   • Website URL - your site's homepage URL
   • Enable Sign in with Twitter
   • Callback URLs - the same as Website URL
   • Tell us how this app will be used - explain it's for a social login on your site
4. Click Create button

5. Read Developer Terms and click Create

6. Switch to Keys and tokens tab
7. From Consumer API keys section, please copy API key and API secret key

8. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and past the created application credentials into the Twitter fields. Application API key into Snax Application ID and API secret key into Application Secret
9. Make sure that Enabled box is checked
10. Save changes

Instagram

To enable authentication with Instagram, please follow the steps:

1. Go to https://developers.facebook.com/. Instagram is owned by Facebook and now Instragram API is managed by Facebook
2. Click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll the bottom of page, and click Add Platform

2. Choose Website, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use Website
3. Click Products, locate the Instagram product, and click Set Up to add it to your app

4. Click Basic Display, scroll to the bottom of the page, then click Create New App

5. In the form that appears, fill in:
   1. Display Name. Enter the name of the Facebook app you just created
   2. Valid OAuth Redirect URIs. Read below from where you can get it
   3. Deauthorize Callback URL. Copy here the Valid OAuth Redirect URIs value
   4. Data Deletion Request Callback URL. Copy here the Valid OAuth Redirect URIs value
   5. App Review for Instagram Basic Display. Read Instagram App Review to learn more
6. To get Valid OAuth Redirect URI, please return back to your site and go to WP admin panel › Settings › Snax › Social Login › Networks page
7. In Instagram section, click Where do I get this info? link
8. You should see Valid Redirect URI

11. Once you have finished, copy Instagram App ID and Instagram App Secret

11. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and past the application credentials into the Instagram fields.
12. Make sure that Enabled box is checked
13. Save changes

LinkedIn

To enable authentication with LinkedIn, please follow the steps:

1. Go to https://www.linkedin.com/developers/apps
2. Click Create app button
3. In App information section, fill in required fields:
   • App name
   • Company - you have to select your company page. Create a new one if you don't have it already. It's required step as your application has to be verified by company admin later in the verification process.
   • Business email
   • All logo - must be square and at least 100x100 pixels
4. In Products section, please check Sign In with LinkedIn product
5. In Legal terms section, please agree to these terms
6. Click Create app button

5. In App settings, click the Verify button and follow the steps of creating a new page
6. After successful verification, you should see green Verified flag next to your company name

7. Return back to your site and go to WP admin panel › Settings › Snax › Social Login › Networks page
8. In LinkedIn section, click Where do I get this info? link
9. You should see Redirect URL, copy it

10. Now, back in LinkedIn application, click Auth tab
11. Scroll down to OAuth 2.0 settings
12. Paste the copied URL into Redirect URLs field and Save Changes

13. From Application credentials section, please copy Client ID and Client Secret

14. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and paste the created application credentials into the LinkedIn fields. Application Client ID into Snax Application ID and Client Secret into Application Secret
15. Make sure that Enabled box is checked
16. Save changes

VKontakte

To enable authentication with Vkontakte (vk.com), please follow the steps:

1. Go to https://vk.com/apps?act=manage
2. Click Create app button

3. Fill in required fields:
   • Title
   • Platform - choose Website
   • Website address - your site's full URL
   • Base domain - just site's domain, without http(s):// or subdirs
4. Click Connect website button

5. From Settings section, please copy App ID and Secret key

14. Go back to WP admin panel › Settings › Snax › Social Login › Networks page and paste the created application credentials into the VKontakte fields. Application App ID into Snax Application ID and Secret key into Application Secret
15. Make sure that Enabled box is checked
16. Save changes

Multisite support

The social login module supports WordPress Network / Multisite sites. When a user logs into a site within a network for the first time, his account is created. The user's role is set based on the network's default role (Snax sets it to the Snax Author by default). When the user's account already exists and the user logs into a different site within the same network, his capabilities are extended and the same role is granted to the user to that new site.

General Data Protection Regulation (GDPR)

GDPR is an EU privacy regulation that enforces a certain standard of handling and obtaining user data. Bimber has certain ready-made integrations so you can make your site GDPR ready in a few simple steps.

The WP GDPR Compliance plugin assists website and webshop owners to comply with European privacy regulations known as GDPR. By May 24th, 2018 your site or shop has to comply to avoid large fines.

Requirements

Snax uses the WP GDPR Compliance plugin to provide GDPR integration. Please make sure you have it activated.

Workflow

When the GDPR integration is enabled, a user will be asked to accept your privacy policy terms before logging in with any of available social networks.

Enable

To enable the GDPR integration, please:

1. Go to the WP admin panel › Settings › Snax › Social Login section
2. Choose the GDPR tab
3. Check the Enabled box
4. Fill in the Consent text for your users
5. Add the %privacy_policy% tag to the Consent text. It will be replaced with the target Privacy Policy page
6. The Privacy Policy page can be set in the GDPR plugin's setting page

Instagram App Review

To use your Instagram application, it has to be in Live Mode or your Instagram user's account has to be added to it as a test user.

Switch to Live Mode

To go Live with your app, you have to submit it for a review. Go back to your Facebook Developer Account, then Instagram > Basic Display and choose instagram_graph_user_media submission option.

Add a test user

Your application doesn't have to be Live to allow you test it. All you need is to add a test user. To do so, please do as follows:

1. Go back to your Facebook Developer Account
2. Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.

3. Go to your Instagram Account
4. Click Edit Profile

5. Navigate to Authorized Applications
6. Choose Tester Invites and accept the invitation
7. Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode

Debugging

To enable the social login debug mode, please do as follows:

1. Go to the WP admin panel › Settings › Snax › Social Login section
2. Choose the Log tab
3. Check the Enabled box
4. Save changes
5. From now on, all login sessions (ended with success or failure) will be listed here to allow you to trace all kind of problems. When you want to report a problem to the support center, please attach a session log.
6. It's recommended to disable the debug mode when going live