WooCommerce Social Plugin: How to Create Social Apps

This document will help you to create Apps for each social network that you can connect to WooCommerce Social Plugin.

Once you have created them, you can enter credentials and make settings for each social network in WooSocial > Social Login by selecting the correct service. This guide will only walk through creating Apps for each network.

Connecting Facebook AppConnecting Google AppConnecting VK AppConnecting Twitter AppConnecting PayPal App

To create a Facebook App go to Facebook Developers Site. You need to log in to the site, using your verified Facebook account. If your account isn’t verified yet, you’ll receive a text message from Facebook to verify it. Make sure, that you have a mobile number set within your account, otherwise you won’t be able to create an App.

Important: You need to use a personal Facebook account for creating an App. A business account won’t work.

fb 1

On Facebook Developers page, click on My Apps at the top right-hand side and then – on Add a New App. A new window will pop up as shown below: 

fb 2Click on basic setup and enter a name for your new App, namespace and choose an App Category. Remind that you have to enter namespace minimum 7 letters and all fields are required. fb 3

When you click on Create App ID the “Security Check” window will pop up. Select the requested photos and click on Submit.

fb 4

Now you have successfully created the Facebook App and you should be redirected to the Application page which should look like the image below:

fb 5

Your newly created Facebook App will be in Sandbox Mode as default. To activate the App you should verify your email before. Go to Settings > Basic and type your email address:

fb 6

Save changes, go to App Review and enable the switch (should be “Yes”):fb 7Then click on Confirm button to make your App public.

fb 8

To post on Facebook you have to enter site URL and canvas URL. For adding URL go to Settings and click on Add Platform. It will pop up a window in which you have to add Facebook Canvas and Website.

fb 9After you will see the page where you have to type your Domain, Facebook Canvas URL, your Site URL and Mobile Site URL (they’re most likely the same like the URL for your homepage). Click Save Changes to complete.

fb 10

Note: Make sure, that the URL you put into “Site URL” and “Canvas URL” does match 100% your website URL, otherwise the App won’t work correctly and an error message will be shown when trying to connect with the App. So if your website URL does include the www like http://www.domain.com then you need to enter it like that. If your website URL doesn’t include the www, then you don’t need to include the www within the URL.

The setup is done! Now you can grab your App ID and App Secret and go back to WP Dashboard menu. Enter App ID and App Secret in WooSocial > Facebook settingsAfter you entered them, click on Save Changes button within the plugin’s settings page.

fb 11

Note: When you copy and paste all the needed IDs and Keys, make sure, that you don’t have empty spaces, either at the beginning or at the end of these entries. Otherwise, the App won’t work correctly and an error message will be shown when trying to connect with the App.

To create a Google+ App go to Google Developers Site. You need to log in to the site with your Google account if you aren’t already. The Google API Console page will load like shown below:

Unnamed image

Go to Select a project at the top right-hand side of that page and choose Create a project. A new window will pop up (see image below):

2

Enter “Project name” and your project ID will be auto generated. After that click on Create button to create Project. The Google Developer Console Dashboard will then load as shown below:

3

Click on Use Google APIs blue button and the Google API Project Services will be loaded. Find Google+ API link and click on it:

4

At the top left-hand side of the page that will appear click on Enable button to enable Google+ API. See image below:

5

Now navigate to Credentials tab on Dashboard left panel and go to OAuth consent screen tab on top menu. It will open page like shown below:

6

You have to add “Email Address” and “Product Name” on Consent Screen page. Without this info, your Apps will not work and will always generate an “invalid client id” error.

Navigate to Credentials tab on top menu, click on Create credentials button in the centre of the screen and choose OAuth client ID:

7

You will get a popup like below. Fill all the mandatory fields.

8

Note: Make sure, that the URL you put does match 100% your website URL, otherwise the App won’t work correctly and an error message will be shown when trying to connect with the App. So if your website URL does include the www like http://www.domain.com then you need to enter it like that. If your website URL doesn’t include the www, then you don’t need to include the www within the URL.

Once credentials are created, you will get App details. See image below:

9_1-1024x256

The setup is done! Now you can grab your Client ID and Client Secret and go back to WP Dashboard menu. Enter App ID and App Secret in WooSocial > Google settingsAfter you entered them, click on the Save Changes button within the plugin’s settings page.

10

Note: When you copy and paste all the needed IDs and Keys, make sure, that you don’t have empty spaces, either at the beginning or at the end of these entries. Otherwise, the App won’t work correctly and an error message will be shown when trying to connect with the App.

To create a VK.com App go to VK Developers SiteYou need to log in to the site, using your verified VK.com account. If your account isn’t verified yet, you’ll receive a text message from VK.com to verify it. Make sure, that you have a mobile number set within your account, otherwise you won’t be able to create an App.

vk 1

On VK.com Apps page, click on Create an Application on the centre of the screen or on the top right-hand side. A new page will be open (see image below). Enter a “Title” for your new App, choose an App Category as “Website”, enter “Site address” and “Base domain” and click on Connect Site.

vk 2

Note: Make sure, that the URL you put into “Site address” does match 100% your website URL, otherwise the App won’t work correctly and an error message will be shown when trying to connect with the App. So if your website URL does include the www like http://www.domain.com then you need to enter it like that. If your website URL doesn’t include the www, then you don’t need to include the www within the URL.

Now you get a “Confirmation window” as shown below. You can confirm adding App in a way you prefer: by getting a confirmation code on your mobile VK.com  App or with SMS message. Enter a confirmation code you’ll get and click on Confirm.vk 3The App has been added and you will get redirected on your App page.

vk 4

Go to Settings menu and make sure that your App status is “Application on and visible to all”.

vk 5

The setup is done! Now you can grab your Application ID and Secure key and go back to WP Dashboard menu. Enter Application ID and Secure key in WooSocial > VK settings. After you entered them, click on the Save Changes button within the plugin’s settings page.

vk 6

Note: When you copy and paste all the needed IDs and Keys, make sure, that you don’t have empty spaces, either at the beginning or at the end of these entries. Otherwise, the App won’t work correctly and an error message will be shown when trying to connect with the App.

To create a Twitter App go to Twitter Apps Management Site. You need to log in to the site, using your verified Twitter account. When you are logged in, click on Create New App button.

tw 1You will be redirected to the “Create an application” page, where you have to fill out all the information Twitter is asking for, as shown in the image below:

tw 2

Note: Make sure, that the URL you put into “Website” does match 100% your website URL, otherwise the App won’t work correctly and an error message will be shown when trying to connect with the App. So if your website URL does include the www like http://www.domain.com then you need to enter it like that. If your website URL doesn’t include the www, then you don’t need to include the www within the URL.

Then scroll down to the bottom of the page. Read and agree to the “Developer Agreement” and click on the Create your Twitter application.

tw 3

After you successfully created the Twitter App you’ll be redirected to App details page. Scroll to “Application Settings” section and make sure the “Access level” is set to Read and Write.

tw 4

If it’s not Read and Write, go to the “Permissions” tab, find an “Access” option and check Read and Write radio button. Scroll down and click on the Update Settings to save your changes. See image below:

tw 5

Important: After you saved your changes, go back to the “Permissions” tab and check, if the changes have been saved and the radio button is check on Read and Write. Sometimes it happens, that this doesn’t get saved on the first time. This setting is important, otherwise, the plugin won’t be able to post to your Twitter Account.

After go to the App’s API keys page by clicking on the “Keys and Access Tokens” tab. You should see that the API Key and API Secret have been generated already.

tw 6

Now you have to authorize the App. Scroll down to the bottom of that page and click on the Create my access token.

tw 7

This will create the access tokens for your Twitter App. After it has been created you should see them above the button as shown in the image below:

tw 8

The setup is done! Now you can grab your API Key and API Secret and go back to WP Dashboard menu. Enter API Key and API Secret in WooSocial > Twitter settings. After you entered them, click on the Save Changes button. Do also a copy of Twitter Access Tokens. 

tw 9

Note: When you copy and paste all the needed IDs and Keys, make sure, that you don’t have empty spaces, either at the beginning or at the end of these entries. Otherwise, the App won’t work correctly and an error message will be shown when trying to connect with the App.

To create a PayPal App go to PayPal Developer Site. You need to log in to the site, using your verified Premier or Business PayPal account (these accounts are free to signup).

Important: You need to use a Premier or Business PayPal account for creating an App. A personal account won’t work.

When you logged in you’ll get to PayPal developer page. If you don’t have a developer account, this will auto-generate one for you. This should look similar to the one shown in the image below:

paypal 01Сlick on Create App button and you will be redirected to the window shown below. Enter an “App Name” and “Sandbox developer account” and click on Create App button again.

paypal 02

This will take you to the settings page for your new PayPal App. The first you need to do is to scroll down to “Sandbox App Settings” and enter “App Return URL”:paypal 03

The App Return URL is mentioned on the WooSocial settings page: WP Dashboard > WooSocial > PayPal. It looks like something like this:

paypal_app3

Important: Use the “Return URI” field same as the “PayPal Redirect Url” mentioned on the WooSocial settings page. If these entries do not completely match the URL of your website, the App won’t work.

To finish setup on the PayPal App underneath the “App feature options” and follow the steps:

First, uncheck “Accept Payments”, “Invoicing”, “Payouts” and keep only “Log In with PayPal” as checked.

paypal 06

Second, click on “Advanced Options” under “Log in with PayPal” and change a few things in this section:

  • check “Personal Information” and then uncheck “Date of Birth” and “Age Range”.
  • check “Address Information”.
  • enter links to your Privacy Policy and Terms & Conditions pages.

paypal 07

The setup is done! Now you can grab your Client ID and Client Secret and go back to WP Dashboard menu. Enter Client ID and Client Secret in WooSocial > PayPal settings. After you entered them, click on the Save Changes button.

woosocial paypal

Note: When you copy and paste all the needed IDs and Keys, make sure, that you don’t have empty spaces, either at the beginning or at the end of these entries. Otherwise, the App won’t work correctly and an error message will be shown when trying to connect with the App.