SP Social Login

View demoMore detail
SP Social Login for Prestashop 1.7.2.x allows Customers to log in to your site using their accounts of various popular networks: Facebook, Google, Yahoo, Twitter, LinkedIn, Instagram. Customers only need to click on the social button and all necessary information is completed automatically. That is the main reason why SP Social Login extension is considered as the great solution for that.
This guide will help you install SP Social Login.

 

1COMPATIBLE WITH PRESTASHOP

This module is fully compatible with Prestashop Community Edition version 1.7.2.x

2REQUIREMENT

To install this module you must have a working version of Prestashop already installed. If you need help installing Prestashop, follow below sites and tutorials from Prestashop.com, hope everything that you need are there.

3 INSTALLATION

  • Firstly, you must install Prestashop version 1.7.2.x.
  • Secondly, prepare for installing the SP Social Login Module. The installation contains 4 steps as following:

Step 1: Login to your Prestashop admin panel and Go to Improve >> Modules >> Modules Services. At the top of the page, click the Upload a Module button.

Step 2: Click “Select File” to select your module .zip file “spsociallogin.zip” that you have downloaded.

Step 3: The uploading process will be started. You will see the message that “Module installed”.

Step 4: Finally, the new module will be located in the modules list. Search the name of module and Click on the Configure button to configure the module.

4CONFIGURATION

4.1 Layout Demo

You could see the appearance of SP Social Login module as following:

4.2 Backend

Note: We used the images of module’s installtion on Prestashop 1.7.2.x to illustrate

In the Administrator Page, navigate to Improve -> Modules -> Module Services and find SP Social Login to configure.

Let’s look at the parameter in detail:

Facebook, Google, Twitter, LinkedIn, Instagram, Yahoo.

  • Enable: Choose Yes or No to enable or disable Social button on the front-end.

    • 4.3 How to configuration social button.

    4.3.1 How do I get the Facebook application ID and application secret?

    Step 1: Go to page: https://developers.facebook.com/apps and then choose “Add a New app”. After that, you need to fill in your display name and contact email. Remember to click “Create App ID”.

    Step 2: At the bottom of the left hand menu click “Add Product link”.

    Step 3: Click button “Setup”.

    Step 4: Select “Web”.

    Step 5: Enter your Site URL and hit save. Hit Continue then keep clicking Next, ignoring all the code, until you get to Step 5.

    Step 6: In the left hand menu you should now see Login to Facebook, click the “Settings” menu item underneath it.

    Step 7: In this step, go to “Review the application”, select “public” to Your app is live and available to everyone..

    Step 8: Now, go to “Installation >> Basic Information” to get App ID and App Secret

    Step 9: After finishing, let’s come back to Admin page to enter your App ID and App Secret.

    4.3.2 How do I get the Google client ID and client Secret?
    Step 1: Go to page: https://code.google.com/apis/console/ and then click “Create Project”.

    After that, fill in your Project Name and then click Create:

    Step 2: Come to Dashboard and click “Enable APIS And Servies”.

    Step 3: Click “Credentials” tab and you will see 3 subtitles as demonstrated below. Please click “OAuth consent screen” tab on which you need to fill in your Product name shown to users and then click Save.

    Step 4: Back to the “Credential” tab, after clicking “add credentials” button, you will see several choices. Please Choose “OAuth client ID” and “Web application” afterwards.

    Then, fill in all information required.

    Step 5: Get your Client IP and Client Secret

    4.3.3 How do I get the Twitter Consumer Key and Consumer Secret?
    Step 1: Go to page: https://dev.twitter.com/apps and then choose “Add a New app”. After that, you need to fill in your name, description, website, calback URL. Remember to click “Create your Twitter application”.

    Step 2: Click “Keys and Access Tokens” tab to get Consumer Key and Consumer Secret

    4.3.4 How do I get the LinkedIn Client ID and Client Secret?
    Step 1: Go to page: https://www.linkedin.com/secure/developer and then choose “Create an application””.

    After that, you need to fill in required information. Remember to click “To send”.


    Step 2: Get Client ID and Client Secret. You will see some other fields but there are no need to fill in

    4.3.5 How do I get the Yahoo Client ID and Client Secret?
    Step 1: Go to page: https://developer.yahoo.com/apps/ and then choose “Create an app””.

    After that, you need to fill in required information. Remember to click “Create App”.


    Step 2: Step 2: Get your Client ID and Client Secret:

    4.3.6 How do I get the Instagram Client ID and Client Secret?
    Step 1: Go to page: http://instagram.com/developer/clients/manage/ and then click “Click a New Client””.

    Step 2: After that, you need to fill in required information.

    Step 3: After finishing these 2 steps, you can get your Client ID. Click “MANAGE” to get Client Secret:

    5SUPPORT – Back to top

    Thank you so much for purchasing this module. If you have any questions that are beyond the scope of this help file, please send us via: Support Tickets System

    Thanks so much!