1. Activating Social Login
This document walks through the creation of apps for each social network that you can connect to SmartSeller Social Login. The Social Login app currently supports several social media platform. However, we will only focus on the following popular platforms on this article:
- Facebook Login
- Instagram Login
- Twitter Login
- Google Login
- Yahoo Login
1) Activate your Social Login at Apps > Social Media > Activate Social Login.
2) Once the Social Login App is activated, you can enter credentials and adjust the settings for each under Online Store > Settings > Social Login by selecting the correct service.
2. Connecting Facebook Login
1. To connect your online store to Facebook, log into your Facebook account. Go to developers.facebook.com while logged in and click â€œMy Apps > Add a New Appâ€ to create an app.
2. Enter your app name + an email address for your store:
3. Scroll down and choose â€œFacebook Loginâ€ for the app type, and click â€œSet Upâ€:
4. Do not use the â€œQuickstartâ€ youâ€™ll be taken into; instead, click â€œSettings > Basicâ€ for the app:
5. Click â€œAdd platformâ€, and then select â€œWebsiteâ€ as your platform.
6. Now enter the rest of the basic details for your store. You can
- set the display name (the name of your store; will be shown to customers when they approve app access to log in),
- set â€œcategoryâ€ to whatever youâ€™d like,
- and optionally add site URLs and a logo.
Then click “Save Changes”.
7. Click on â€œFacebook login > Settingsâ€ next.
8. Copy the “Redirect URI”Â from SmartSeller. The Redirect URI can be obtained at Online Store > Settings > Social Login > Facebook Settings.
9. Paste the “Redirect URI”Â into Valid OAuth Redirect URIs. (See below)
8. Last step! Go to â€œApp Reviewâ€ and change the app status to live / public (or do so from your top bar):
9. The setup is done! Now you can go back to â€œSettingsâ€ or â€œDashboardâ€ and grab your App ID and Secret. Enter them under Online Store > Settings > Social Login > Facebook.
3. Connecting Twitter Login
1. To connect your online store to Twitter, you must create a Twitter app. Log into Twitter, then go to apps.twitter.com. Click â€œCreate Appâ€:
2. Enter the name of your store and a description for your app. Use your site URL for the website URL.
The callback URL for Twitter is a bit of a weird one. There is an example listed under Online Store > Settings > Social Login > Twitter. It will probably look something like this:
BUT MAY BE DIFFERENT. Please refer to the app settings for this.
https://MYSTORE.smartseller.online/?wc-api=authalso works in our tests.
This is most likely a bug in the Twitter platform which weâ€™ve raised with their team, and this document will be updated if they provide feedback.
3. Agree to the developer agreement, and click â€œCreate your Twitter Applicationâ€. Once youâ€™ve confirmed your settings and created your app, youâ€™ll be able to manage the app.
4. From the main app page, navigate to your â€œSettingsâ€ page and ensure the option to â€œAllow this application to be used with sign in with Twitterâ€ is enabled, then save.
5. Confirm Twitter Sign In
You can also change the app icon to your store logo if desired, or adjust other app settings that customers will see.
6. Now our setup is done. All we have to do is grab the API Key and API Secret from the â€œKeys and Access Tokensâ€ page:
7. Now you can copy these credentials and save them under Online Store > Settings > Social Login > Twitter.
4. Connecting Instagram Login
1. To connect your online store to Instagram, visit the Instagram Developer Center and log into your Instagram account. Click â€œManage Clientsâ€ next your profile info:
2. Create Instagram Apps
If this is the first time you are adding an app or plugin, Instagram will ask you a few questions. You can enter these responses:
- Your website: Enter your websiteâ€™s home URL
- Phone number: Enter your phone number (they wonâ€™t call you)
- What do you want to build with the API? An app for my website.
3. Click â€œSign Upâ€, and then click â€œManage Clientsâ€ again. Youâ€™ll now be able to â€œRegister a New Clientâ€ by clicking the button:
4. Register a New Client
Youâ€™ll be taken to the â€œregister clientâ€ form next. You should enter your store name for the Application name and complete the additional fields. The URL you should enter in Valid Redirect URIs is listed under Online Store > Settings > Social Login > Instagram as the â€œOAuth redirect_uriâ€. It will probably look something like this:
BUT MAY BE DIFFERENT. Please refer to the app settings for this.
5. Under the â€œSecurityâ€ Tab, leave â€œDisable Implicit OAuthâ€ enabled and â€œEnforce Signed requestsâ€ unchecked.You can now enter the captcha and click â€œRegisterâ€.
6. Then it will redirect you to a page that provides you with your Client ID and Client Secret, which you need to copy.
7. You can now enter these credentials under Online Store > Settings > Social Login > Instagram and save your settings. This will enable Sandbox testing for your app. Set up is not completed yet. You can only test with your own Instagram account.
8. To set your app live, you must submit it for approval to Instagram. Click â€œEditâ€ for your application, and go to the â€œPermissionsâ€ tab. Here you can submit your app for approval by Instagram.
9. This will take you to the submission form, where you must include a description of what your app does, and a screencast of the app in action on your site. Here is a sample description you can use:
We recommend using your own screencast URL of the plugin in action on your site, as this most likely to be approved by Instagram. If you have no capability to make your own screencast, then our demo plugin screencast could be used as a (not-recommended) backup:
10. Once youâ€™ve completed this form, click â€œSubmitâ€ to submit your app for review. This will submit the app, and it will not be live until reviewed and approved by Instagram.
5. Connecting Google Login
1. To connect your online store to Google, log into your Google account. While logged in, navigate to https://console.cloud.google.com/cloud-resource-manager. Click â€œCreate Projectâ€:
2. Enter your projectâ€™s name (this is shown to customers to approve the login) and click â€œCreateâ€:
3. Wait a moment for Google to create your project, it may take a bit of time for the page to refresh.
4. Once youâ€™ve created a project, click on Menu on top left > APIs & Services > Credentials.
5. Once in the credential page,Â then select â€œOAuth Consent Screenâ€ at the top. Youâ€™ll need to enter your site / company information here.
6. Now go to the â€œCredentialsâ€ tab and click â€œCreate credentialsâ€. Youâ€™ll select â€œOAuth client IDâ€ for the type.
7. Select â€œWeb applicationâ€ for your application type, and complete the application fields.
9. The â€œAuthorized Redirect URIâ€ is listed under Online Store > Settings > Social Login > Google. It will probably look something like this:
BUT MAY BE DIFFERENT. Please refer to the plugin settings for this.
10. Click â€œCreateâ€ to save this setup and generate your credentials. You can copy these credentials and save them under Online Store > Settings > Social Login > Google.
6. Connecting Yahoo Login
1. To connect your online store to Yahoo, you must create a Yahoo application. Go to Yahoo Developer Network and create an account (or sign in if you have an existing Yahoo account â€” it doesnâ€™t have to be a developer account).
2. Once youâ€™re signed into Yahoo, go to Create an App. This will let you enter fields for your app:
- Application Name â€“ enter any name that users of your website will recognize
- Application Type â€“ Web Application
3. Create app.
- Callback Domain – your website’s home URL, i.e., https://MYSTORE.smartseller.online
- API Permissions – check the “Profiles (Social Directory)” option, then choose the “Read/Write Public and Private” radio button.
4. Change permissions.
Once you’ve completed these fields, click “Create App”. You’ll see a success message that provides a Client ID and Client Secret.
5. Get Client ID and Secret.
Enter these in the app settings to finish enabling Yahoo Login.