Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

1. Social Login Installation Guides Image Added

2. Social Login User Guide 

Support Portal: http://servicedesk.izysync.com/servicedesk/customer/portal/30 

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 our email address below.

Created: 11/05/2016 | By: Magenest | Email: [email protected]

Table of Contents

 

 

Introduction

Image Removed

Magento 2 Social Login is an extension developed by Magenest, which helps customers connect to the Magento 2 stores in the flexible and easy way. 

Extension's page: Social Login and Share

Features For Admins 

  • Setting app for each social network.  

Features For Customers

  • Choosing one among up to 6 types of social accounts: Twitter, Facebook, Google, Linkedin, Pinterest, Instagram to login the Magento 2 stores. 
  • Sharing products on their social networks as: Twitter, Facebook, Google, Pinterest. 
  • Using Facebook accounts to comment on the Magento 2 stores.  

System Requirements

 Your store should be running on Magento 2 Community Edition version 2.0.0+.

 

Installation

Here we will guide you through the installation process of our extension. First off, open FileZilla, log in to your host as follows:

 

Image Removed

 

In the above example we switched the local site to the extension directory, and the remote site to the code directory. Now on the remote site window, inside app/code directory, create a folder named Magenest and go inside it. Now on your local site window, right click on Extension Name and click Upload. The extension will be uploaded onto your host in a few minutes.

The second method will require you to compress the extension into .zip or .tar.gz format, then execute the following command in your Command Line/Terminal:

    scp <path to your extension> <ssh server>:<path to Magenest directory>

Then log into your ssh server, go to Magenest directory and execute the following command to decompress the module:

    unzip <.zip compressed extension> 

Or

    tar -xzvf <.tar.gz compressed extension>
 

Now go to your Magento root directory, say it's named magento2, and execute the following commands:

    sudo chmod -R 755 .
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy
    sudo chmod -R 777 var pub

 

After running all these, your Command line/Terminal window might look like this:

 

Image Removed

 

Finally, you need to flush the cache by either type this into the Command Line/Terminal:

    php bin/magento cache:flush

Or go to System > Cache Management 

 

Image Removed

 

Select all and click on Submit for Enable status, then choose Flush Magento Cache to finish.  

Image Removed

 

Now you can go to your store and check if the extension is working as expected.

 

Configuration

General Configuration 

First, navigate to Store > Configuration > Magenest > Social Login, turn on sync operations of your choice. Admins are able to set whether customers can share products on their social login or not.  

 

Image Removed 

Specified Configuration

Go to Backend of Magento 2 stores > Stores > Configuration > Social login, under the Magenest section 

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

 

Image Removed
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.
In the sidebar, select Credentials under the APIs & auth section.
In the OAuth section of the page, select Create New 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 Client ID.
 

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 stores. 

 

Image Removed

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

 

Image Removed
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 My app button on the top right > Website > Skip and Create App ID then fill information in the below screenshot. 
Image Removed
Choose Settings link from the left menu section at the apps page, click on the Add Platform button under app ID and app secret, then enter your site URL.
Click on Save changes button. Select that App ID and App Secret and enter Configuration of Facebook.   
Image Removed
Click on App Review link from left side navigation menu panel. Make your app live and available it for public.
facebook-app-creation-tutorial-review-live-public-by-codexworldImage Removed

...

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

 

Image Removed
How to set Client ID and Client Secret of Twitter
Go to the Application Management page and login at your Twitter developer account..

 

twitter-app-creation-tutorial-by-codexworld-screencapture-1Image Removed

 

Click on the Create New App and you would be redirected to the application creation page.

 

twitter-app-creation-tutorial-by-codexworld-screencapture-2Image Removed

 

Enter your application details and click Create your Twitter application. 

Into the Keys and Access Tokens tab you can find Consumer Key (API Key)Consumer Secret (API Secret) and other Application Settings.

Under the Your Access Token section, click on Create my access token. Now you can see the Access Token details under the Your Access Token section.

Select that API Key and API Secret and enter Configuration of Twitter to finish. 

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

 

Image Removed
How to set Client ID and Client Secret of Pinterest 
Go to https://developers.pinterest.com/ and login at your Pinterest developer account.
Choose App > click on Create app button, enter Name and Description then choose Create button  
Image Removed
New tab is open with App ID and App secret, admins must add site URL for web in Platforms to login by using Pinterest accounts. Select App ID and App secret and enter Configuration of Pinterest.  
Image Removed
Instagram 
  • Enable: allow showing or hiding Instagram login button 
  • Client ID: Instagram application ID 
  • Client Secret: Instagram application secret 

 

Image Removed
How to set Client ID and Client Secret of Instagram
 
Go to https://www.instagram.com/developer/ and login at your Instagram 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 Client ID and Client Secret and enter Configuration of Instagram in Magento 2 stores.  
Image Removed
Linkedin
  • Enable: allow showing or hiding Linkedin login button 
  • Client ID: Linkedin application ID 
  • Client Secret: Linkedin application secret 

 

...

How to set Client ID and Client Secret of Linkedin   

...

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

...

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

...

 

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

...

 

  • 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 Facebook accounts. Then click on Post button to finish. 

Image Removed

 

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 steps above.
  • Flush the config cache. Your store and newly installed module should be working as expected.

 

Support

  • We will reply to support requests after 2 business days.
  • We will offer lifetime free update and 6 months 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 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