Magetop Social Login Extension Guide will give you solid understanding of how to use Extension. These Magento 2 tutorials cover back-end and front-end development.

I. Introduction Social Login

Magento 2 Social Login is an extension allowing customers to quickly login to your Magento store with their social accounts. According to statistics, the world has about 2.8 billion people use social networks in 2019. Therefore, this extension helps customers sign in or register an account on your Magento website via social networking accounts easily and quickly.

II. How to Configure

To configure Social Login Extension, select Store -> Settings -> Configuration -> MAGETOP.COM -> Social Login Setting.

Enable: Select “Yes” to enable Social Login Extension.

Send Password To Customer: Select “Yes” to send password to customer.

Show Social Login Buttons on: Select the page where you want to display the Social Login buttons in storeview.

Use Popup Login: Select “Yes” to show popup login in storeview.

Require Real Email: Select “Yes” to require entering a real email address when register for social networks that don’t provide real E-mail.

Custom CSS: Add CSS snippets to customize the Social Login interface in the storeview.

2.1. Facebook

A. How to configure Facebook.

Enable: Select Yes to show Sign in with the Facebook button.
Facebook App ID, Facebook App Secret: Application ID linking your website to Facebook API.
Valid OAuth redirect URIs: Generated Redirect URIs for use in Oauth 2.0 authentication.
Sort Order: Sorting the priority of applications.

B. Facebook API Credentials.

Step 1: Go to https://developers.facebook.com/

Step 2: Click Get Started link.

Step 3: Register Facebook Developer.

Choose best describes you

Step 4: Create app.

Once registered as a Facebook developer you will be redirected to the app page management. Click Create App.

If you have become a Facebook Developer before. From Home Page of Facebook Developer, choose My Apps. Then select Create App.

Choose My Apps From Home Page of Facebook Developer

Select the purpose of App.

Fill out the information for the App.

Then, click Create App.

Step 5: Click on the Set Up button from Facebook Login product.

Enter your domain in Valid OAuth Redirect URIs field.

In the Basic tab, you can see your App ID and Secret ID.

Step 6: Click here and complete the remaining procedures for it to work.

Step 7: You copy it and fill in the Configuration of Facebook in Magento Admin.

2.2. Twitter

A. How to configure Twitter.

Enable: Select Yes to show Sign in with the Twitter button.
Consumer Key, Consumer Secret: Application ID linking your website to Twitter API.
Callback URL: Generated URL for a callback from App.
Sort Order: Sorting the priority of applications.

B. Twitter API Credentials.

Step 1: Go to https://developer.twitter.com/apps

Step 2: Create a new application.

Step 3: Enter Twitter App Name.

Step 4: It will display your Consumer Key (API Key) and Consumer Secret (API secret key).

Step 5: Choose App settings to setup your app.

Click Edit of Authentication settings

Enable 3-legged OAuth -> Enter Callback URLs provided in Social Login Setting, Website URL.

Step 6: You copy API key, API secret key and fill in the Configuration of Twitter in Magento Admin.

2.3. Google

A. How to configure Google.

Enable: Select Yes to show Sign in with the Google button.
Cliend ID, Client Secret: Application ID linking your website to Google API.
REDIRECT URIS: Generated URL for redirect from App.
Sort Order: Sorting the priority of applications.

B. Google API Credentials.

Step 1: Go to https://console.developers.google.com

Step 2: If you are not registered on Google developer account, then you need to accept agreement.

Step 3: Click on Select a project on the top of the header bar.

Step 4: From the project, selection popup click on the New Project button to add a new project.

Step 5: Enter your Project name and click on the Create button.

Step 6: Click on OAuth consent screen from the left side menu and create OAuth consent user type.

Step 7: Fill full the information and click on the Save button.

Step 8: Click on Create credentials and from the dropdown list select OAuth client ID.

Step 9: Fill full the information and click on the Create button.

Step 10: It will display the popup with your Client ID and Client Secret.

Step 11: You copy it and fill in the Configuration of Google in Magento Admin.

2.4. LinkedIn

A. How to configure LinkedIn.

Enable: Select Yes to show Sign in with the LinkedIn button.
Id Client, Secret Client: Application ID linking your website to LinkedIn API.
Redirect URL: Generated URL for redirect from App.
Sort Order: Sorting the priority of applications.

B. LinkedIn API Credentials.

Step 1: Go to https://www.linkedin.com/developers/apps

Step 2: Select Create App on the LinkedIn Developer page.

Step 3: Fill full the information and click on the Create app button.

Step 4: In Authentication tabs, you will see Client ID and Client Secret.

Step 5: You copy it and fill in the Configuration of LinkedIn in Magento Admin.

2.5. Instagram

A. How to configure Instagram.

Enable: Select Yes to show Sign in with the Instagram button.
Client ID, Client Secret: Application ID linking your website to Instagram API.
REDIRECT URIS: Generated URL for redirect from App.
Sort Order: Sorting the priority of applications.

B. Instagram API Credentials.

Step 1: Go to https://developers.facebook.com/

Step 2: Click Get Started link.

Step 3: Register Facebook Developer.

Choose best describes you

Step 4: Create app.

Once registered as a Facebook developer you will be redirected to the app page management. Click Create App.

If you have become a Facebook Developer before. From Home Page of Facebook Developer, choose My Apps. Then select Create App.

Select the purpose of App.

Fill out the information for the App.

Then, click Create App.

Step 5: Click on the Set Up button from Instagram Basic Display product.

Click Create New App button in Basic Display section in Instagram Basic Display.

Enter Display Name -> Create App.

Copy your REDIRECT URIS to Valid OAuth Redirect URIs field and enter your domain to Deauthorize, Data Deletion Requests field.

In the Basic Display section, you can see your Instagram App ID and Instagram App Secret.

Step 6: Click here and complete the remaining procedures for it to work.

Step 7: You copy it and fill in the Configuration of Instagram in Magento Admin.

2.6. Github

A. How to configure Github.

Enable: Select Yes to show Sign in with the Github button.
Client ID, Client Secret: Application ID linking your website to Github API.
Callback Url: Generated URL for a callback from App.
Sort Order: Sorting the priority of applications.

B. Github API Credentials.

Step 1: Go to https://github.com/settings/applications/new

Step 2: Fill in your app information. Next, click Register application button.

Step 3: Click Generate a new client secret button.

Step 4: Now, You have Client Id and Client secrets. Then, You copy it and fill in the Configuration of Github in Magento Admin.

2.7. Yahoo

A. How to configure Yahoo.

Enable: Select Yes to show Sign in with the Yahoo button.
Client ID, Client Secret: Application ID linking your website to Yahoo API.
Callback Domain: Generated URL for a callback from App.
Sort Order: Sorting the priority of applications.

B. Yahoo API Credentials.

Step 1: Go to https://developer.yahoo.com/apps/

Step 2: Click Create an app button.

Step 3: Fill in your Yahoo app information. Next, click Create App button.

Step 4: Now, You have Client ID and Client Secret. Then, You copy it and fill in the Configuration of Yahoo in Magento Admin.

You copy Client ID, Client Secret and fill in the Configuration of Yahoo in Magento Admin

2.8. Foursquare

A. How to configure Foursquare.

Enable: Select Yes to show Sign in with the Foursquare button.
Client ID, Client Secret: Application ID linking your website to Foursquare API.
Callback Url: Generated URL for a callback from App.
Sort Order: Sorting the priority of applications.

B. Foursquare API Credentials.

Step 1: Go to https://foursquare.com/developers/apps

Step 2: Click Create New App button.

Step 3: Fill in your app name and your domain. Next, click Next button.

Step 4: Fill out more information about your Foursquare app. Note: In the Redirect URL field, enter the Callback Url provided in Configuration.

Step 5: Copy Client Id, Client Secret and fill in the Configuration of Foursquare in Magento Admin.

2.9. Vkontakte

A. How to configure Vkontakte.

Enable: Select Yes to show Sign in with the Vkontakte button.
Client ID, Client Secret: Application ID linking your website to Vkontakte API.
Callback Url: Generated URL for a callback from App.
Sort Order: Sorting the priority of applications.

B. Vkontakte API Credentials.

Step 1: Go to https://vk.com/dev

Step 2: Click My Apps on the top of the page.

Step 3: Click Create button to create a new VK app.

Step 4: Fill in your VK app information.

Step 5: Fill out more information about your VK app.

Step 6: Choose Settings section. Copy Secure key, Service token and fill in the Configuration of Vkontakte in Magento Admin.

III. Concluse

Above is our guide for Magento Social Login Extension. If you have any questions please boldly contact us. We will help you.

It comes to the end of the blog: Magetop Social Login Extension Guide.

You can read more useful articles like Magetop Marketplace Extension Guide (Part 1)

We hope this is a useful series for you.

Thank you for reading!

4.5 2 votes

Article Rating

Magetop Blog

Adam Roger

Leave a Reply or put your Question hereCancel reply