Social Login Professional
How to Install Social Login
How to configure Facebook API
How to configure Foursquare API
How to configure GitHub API
How to configure Google API
How to configure Instagram API
How to configure LinkedIn API
How to configure Microsoft Live API
How to configure Twitter API
How to configure Vkontakte API
How to configure Yahoo API
Overview
Social Login Professional is an improved version of Social Login Standard. With the security feature CAPTCHA, this extension protects store owners from spam accounts by ensuring that the register process or form completion is done by a human rather than a robot.
How to Configure
I. Configuration
1.1. General configuration
From the Admin Panel, go to Store > Settings > Configuration > Mageplaza Extensions > Social Login, choose General sections
In the Enable field: Select "Yes" to allow customers sign in quickly via social networking sites they are using.
In the Send Password To Customer field: Select "Yes" to activate sending notifications to customers to remind them to change their passwords when signing in via social accounts. They can change their passwords via their emails used to register for that social account.
In the Show Social Login Buttons on field:
Select display page(s) with social login buttons. Show Social Login Buttons on = Customer Login Page will show social login buttons on the login page.
Can select more than one option
In the Use Popup Login field: Select "Yes" to
Turn on Popup and Show Social Login Buttons in Login Dialog, Create New Account, and Forgot Passwords.
Include Social Login buttons in Customer Authentication Popup page
In the Popup Links Selector field: Customize any default Login and Create button to be a popup-open button by filling in class name of elements that cover these buttons.
In the Require Real Email field: Choose Yes to enable the real email confirmation feature with the social media that don't provide a real email as Yahoo, Github, etc.
Popup Effect : Admin can select one among popup display effects below
In the Style Management field: Admin can choose one of the display colors for popup. Style Management = Custom means Admin can select custom the color swatch.
In the Custom CSS field: You can add CSS code to customize based on your personal preference.
In the Redirect page after successful login field:
Enter the URL that you want to redirect to the users after they complete the login
This sections only apply when the users login via the social network
1.2. CAPTCHA
In the Enable CAPTCHA field: There will be 3 selections
Enable CAPTCHA = No: No display CAPTCHA on popup
Enable CAPTCHA = Use store default Captcha
Show CAPTCHA on popup
Use default CAPTCHA of Magento
The shown CAPTCHA will depend on configuration of CAPTCHA in Magento
Enable CAPTCHA = Use Google ReCaptcha
Show CAPTCHA on popup
Use default CAPTCHA of Google
In the Forms field
Login: Show CAPTCHA at Sign In Popup
Create user: Show CAPTCHA at Create New Account Popup
Forgot password : Show CAPTCHA at Forgot Passwords Popup
Admin can select more than one option
In the reCAPTCHA Type field
Select type of reCAPTCHA shown on popup
Instruction to create reCAPTCHA can be found here
CAPTCHA Magento Configuration's Instruction to configure can be found here
Configure Social Accounts
I. Facebook sign in
1.1. How to configure Facebook
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Facebook.
In the Enable field: Select "Yes" to show Sign in with Facebook button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Facebook API can be found here.
1.2. Login using Facebook
Facebook Login dialog will be shown after clicking on Sign in with Facebook button.
II. Google Sign in
2.1. How to configure Google
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Google.
In the Enable field: Select "Yes" to show Sign in with Google button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Google API can be found here.
2.2. Login using Google
Google Login dialog will be shown after clicking on Sign in with Google button
III. Amazon Sign in
3.1. How to configure Amazon
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Amazon.
In the Enable field: Select "Yes" to show Sign in with Amazon button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
3.2. Login using Amazon
Amazon Login dialog will be shown after clicking on Sign in with Amazon button.
IV. Twitter Sign in
4.1. How to configure Twitter
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Twitter.
In the Enable field: Select "Yes" to show Sign in with Twitter button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Twitter API can be found here.
4.2. Login using Twitter
Twitter Login dialog will be shown after clicking on Sign in with Twitter button.
V. LinkedIn Sign in
5.1. How to configure LinkedIn
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Linkedln
In the Enable field: Select "Yes" to show Sign in with LinkedIn button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create LinkedIn API can be found here.
5.2. Login using LinkedIn
LinkedIn Login dialog will be shown after clicking on Sign in with LinkedIn button.
VI. Yahoo Sign in
6.1. How to configure Yahoo
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Yahoo.
In the Enable field: Select "Yes" to show Sign in with Yahoo button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Yahoo API can be found here.
6.2. Login using Yahoo
Yahoo Login dialog will be shown after clicking on Sign in with Yahoo button.
VII. Foursquare Sign in
7.1. How to configure Foursquare
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Foursquare.
In the Enable field: Select "Yes" to show Sign in with Foursquare button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Foursquare API can be found here.
7.2. Login using Foursquare
Foursquare Login dialog will be shown after clicking on Sign in with Foursquare button.
VIII. Instagram Sign in
8.1. How to configure Instagram
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Instagram.
In the Enable field: Select "Yes" to show Sign in with Instagram button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Instagram API can be found here.
8.2. Login using Instagram
Instagram Login dialog will be shown after clicking on Sign in with Instagram button.
IX. Vkontakte Sign in
9.1. How to configure Vkontakte
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Vkontakte.
In the Enable field: Select "Yes" to show Sign in with Vkontakte button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Vkontakte API can be found here.
9.2. Login using Vkontakte
Vkontakte Login dialog will be shown after clicking on Sign in with Vkontakte button.
X. Github Sign in
10.1. How to configure Github
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Github.
In the Enable field: Select "Yes" to show Sign in with Github button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Github API can be found here.
10.2. Login using Github
Github Login dialog will be shown after clicking on Sign in with Github button.
Disqus Sign in
How to configure Disqus
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Disqus
In the Enable field: Choose Yes to display the Signin button with Disqus
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Disqus
The Disqus login dialog will be displayed after clicking the Login button with Disqus.
Mailru Sign in
How to configure Mailru
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Mailru
In the Enable field: Choose Yes to enable the login button with Mailru
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Mailru
The Mailru login dialog will be displayed after clicking the Login button with Mailru.
Odnoklassniki Sign in
How to configure Odnoklassniki
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Odnoklassniki
In the Enable field: Choose Yes to enable the login button with Odnoklassniki
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Odnoklassniki
The Odnoklassniki login dialog will be displayed after clicking the Login button with Odnoklassniki.
Steam Sign in
How to configure Steam
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Steam
In the Enable field: Choose Yes to enable the login button with Steam
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Steam
The Steam login dialog will be displayed after clicking the Login button with Steam.
How to Install Social Login
How to configure Facebook API
How to configure Foursquare API
How to configure GitHub API
How to configure Google API
How to configure Instagram API
How to configure LinkedIn API
How to configure Microsoft Live API
How to configure Twitter API
How to configure Vkontakte API
How to configure Yahoo API
Overview
Social Login Professional is an improved version of Social Login Standard. With the security feature CAPTCHA, this extension protects store owners from spam accounts by ensuring that the register process or form completion is done by a human rather than a robot.
How to Configure
I. Configuration
1.1. General configuration
From the Admin Panel, go to Store > Settings > Configuration > Mageplaza Extensions > Social Login, choose General sections
In the Enable field: Select "Yes" to allow customers sign in quickly via social networking sites they are using.
In the Send Password To Customer field: Select "Yes" to activate sending notifications to customers to remind them to change their passwords when signing in via social accounts. They can change their passwords via their emails used to register for that social account.
In the Show Social Login Buttons on field:
Select display page(s) with social login buttons. Show Social Login Buttons on = Customer Login Page will show social login buttons on the login page.
Can select more than one option
In the Use Popup Login field: Select "Yes" to
Turn on Popup and Show Social Login Buttons in Login Dialog, Create New Account, and Forgot Passwords.
Include Social Login buttons in Customer Authentication Popup page
In the Popup Links Selector field: Customize any default Login and Create button to be a popup-open button by filling in class name of elements that cover these buttons.
In the Require Real Email field: Choose Yes to enable the real email confirmation feature with the social media that don't provide a real email as Yahoo, Github, etc.
Popup Effect : Admin can select one among popup display effects below
In the Style Management field: Admin can choose one of the display colors for popup. Style Management = Custom means Admin can select custom the color swatch.
In the Custom CSS field: You can add CSS code to customize based on your personal preference.
In the Redirect page after successful login field:
Enter the URL that you want to redirect to the users after they complete the login
This sections only apply when the users login via the social network
1.2. CAPTCHA
In the Enable CAPTCHA field: There will be 3 selections
Enable CAPTCHA = No: No display CAPTCHA on popup
Enable CAPTCHA = Use store default Captcha
Show CAPTCHA on popup
Use default CAPTCHA of Magento
The shown CAPTCHA will depend on configuration of CAPTCHA in Magento
Enable CAPTCHA = Use Google ReCaptcha
Show CAPTCHA on popup
Use default CAPTCHA of Google
In the Forms field
Login: Show CAPTCHA at Sign In Popup
Create user: Show CAPTCHA at Create New Account Popup
Forgot password : Show CAPTCHA at Forgot Passwords Popup
Admin can select more than one option
In the reCAPTCHA Type field
Select type of reCAPTCHA shown on popup
Instruction to create reCAPTCHA can be found here
CAPTCHA Magento Configuration's Instruction to configure can be found here
Configure Social Accounts
I. Facebook sign in
1.1. How to configure Facebook
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Facebook.
In the Enable field: Select "Yes" to show Sign in with Facebook button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Facebook API can be found here.
1.2. Login using Facebook
Facebook Login dialog will be shown after clicking on Sign in with Facebook button.
II. Google Sign in
2.1. How to configure Google
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Google.
In the Enable field: Select "Yes" to show Sign in with Google button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Google API can be found here.
2.2. Login using Google
Google Login dialog will be shown after clicking on Sign in with Google button
III. Amazon Sign in
3.1. How to configure Amazon
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Amazon.
In the Enable field: Select "Yes" to show Sign in with Amazon button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
3.2. Login using Amazon
Amazon Login dialog will be shown after clicking on Sign in with Amazon button.
IV. Twitter Sign in
4.1. How to configure Twitter
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Twitter.
In the Enable field: Select "Yes" to show Sign in with Twitter button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Twitter API can be found here.
4.2. Login using Twitter
Twitter Login dialog will be shown after clicking on Sign in with Twitter button.
V. LinkedIn Sign in
5.1. How to configure LinkedIn
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Linkedln
In the Enable field: Select "Yes" to show Sign in with LinkedIn button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create LinkedIn API can be found here.
5.2. Login using LinkedIn
LinkedIn Login dialog will be shown after clicking on Sign in with LinkedIn button.
VI. Yahoo Sign in
6.1. How to configure Yahoo
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Yahoo.
In the Enable field: Select "Yes" to show Sign in with Yahoo button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Yahoo API can be found here.
6.2. Login using Yahoo
Yahoo Login dialog will be shown after clicking on Sign in with Yahoo button.
VII. Foursquare Sign in
7.1. How to configure Foursquare
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Foursquare.
In the Enable field: Select "Yes" to show Sign in with Foursquare button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Foursquare API can be found here.
7.2. Login using Foursquare
Foursquare Login dialog will be shown after clicking on Sign in with Foursquare button.
VIII. Instagram Sign in
8.1. How to configure Instagram
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Instagram.
In the Enable field: Select "Yes" to show Sign in with Instagram button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Instagram API can be found here.
8.2. Login using Instagram
Instagram Login dialog will be shown after clicking on Sign in with Instagram button.
IX. Vkontakte Sign in
9.1. How to configure Vkontakte
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Vkontakte.
In the Enable field: Select "Yes" to show Sign in with Vkontakte button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Vkontakte API can be found here.
9.2. Login using Vkontakte
Vkontakte Login dialog will be shown after clicking on Sign in with Vkontakte button.
X. Github Sign in
10.1. How to configure Github
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Github.
In the Enable field: Select "Yes" to show Sign in with Github button
In the Sort Order field: The order to show social login buttons. Order will be arranged as following: number, special symbol, uppercase, lowercase.
Instruction to create Github API can be found here.
10.2. Login using Github
Github Login dialog will be shown after clicking on Sign in with Github button.
Disqus Sign in
How to configure Disqus
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Disqus
In the Enable field: Choose Yes to display the Signin button with Disqus
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Disqus
The Disqus login dialog will be displayed after clicking the Login button with Disqus.
Mailru Sign in
How to configure Mailru
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Mailru
In the Enable field: Choose Yes to enable the login button with Mailru
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Mailru
The Mailru login dialog will be displayed after clicking the Login button with Mailru.
Odnoklassniki Sign in
How to configure Odnoklassniki
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Odnoklassniki
In the Enable field: Choose Yes to enable the login button with Odnoklassniki
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Odnoklassniki
The Odnoklassniki login dialog will be displayed after clicking the Login button with Odnoklassniki.
Steam Sign in
How to configure Steam
Go to Store > Settings > Configuration > Mageplaza Extensions > Social Login > Steam
In the Enable field: Choose Yes to enable the login button with Steam
In the Sort Order field: This field shows the order to display the social login button. The order will be sorted as the following: number, special characters, uppercase letters, lowercase letters.
Login using Steam
The Steam login dialog will be displayed after clicking the Login button with Steam.
Published on: 10 / 07 / 2019