Creating an API connection between your Facebook profile and your page can be important.
For example, you need this connection, if you want to offer the visitors of your website the possibility to upload their Facebook picture on the Thrive Ovation testimonial capture form.
Another instance when you need this connection is when you use Thrive Comments and you want to allow people to sign in to their Facebook profile, when leaving a comment on your website.
If this connection is set up, then, they will be able to log in to their Facebook profile and upload their picture to the testimonial they leave on your website.
Facebook does not accept URLs that are not secure. In order to be able to make the connection between your Facebook profile and your page, your website URL must start with "https".Thus, if your website URL is not secure, meaning that it starts only with "http", you will not be able to set up this connection properly.
Follow the steps below to get your Facebook App ID and then, create the connection.
1. Adding a New App
Log in to your Facebook account and go to the Facebook developers page. Here, under the "My Apps" button from the navigation bar, you'll notice a "Create App" button. Click on it:
A pop-up window will open, where you will be required to select between three different options. For this purpose, we'll select "Manage Business Integrations":
Next, a new pop-up will appear on the screen, where you will be required to enter a name for your App, your contact email, and the purpose for creating this App:
Note: You may be prompted to do a security check with either a captcha or a checkbox (e.g. “I'm not a robot”).
2. Adding a Product
The next step is to add a product. Here you will have to select a product from the list, based on what exactly you are going to use your app for.
If you wish, you can also read the documentation for each product, to see what they are about. You just have to click on the “Read Docs” option to do that:
For this connection, you should choose the Facebook Login product. This gives the visitors of your website an easy way to log into your website using their Facebook account.
After you have found the Facebook Login product in the list, click on the "Set Up" button from it:
3. Choosing a Platform for Your Product:
Here, you have to choose the platform you want to use your product on. In this case, we will use "Web":
After that, you will need to enter the URL of the website you want to use the App on and click on "Save":
Then click on "Continue" to follow the next steps of the setup wizard. You can go through each step, click on "Next" when you have read them.
Nevertheless, you can also skip going through this wizard if you want to. This is not mandatory in order to integrate your app with Thrive Themes.
You can continue with setting up the connection by doing the following:
4. Disable "Strict Mode for Redirect URIs"
Facebook has the “Strict Mode” activated by default and there is no option to deactivate it, so you will have to build the exact OAuth Redirect URI yourself in order to continue the process of adding the app.
The OAuth Redirect URI is a link, a URL, where the visitor will get sent to after he/she signs in (the account authorization is successful).
This might seem a little tricky, but follow the guidelines below and you’ll see that it is a lot easier than it seems:
Construct Redirect URL
This URL has three parts:
- a.) Your admin page
This part has to contain your domain (https://www.domain.com/), along with the admin part of it, which looks like this, if you leave it by default: "/wp-admin/admin.php".
Thus, so far, your link should look like this:
Note: If you have a custom login URL you will have to use that URL. For example, if your custom login page is in the "/test/admin.php directory, then, the URL should look like this:
- b.) After this comes a static part, which is always the same.
This part contains the page of your website where the visitors will be redirected and the type of API connection (in this case, Facebook) that is used, preceded by a question mark:
So, the URL should look like this after you add that static part to it too:
- c.) The third part of the URL is a dynamic part because it changes based on your APP details.
This contains your App ID and your Secret ID.
In order to find these, you will have to go to the “Settings” part of your sidebar options and then, click on the “Basic” drop-down.
Then, click on "Save Changes" from the bottom right part of the page.
These have to be completed, because later on, you will have to change the status of your App and that cannot be done without these fields completed.
Now you can copy the "App ID" and the "App Secret ID" from the top of the options.
Please keep in mind, that when you click on “Show” in the “App secret” section, you might be required to introduce your password again.
After you have copied the IDs from here, complete the link with them. The third part should look like this:
&app_id=Your Facebook APP ID&app_secret=Your Facebook Secret ID
Paste the App ID and the Secret ID instead of the two placeholders from the example (Your Facebook APP ID , Your Facebook Secret ID)
Here is a sample for how a correctly composed URL would look like:
Note: Please, make sure that you change the domain, the App ID, and the Secret ID with your details:
- instead of the www.domain.com part, enter your website URL
- instead of the Your Facebook APP ID part, enter your App ID
- instead of the Your Facebook Secret ID part, enter your App ID
Here is the example of how the URL will look like with the necessary parts replaced:
Once you have the URL, you will have to go to the sidebar and in the “Products” section, where you will find the product that you have added, Facebook Login in our case. Click on it and then, choose "Settings"
Now, enter the URL, composed of the three parts detailed above, in the “Valid OAuth Redirect URIs” section:
It is important that you click on "Save Changes" after adding the URL in the "Valid OAuth Redirect URLs" field:
Redirect URI Validator
As the next step, you will have to check whether the URL that you have composed is a valid one. In order to do this, first you will have to complete the “Redirect URI Validator” section with the respective URL you have constructed and then you will have to check it.
Scroll down until you see the “Redirect URI Validator” section and complete the "Redirect URI to Check" field with the composed URL:
Then click on the "Check URI" button to check whether the URL is valid and correct:
If the URL is correct, you will see a notification message letting you know that the redirect URI is valid and you can use it for the application:
When you have checked the URL's validity too, save the changes again, on the bottom of the page:
You will have to do all of these steps so that the URL will be validated correctly.
All there's left to do is make the connection with your page.
5. Copy the API Keys
In order to create the connection, you will have to use the two API keys (App ID, and Secret ID) that you have previously copied and used to create the Redirect URL.
You can copy them again by going back to the “Settings” part of your sidebar options and then, to the “Basic” drop-down. Look for the keys in the "App ID" and "App Secret" fields
Have the API keys ready because you will have to paste them on your website, in the API Connections area, from the Thrive Dashboard.
6. Integrating Your App with Thrive Themes
Go on the WordPress admin dashboard of your website, and access the "Thrive Dashboard":
On the "Thrive Dashboard", scroll down until you come across the "API Connections" card and then, click on "Manage Connections":
Add a new connection by selecting an app from the drop-down. In our case, look for the "Facebook" option:
Once you have selected the "Facebook" option, paste the "App ID" and the "App Secret ID" in the fields that will show up:
Once the fields are completed, click on "Connect". A pop-up window will open, with the information that will be used by the App.
You can edit this if you wish, or leave it as it is and then, click on "Continue as".
After you have completed all these steps, you will see a notification about the fact that your connection is ready to be used!
We hope this article was useful for you. If so, please give us a smile below :)