How to Configure Social Login in Magento 2 Website?

Magento 2 Extensions | Magento 2 Extension Installation | eCommerce |

Sagar Khandekar - May 26, 2021

How to Add Social Media Login in Your Magento 2

Today, we’re going to teach you guys how to configure social login functionality in Magento 2 store.

Nowadays, the eCommerce industry is shifting more and more towards improving the user experience to boost sales. And this is why ease of use has become one of the necessary aspects for any eCommerce store.

When it comes to improving the user experience, social media login functionality has gained massive popularity in today’s market.

Today, we’re going to show you guys how to implement the social media login functionality in a Magento 2 store.

How to add social login for your Magento 2?

In order to implement the social media login functionality in your Magento 2 store, first, you need to get the Magento 2 Social Login Extension.

Once you’ve purchased and installed the social login extension, you need to follow the below steps carefully to configure Social Login in your Magento 2 store.

Step.1 Login to your Admin Panel and navigate to Stores > Social Login > Configuration.
Step.2 Expand the General Settings Section and do the mentioned Configuration.
Step.3 Expand the Facebook Section and do the mentioned Configuration.
Step.4 Expand the Twitter (X) Section and do the mentioned Configuration.
Step.5 Expand the Google Section and do the mentioned Configuration.
Step.6 Expand the Instagram Section and do the mentioned Configuration.
Step.7 Expand the LinkedIn Section and do the mentioned Configuration.

Step - 1

First of all, login to your admin panel and navigate to Stores > Social Login > Configuration.

Step - 2

After that, expand the General Settings section and do the following:

Select YES in the Enable Module field.
Select Current Page in the Redirect To After Login field.
Select Right in the Display Position field.
Write a numeric value in the Visible Buttons Count field.
Select YES in the Send Welcome Email field.
Mark Use System Value in the Welcome Email Template field.
Select NO in the Use Custom Style field.

Step - 3

Next, expand the Facebook section and do the following:

Select YES in the Enable field.
Write the ID for Facebook in the App ID field.
Write the secret value for Facebook in the App Secret field.
Enter the URL in the Valid OAuth Redirect URLs field.
Select a color for the background for button in the Button Background Color field.
Select a color for the font of the button in the Button Font Color field.
Select a color for the icon of Facebook in the Icon Color field.
Write fa-facebook in the Font Class field.

Step - 4

Now, expand the Twitter section and do the following:

Select YES in the Enable field.
Write a consumer key for Twitter in the Consumer Key field.
Write a consumer secret for Twitter in the Consumer Secret field.
Select a background color for the button in the Button Background Color field.
Select a font color for the button in the Button Font Color field.
Select a color for the icon in the Icon Color field.
Select a background color for Icon in the Icon Background Color field.
Write fa-twitter in the Font Class field.
Enter a URL for callback in the Callback URL field.

Step - 5

Next, expand the Google section and do the following:

Google Login

Select YES in the Enable field.
Enter the client id for Google in the Client ID field.
Enter the client secret for Google in the Client Secret field.
Enter a redirect URL for Google in the Redirect URL field.
Select a background color for the button in the Button Background Color field.
Select a color for the button font in the Button Font Color field.
Select a color for the icon in the Icon Color field.
Write fa-google in the Font Class field.

Step - 6

After that, expand the Instagram section and do the following:

Instagram Login

Select YES in the Enable field.
Enter the client ID for Instagram in the Client ID field.
Enter the Client Secret for Instagram in the Client Secret field.
Enter a redirect URL for Instagram in the Redirect URLs field.
Select a background color for the button in the Button Background Color field.
Select a font color for the button in the Button Font Color field.
Select a color for the icon in the Icon Color field.
Select a background color for the icon in the Icon Background Color field.
Write fa-instagram in the Font Class field.

Step - 7

Lastly, expand the LinkedIn section and do the following:

Select YES in the Enable field.
Enter the API key for LinkedIn in the API Key field.
Enter client key for LinkedIn in the Client Key field.
Enter a URL for authorized redirect in the Authorized Redirect URLs field.
Select a background color for the button in the Button Background Color field.
Select a font color for the button in the Button Font Color field.
Select a color for the icon in the Icon Color field.
Select a background color for the icon in the Icon Background Color field.
Write fa-linkedin in the Font Class field.

Now, this is how you can configure the main popular social media platforms for the social login feature.

Similar to this, you can also configure many more social media platforms like Yahoo, Windows Live, Foursquare, Amazon, Reddit, Flickr, Vimeo, Tumblr, Soundcloud, and Dropbox.