Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-marketplace-mod

    Social SignUp for Magento 2

    Magento 2 Social Signup module allows users to sign up on their site using social networks like Facebook, Twitter, Google, LinkedIn, and Instagram. Also, the admin can manage settings for social networks on the back end such as App ID, secret key, etc.

    In Magento 2 Social Signup module, the guest users can simply sign up at the checkout page as well through social media options. These options are present at the checkout page where the guest user can choose any option to log in.

    Features

    • It allows the users to sign-up on their site using social networks.
    • The customer selects one of their preferred social networks to sign up on your site.
    • Among the available social account, the customer can select the desired one.
    • Multiple social media options are present at the checkout page where the guest user can choose any option to log in.
    • The admin can enable or disable the customer to log in to their site using social networks.
    • Settings for social networks are managed by the admin on the backend such as App ID, secret key, etc.
    • All browser compatible(IE7+,FF,Chrome etc).
    • Compatible with Multi-Store.
    • The code is fully open & you can customize it according to your need.

    Installation

    Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder and inside the “src folder” we have – app folder. You need to transfer the app, folder into the Magento2 root directory on the server as shown below.

    If you have downloaded the Magento 2 Social Signup module from Magento Connect then,

    • unzip the respective extension zip and create Webkul(vendor)
    • then SocialSignup(module) name folder inside your Magento root directory as app/code/Webkul/
    • After that, move all module’s files inside /app/code/Webkul/SocialSignup/ folder in Magento root directory.

    Just after the upload, you can see the folders in your Magento2 Root Directory.

    Once the installation is successfully completed, you have to run these commands in the Magento 2 root directory.

    First command –


    Second Command –


    Third Command –


    After running the commands, you have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.

    Configuration of Multi-Lingual Support

    For the multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which admin wants to translate his store content).

    Language Translation

     If the user wants to translate their module from English to German then they need to follow the path app/code/Webkul/SocialSignup/i18n in their unzipped Magento Marketplace folder and will get a CSV file with name “en_US.csv”.

    After that, they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language.

    After editing the CSV, save it and then upload it to the path app/code/Webkul/SocialSignup/i18n where they have installed Magento2 on their server. The module will get translated in the German Language.

    It supports both the LTR and RTL languages. 

    Module Configuration

    After the successful installation of the Magento 2 Social Signup module admin will be able to view the Magento 2 Social  Signup configuration setting under Stores > Configuration > Social Signup.

    Social Sign-up On Customer’s End

    After configuration settings, Customers can find various social networks at the login page and also sign up into their site using social networks like Facebook, Twitter, Google, LinkedIn. There is no need to fill various fields for sign up.

    LinkedIn API Credentials

    First, click on the LinkedIn login button below page will be open.

    How to set-up Application for LinkedIn

    You can create a LinkedIn application using this link https://www.linkedin.com/secure/developer.

    To create an application Please follow these steps:

    1. Clicking the above link will navigate the user to the “My Application” page. Here, the user will click on the “Create Application” button.

    2. Moreover, fill out the form to register a New Application.

    3. After that, you can receive Application details with your “Consumer Key” and “Consumer Secret”.

    **Note:
    Set the OAuth Redirect URL like this – www.example.com/socialsignup/linkedin/connect/

    Google API Credentials

    After clicking on the Google login button below page will be open.

    How to set-up Application for Google

    You can create a Google application using this link https://console.developers.google.com/project

    Steps to create an Application:

    1.  Go to your API & Services ->Library 


    2. Now click Google+API under the section Social.

    3.  Now, click the Enable button to enable the Google+ API.


    4.  Now, click My Project to create a new project.

    5. On clicking My Project, a pop-up will appear. Click “New Project” link.

    6. Enter the name for your project so that you can identify your project. Please note that you should not include any Google word for your project name.

    7. Meanwhile, go to the Credentials menu option and then click on Create credentials.

    8 After that, click to create the OAuth client ID.

    9.  To configure the consent screen, click the “Configure consent screen” button.

    10. Enter the product name that is to be shown to the users and then click the Save button.

    11. Select the Application type and enter the Authorized JavaScript origins and the Authorized redirect URLs. Click the Create button.

    **Note:
    Set the OAuth Redirect URL like this – www.example.com/socialsignup/google/connect/

    12. Finally, after clicking the Create button in the above step you will get the Client Id and Client Secret.

    Twitter API Credentials

    After clicking on the Twitter login button below page will be open.

    How to set-up Application for Twitter

    You can create a Twitter application using this link https://apps.twitter.com/

    Steps to create a Twitter Application:

    1. Click on “Create New App”

    2. After that, fill out the form to Create a New Twitter Application.

    **Note:
    Set the Callback URL as – www.example.com/socialsignup/twitter/connect/

    3. Before moving forward, you need to agree Twitter’s Developer Agreement and Policy. Once you are done with reading all the policies and use cases, click on Create button.

    4.  In the end, receive your Consumer Key and Secret under Keys And Access Tokens

    Note:

    Twitter doesn’t send the Email Id of the customer at the time of Login. It sends only Screen Name. So kindly update your Email Id and Password after sign up with Twitter.

    Facebook API Credentials

    First, click on the Facebook login button below page will be open.

    How to set-up Application for Facebook

    You can create a Facebook application using this link https://developers.facebook.com/

    • Facebook requires that you create an external application linking your website to their API.
    • App Id and App Secret (also sometimes referred to as Consumer Key and Secret or Client Id and Secret) are what we call an application credential.
    • Meanwhile, this application will link your website example.com to Facebook API and these credentials are needed in order for Facebook users to access your website.

    To enable authentication with this provider and to register a new Facebook API Application, follow the steps:
    Step 1
    First, go to https://developers.facebook.com/

    Step 2
    Log in and select “Add a New App” from the “My Apps” menu at the top.

    Step 3
    Meanwhile, a popup will display. Fill out “Display Name” for your app and the “Contact Email” and hit “Create App ID”.

    Step 4
    Go to Settings page and enter “App Domains”.

    After that, click “Add Platform” and choose “Website”.

    And enter the “Site URL”.


    Step 5
    The created application credentials (APP ID and App Secret) will be shown like the image below.


    Step 6
    Meanwhile, copy and insert “App ID” and “App Secret” in the Configuration setting of the extension in the admin backend.

    Instagram API Credentials

    After Clicking on the Instagram Login button below page will open up where you need to put in your username and password as shown below.

    How to set-up Application for Instagram

    Steps to create an Instagram Application-

    1.) You can create an Instagram application by using this link https://instagram.com/developer/ -> Register your application.2.) Fill the application form and Redirect URIs.

    **Note:
    Set the Redirect URL(s) as – www.example.com/socialsignup/instagram/connect/

    3.) After that, you can get Client ID and Client Secret for your purposes.

    For New Users

    New users can register from the link: https://developers.facebook.com/docs/instagram-basic-display-api

    There the user will click on the login button.

    After that, they will navigate to the login page. If the user is a new user then they will create an account by clicking on the Create New Account button:

    Further, the form will appear as shown in the image below:

    After the login/ signup, the user will navigate to the Instagram Basic Display API page. Further, the user will click on the Create App button:

    The user then needs to add the App Display Name and Contact Email ID:

    On the next page, the user will select the Instagram option by clicking the Set Up button as shown in the image below:

    Further, the user will navigate to Products > Instagram > Basic Display, there the user will click on the Create New App button:

    After that, provide the name of a new Instagram app ID, as shown in the image below

    Finally, the Instagram App ID and the Instagram App Secret will be visible as shown in the image below. The user copy-pastes it to the Instagram module configurations:

    The user can also add the redirect links for the created app.

    Social Signup for Guest Users

    The customer can proceed to choose a product from the store and after adding the product to cart, proceed to checkout as shown in the image.

    In the Checkout Page, the customer or a guest user can sign-up through any social media site.

    Multiple options for the social media are present in the checkout page and the guest user/ customer can simply click on any of the options in order to login.

    In the image below, the customer has chosen to log in through facebook.com.

    On clicking the Facebook log in button on the checkout page, a Facebook login page would open through which the guest user can easily log in.

    Further, the customers need to log in to any social media account by filling up the credentials. Further, the customer will proceed fro checkout process as shown in the image below:

    Meanwhile, the customer will provide the details and click on Next. After that, the customer will move to the payment selection page. Once, the selection is done the customer will click on Place Order.

    Also, the customer will receive a success message with the order number as shown in the image below:

    That is all for the Magento 2 Social Sign-up module. Still, have any issue feel free to add a ticket and let us know your views to make the module better at http://webkul.uvdesk.com

    Current Product Version - 3.0.0

    Supported Framework Version - 2.0.x,2.1.x,2.2.x,2.3.x

    . . .

    Comments (4)

    Add Your Comment

  • lola
    will it show up on /checkout/ page in magento 2?
    • Webkul Support
      Hi Lola,
      Currently, the feature is not there, but we are in the process of updating the add-on. In near future you should find it in the module. For, further details please email us at support@webkul.com
  • Michelle
    Hello, I am getting the following error after trying to set up Twitter.

    “Fatal error: Cannot instantiate interface MagentoFrameworkControllerResultInterface in ……..vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php on line 93”

    Also the Twitter configuration form fields do not match the fields in Twitter application. There is nothing called “Application Id” and it’s not clear what “Secret” refers to. The Twitter application has the following information:

    1. Consumer Key (API Key)

    2. Consumer Secret (API Secret)

    3. Access Token

    4. Access Token Secret

    • webkul
      That’s strange please email the issue at support@webkul.com and we will look in to it thanks
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index