Thank you for purchasing our extension. If you have any questions that are beyond the scope of this document, do not hesitate to leave us an email via [email protected]

Created: 1112/0507/2016 2021 | By: Magenest | Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/30 

...

Introduction

...

Magento 2 Social Login  is is an extension developed by Magenest to help customers login log in to Magento 2 stores conveniently with their social accounts. 

Image AddedExtension's page: Social Login and Share

Features For Admins 

• Set up app for each social network including : TwitterTwitter, Facebook, Google, Amazon, LinkedIn, Pinterest, Instagram Reddit, Reddit, LineLINE
• Add login popup with social login options
• Add social login options to sign in, sign up page
• Set social login suggestion suggestions for the customer at checkout page for customers who used to login with a social account on the store
• Add comment section using a Facebook account for customer customers on the product detail page
• Add social sharing buttons on the product page
• Monitor social login and manage social account
• Social login widget type

Features For Customers

• Choose to login log in with one of 9 10 social accounts: Twitter, Facebook, Google, Amazon, Linkedin, Pinterest, Instagram Reddit, Reddit, LineLINE, Apple ID
• Customer's store account can be linked with multiple social accounts
• Share products on their social networks
• Use the Facebook account to comment on the Magento 2 store
• Be suggested with social login at the checkout page if they used to login with a social account on the store  

System Requirements

 Your store should be running on Magento 2 Community Edition version 2.2.0x.0, 2.13.x, 2 2.24.x.

...

Configuration

General Configuration 

First, navigate to Stores > Configuration > Magenest > Social Login, you will be able to enable:

• The login popup when the customer clicks on the Sign In button on the top menu bar
• Display On: Select area use social login
  • The social login options in Sign Up/Create an account page
  • The social login on the checkout page, including the
  sign in
  • Sign In button on the top of the page, and the social login suggestion for customers who used to login with social accounts on the store
  • The ability to comment on the product page using a Facebook account
• The ability to share the product link via social networks that are chosen in the social sharing options: Twitter, Facebook, Google+, LinkedIn, Pinterest, Reddit

...

 On the same page, scroll down to see the Credentials setting section.

Image Added

 In In order to connect the social app to your Magento 2 store, you have to set up the app as follows:

How to set Client ID and Client Secret of Google+

 Go to the Google Developers Console – https://console.developers.google.com/

Select an existing project, or create a new project by clicking Create Project:

• In the Project name field, type in a name for your new project.

• In the Project ID field, the console has created project ID.

• Click on the Create button and the project to be created within some seconds.

In the left sidebar, select APIs under the APIs & auth section.

Find the Google+ API service and set its status to Enable.

Click Create Credentials select OAuth Client ID. 

• Create Client ID dialog box would be appearing for choosing application type.

• In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

• Choose Email address, enter Product name and save the form.

• In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

• In the Authorized redirect URI field, enter the redirect URL.

• Click on Create.

Image Removed

Image Removed

Now you can see the Client ID for web application section. Select Client ID  and Client Secret then fill in Configuration of Google in Backend of Magento 2 store.

 Image Removed

• Enable: To enable Google login and sharing option

 

• Client ID: Google+ application ID 

 

• Client Secret: Google+ application secret 
• Redirect URI: You will use this URL in Google to connect the app

 

 

Image Removed

...

Apple ID

 How to set Apple Team ID, Client ID, Key Id, and File Key of Apple

To configure the extension, it is required to have an Apple Developer account. If you don't have it, please go to the Apple Developer page to create one.

Note that account creation and its approval might take time.

• Enable: Choose Yes to enable the Apple ID to log in feature
• Enter the Apple Team ID, Client ID, Key ID that were previously generated at the Apple Developer account.

  Apple configuration guide

• Please keep in mind that you can download the Key file ONLY ONCE. Make sure you saved the file in a secured place so that you can get back to it later if necessary.
• Lastly, check the key information to find your Key ID which you'll need to configure the extension in the Magento 2 backend.
• After a successful Key ID verification, the file will no longer be stored at your Magento server. This is to prevent creating excessive files on a server.
• Please take into consideration that all Apple Developer credentials that you have created will be valid for 6 months, as designed by Apple guidelines. Please timely update all necessary API credentials to guarantee proper add-on functioning.

Image Added

...

Google+ 

How to set Client ID and Client Secret of Google+

 Go to the Google Developers Console – https://console.developers.google.com/

 Google+ configuration guide

Image Added

...

 How

How to set Client ID and Client Secret of Facebook

Go to the https://developers.facebook.com/apps/ and login at your Facebook developer account.

Click Add a New App button on the top right to create a new app ID. A popup will display as below

Image Removed

In the Facebook for developers Settings, choose Basic, click on the Add Platform button, then enter your site URL.

 

Image Removed

 

Click on Save changes button. You will see that there are App ID and App secret, note that you will need these to configure the module in the backend of Magento 2.

Image Removed

Then you have to make your app public to everyone. On the top bar, click on Status, a pop up as below will be displayed. Confirm to make the app public.

Image Removed

 

 Facebook configuration guide

 In In Magento 2 backend, Facebook settings:

...

Image Modified

How  How to set Client ID and Client Secret of Twitter

Go to the Application Management page and login with your Twitter developer account. 

Follow this tutorial article to create a Twitter app http://docs.inboundnow.com/guide/create-twitter-application/ 

 

 

 

Image Removed

 

 Twitter configuration guide

 

 In In Magento 2 backend, Twitter settings:

...

Image Modified

Pinterest

Image Modified

Instagram 

Line

 How

 How

to set Client ID and Client Secret of

Instagram

Line

 

Go to https://

www

developers.

instagram

line.

com

biz/

developer/ and login at your Instagram

en/ and log in to your Line developer account.

 

Choose Manage Clients, Register new Client ID, add Redirect Uri to Valid redirect URIs. and uncheck Disable implicit OAuth in tab Security

Image Removed

 

Image Removed

After clicking on Register button, Manage Clients tab is open, select Client ID and Client Secret in Manage and enter Configuration of Instagram in Magento 2 stores.  

Image Removed

• Enable: allow showing or hiding Instagram login button 
• Client ID: Instagram application ID 
• Client Secret: Instagram application secret 

 

Image Removed

How

 Line configuration guide

 In Magento 2 backend, go to Line configuration.

• Enable: To enable the Line login and share 
• Client ID: Line Chanel ID
• Client Secret: Channel Secret
• RedirectURI: Use this on Line to create an application.

Image Added

---

Amazon

 How to set Client ID and Client Secret of

Instagram 

Amazon

• Go to https://

www

• developer.

instagram

• amazon.com/

developer/ and login at your Instagram

•  and login with your Amazon developer account.

 

Choose Manage Clients, fill information for Register new Client ID 

Image Removed

After click on Register button, Manage Clients tab is open, select

 Amazon configuration guide

• Copy Client ID and Client Secret, and paste to your Magento 2 backend setting.

Image Added

...

Reddit

 How to set Client ID and Client Secret

...

of Reddit

Go to https://www.reddit.com/prefs/apps and log in with your developer account.

 Reddit configuration guide

 In Magento 2 backend, go to Reddit configuration.

• Enable: To enable the Reddit login and share 
• Client ID: Reddit

...

Image Removed

...

• application ID 
• Client Secret:

...

•  Reddit application secret 
• Redirect URI: Use this on Reddit to create an application.

Image Added

 How

 

Image Removed

How

to set Client ID and Client Secret of

Linkedin 

LinkedIn   

 

Go to to https://developer.linkedin.com/ and login at and login with your Linkedin LinkedIn developer account.

 

Choose My Apps > click on Create Application button, fill information in form below:

Image Removed

 

After choosing Submit button, new tab is open, tick all the box in Default Application Permissions and add URLs to authorize your web. Select Client ID and Client Secret for Configuration of Linkedin to finish. 

Image Removed

When done, please press Save Config, your configuration is ready to use.

Front end

How the social login button will be represented to your customers

• Show the Social Login buttons below Customer sign in form

...

LinkedIn configuration guide

 In Magento 2 backend, go to LinkedIn configuration

Image Added

Zalo

 Zalo configuration guide

 In Magento 2 backend, go to Zalo configuration

• Enable: To enable Zalologin and share option
• Client ID: Zalo application ID 
• Client Secret: Zalo application secret 
• Redirect URI: Use this in Zalo to create an application.

Image Added

...

Monitor Social Login and Manage Social Account

 Manage Social Account

On the admin sidebar, choose Customer > Social Accounts

Image Added

 Monitor Social Login:

On the admin sidebar, choose Customer > Monitor

• Social Login Chart: Ratio social account
• Top Social Login: Top 3 social login used most popular
• Other Connections: Other social login used

Image Added

...

Social Login Widget

Social Login Widget Configuration

Title: Set title for the widget

Display Type: Select mode display widget (slider or list icon)

Image Added

...

Front end

Social login options

• Show the Social Login options on Sign Up page

Image Added

• Show popup with social login options when clicking on Sign In

Image Added

My Social Accounts

Image Added

Connected Accounts: Show all social accounts connected

Connect With: Listing social account is not connected

Request Password: Sending reset password email 

Unlink: Unlink social account with current account

 Error message if the extension couldn’t send reset password email or email customer is generated by this extension.

Image Added

Image Added

Once the social accounts have been linked you can log in by any of them.

Sharing on social networks

Customers can share the product link via their social network with the sharing options available for Twitter, Facebook, Linked In, Pinterest, and Reddit.

Image Added

Comment on the product using Facebook account

Under the product descriptions

• Show the Social Login buttons below Customer registration form

Image Removed

• Show the Social network buttons for sharing as: Twitter, Facebook, Google, Pinterest and show the box for leaving comments by Facebook accounts inside Detailed product information tab

...

How to use social network accounts in Magento 2 stores  

Log in using the social network account

• Google+ accounts

Image Removed

• Facebook accounts 

Image Removed

• Twitter accounts 

Image Removed

• Instagram accounts

Image Removed

• Linkedin accounts 

Image Removed

• Pinterest accounts  

Image Removed

Sharing products on their social networks as: Twitter, Facebook, Google, Pinterest 

At detailed product information, customers can share product on their social network using one of 4 button: Twitter, Facebook, Google, and Pinterest. 

Image Removed

Leaving a comment using Facebook accounts 

At detailed product information, click on Comment tab, customers can leave a comment using their Facebook accounts. Then click on Post button to finish. 

Image Removed

account.

Image Added

Social login suggestions on the checkout page

If customers used to login with social accounts on the store, on the checkout page, when they fill in the email address (which is corresponding with their social account email), the suggestion to login with that social account will be displayed.

Image Added

Display widget - Slider for social login

Image Added

Display widget - List icon for social login

Image Added

 After user login, this widget will be hidden. 

...

Update

• When a new update is available, we will provide you with a new package containing our updated extension.
• You will have to delete the module directory and repeat the installing installation steps above.
• Flush the config cache. Your store and newly installed module should be working as expected.

...

...

Support

• We will reply to support requests within 2 business days.
• We will offer offer a lifetime free update and 6 months of free support for all of our paid products. Support includes answering questions related to our products, bug/error fixing to make sure our products fit well in your site exactly like our demo.
• Support DOES NOT include other series services such as customizing our products, installation, and uninstallation service.

...

...

Once again, thank you for purchasing our extension. If you have any questions relating to this extension, please do not hesitate to contact us for support.Magenest