Magento 2 Free Extensions

  1. Home
  2. Docs
  3. Magento 2 Free Extensions
  4. Magento 2 Social Login
  5. User Guide

User Guide

1. Overview

Social Login for Magento 2 Extension allows customers to sign through social media accounts like Facebook, Twitter, Google Plus… quickly via Ajax pop-up. They can sign up or login on a site quickly within a few clicks instead of wasting time filling in register or login form. Ajax pop-up is also a method to save up time customers might spend on loading new pages.

2. How Does It Work?

Please go to Store  ⇒ Configuration ⇒ BSS COMMERCE Ajax Social Login.

2.1.     General

In Enable, choose Yes to enable the extension or No to disable it.

In Use Popup Ajax, choose Yes to enable popup for login and register. Otherwise, choose No to disable it.

In Display Customer Photo, choose Yes to display the customer’s profile photo from the social account they used for signup, or choose No to not display customer’s social photo.

In Redirect after Login, select the page on site or any particular URL you want to redirect after customer login successfully.

In Redirect after Register, select the page on site or any particular URL you want to redirect after customer completed register process.

2.2. Social Button Block

In Display buttons social login on popup, decide to display social buttons on Login tab or Register tab of popup, or place it on both tabs.

In Display buttons social follow class or id, enter class/id to place social button social login on.

In Display buttons social register follow class or id, enter class/id to place social button social register on.

In Number of button displayed, set the restriction of number of buttons to display on social login block.

In Social Button Sorting, decide the arrangement of buttons in social login block.

2.3. ReCaptcha

In Site Key and Secret Key, click “Create a site key” and register reCaptcha.

After registering, you will get the Site key and Secret key as below:

In Theme, choose the theme of reCaptcha between:

Light

Dark

In Type: Choose the type of robot checking between Image and Audio

In Size: Choose the size of reCaptcha widget between Normal and Compact.

In Popup Form: Choose the form(s) of popup on site to place the reCaptcha widget. A form of popup includes Login, Register and Forgot Password?

2.4. Configure specific social account

2.4.1.     Facebook

Take Facebook account as the example:

In Enable, choose Yes to enable Facebook account for login and register on the site, or choose No to disable it.

In App ID and App Secret, click on “click here” below Enable dropdown box, you will be redirected to a page to set up new API like below.

After completing register step, you will see a page as below. Click on Get Started in Facebook Login.

Click on Dashboard, you will see your App ID and App Secret – copy them and paste correspondingly into App ID and App Secret box in the backend configuration.

In URI redirection valid OAuth– copy the Valid OAuth redirect URIs like below and paste into the box URI redirection valid Oauth.

In Small Icon, upload the file for the icon of this account displayed in the frontend.

In Login Button Text, customize the text in social login button.

In Registration Button Text, customize the text in social registration button.

Note: In case you run into the error “Blocked URL” use URI at the link to re-setup the configuration, as follow:

For other social accounts, follow similar steps like the setting for Facebook:

2.4.2.    Twitter

2.4.3. Google

2.4.4. Yahoo

2.4.5. LinkedIn

To get Client ID, Client Secret and Redirect URL, please click on “click here” link and follow steps as below:

+ Create new application:

+ Set up Authentication for application: You get Redirect URLs in this step:

+ Copy Client ID and Client Secret to the configuration:

2.4.6. Window-Live

To get Application ID, Application Secret and Redirect URL, please click on “click here” link and follow steps as below:

+ Click on “click here” link to be redirected to Microsoft App register page:

+ Copy & Paste Redirect URL(s) to the app detail page:

+ Copy & Paste Application Id and Secret to Social Login configuration:

2.4.7. Instagram

To get Application ID, Application Secret and Redirect URL, please click on “click here” link and follow steps as below:

+ Create New Client ID:

+ Fill in web information:

+ Get Client ID and Client Secret:

*Note:

– Client status must be Authorized, then you can get the real Instagram account. In case you use sandbox mode, sandbox account is only accepted.

– Sometimes, you might face up to the error like this.

The solution is to copy the Redirect URIs and paste it in the client info page:

2.4.8. Vkontakte

Finally, click Save Config and to complete setting process.

Was this article helpful to you? Yes No 2

How can we help?