This page explains to set up up the Social Login app on your website.  An IT resource is required to enable Social Login because programming is involved.


Step 1: Integrate the ShopSocially tag on your site


Integrate the ShopSocially tag on your website. This integration is needed to place the Social Login button on your website. Click here for detailed information on integration.


Step 2: Insert the Social Login code on your web page



Embed the Social Login buttons on the webpage and use the onClick attribute for those images to call ShopSocially's Social Login app. See an example HTML code below:


<!-- This is the HTML tag for the Facebook login button embedded on the webpage -->

<img src="Facebook_button_URL" style="cursor:pointer;" alt="" onclick="ss_mi.show_app('social_login_app',{network:'facebook'})>

<!-- Request Parameter: network_type

Description: This is the account from which user wants to initiate login.

The following network types are supported as of now:

1. 'facebook'

2. 'google'

3. 'yahoo'

4. 'amazon'

5. 'twitter'

6. 'linkedin'

-->


Alternately, you can insert the Social Login buttons dynamically on the page. In this case, you only need to insert a container element on that page. Based on the Social Login options enabled in the dashboard, ShopSocially will render the buttons on that page at run time. Here is the snippet of code you need to paste on the web page where you want the Social Login button to show up.


<!-- This div is where the “Sign in with Facebook button” will show up -->

<div id="ssmi_social_login_div" style="margin: 0 auto;"></div>


The below snippet contains placeholder code for login handling. It should be placed after the placeholder for the Social Login buttons. An IT resource will be needed to write code to implement the login scenarios.


<!--This Javascript snippet -->

<script language="javascript" type="text/javascript">

// Below is the successful login handling function

// This function is called ONLY IF the social login was successful

var ssmi_social_login_success = function(user_info){

// You will need to insert Javascript code here to handle successful login.

// Take the user_info data object and extract

// values from it.Use these values to log the person in

// and to update your database. Info on the user_info

// object is provided below.

 };

// Below is the login failure handling function

// This function is called ONLY IF the social login failed

var ssmi_social_login_failure = function(failure_info){

// You will need to insert Javascript code here handle login failure.

// Typically, you can choose to do nothing.

// However, a failure reason is available in

// the failure_info field if you choose to use it.

};

</script>


 What needs to be done on successful login? 

  • You will need to add some Javascript code (success handler code) to handle ShopSocially responses.
  • If social login is successful, ShopSocially will respond back with a user_info object and an access token.

  • For successful login, verify the user_info object using the access token. Please follow this link for the access_token Validation Endpoint API implementation.

  • Upon validation the Javascript code will extract values from the user_info data object, update the database and logs the person in.
  • You can refer to this link for all the possible use cases the Javascript should handle.

Here is an example snippet of code:


//

curl --header "partner-id: <your-partner-id>" --header "api-key: <your-api-key>"

var ssmi_social_login_success = function(user_info)

{

//validate the user_info object

https://shopsocially.com/ss_user/validate_access_token?access_token=<your-access_token>

if (success==true)

{

// personData is an internal object that is being

// constructed from the Social Login user_info object

personData = {

userEmail: user_info.email,

loginType: user_info.network_type,

ssUserID: user_info.ss_user_id,

firstName: user_info.first_name,

lastName: user_info.last_name

};

//If the network_type is 'facebook', some additional

//fields are available.

if (person_data.login_type === 'facebook'){

personData.fbUserID = user_info.facebook.fb_user_id;

personData.dateOfBirth = user_info.facebook.date_of_birth;

personData.userGender = user_info.facebook.gender;

}

//similar to the above you can get the data for other social network

//check user_info_object document for more details

//once you have all the data you can update your database

//make a query to your database to see if the user email exists

if (user_exists(userEmail))

{

//update the database

}

else

{

//create a new user in your database

}

//authenticate the user and log him in

authenticate_social_login_user(person_data);

}

}


What needs to be done on login failure?

  • If social login is not successful, ShopSocially will respond back with a failure_info object. 
  • Typically, you can choose to do nothing. 
  • However, a failure reason is available in the failure_info field if you choose to use it.

Here are some additional resources that you will need to write your social login handling functions.


user_info object This object is passed when the social login is successful. You can extract fields from this  object to integrate into your native login system.
failure_info object This object is passed when the login fails. You can extract fields from this object to handle failure.

Login Scenarios

This page will explain all scenarios you should handle when implementing social login. All corner cases are covered.
Social Login Reference Example This is a Social Login example that implements all the login scenarios described above. It is to help you implement your code. You can copy the code from the reference implementation and modify it to suit your needs.

Step 3: Enable the Social Login app in the ShopSocially Merchant Center


Create a new Social Login app and configure the Social login button.Follow this link for the configuration instruction.


That’s it! Test your code thoroughly and your Social Login implementation is ready to go.