First, you will need to be logged in to your Facebook account. Next, head to the Apps page by accessing this URL: https://developers.facebook.com/apps/.
1. Create the Facebook App
Click on the Create App
Button in the top right corner:
Next, choose None for the App Type.
Once the None option is selected, click on Continue.
Fill out the App details:
Display name - it can be anything you want - choose something representative.
App Contact email - make sure you are using a valid Email address
Business Account - you can leave the default option
Click on Create App button and confirm your Facebook account password:
2. Choosing a Product for the App
Once we complete the above steps, it will bring us to Add a Product Page, from where we will need to choose Facebook Login and click on Set Up Button:
Next, choose the Web options:
In the Site URL, you need to enter your website URL. For example, https://yourdomain.com, make sure that you don't have any forward slash (/
) after your domain name like so:
This app will be used on https://divi.wordpress-corner.com
(replace this with your domain).
Click on the Save button and then on Continue. Click Next for all the rest of the steps once you reach step 5. Next Steps, click on Settings under the Facebook Login option on the Right Sidebar.
3. Setting Permissions and Features
Facebook authentification requires that the public_profile
has the Advanced Access set. To be able to set that, we need to set a few more details on our Facebook App.
Go to Settings > Basic page, and here we have to set the following:
Namespace - should be the Display Name of your app, without any spaces or uppercase. Example: the Display Name is
Demo Divi Tech
, meaning the Namespace should bedemodivitech
.App Domain - should be the website domain. Example:
mywebiste.com
- notice we don't have any protocols being addedContact Email - should be a valid email address.
Privacy Policy URL - this should be a valid page URL that exists (it is published) on your WordPress website.
Once that is set up correctly, go back to App Review > Permissions and Features, look for public_profile, and click on Get advanced access.
4. Setting up the Facebook Login
From the left-hand side Sidebar, choose Settings under Facebook Login:
The only change we need to make here is to add the Valid OAuth Redirect URIs. To get the URL, head back to your WordPress Dashboard, go to Tools > Monarch Settings > General Settings, and copy the full URL from your browser window:
Then go back to the Facebook App and paste that copied URL into the Valid OAuth Redirect URIs filed:
Finally, click on Save Changes - at the bottom of the page.
5. Get the Facebook App ID and Secret Key
From the App's Page, click on Settings > Basic.
From this new page, copy the App ID:
And paste it to the Monarch Configuration page:
Back to the Facebook App's page, click on the Show button to get the App Secret key, which may ask you to enter your Facebook account password. Once the password has been entered, the App Secret key will be revealed. Copy it and paste it to Monarch:
With everything set up, click Authorize button, or if Monarch were already used a different App, the button would be Re-Authorize, and you will end up on a page that looks like this:
Click on the Continue as... button.
Choose the Facebook Page for which Monarch will display the total number of Followers.
Click on Next. We do not need to do anything here.
In the final screen, click Done:
At this point, you will be redirected back to Monarch Admin.
Congratulations, you have successfully created and Authorised a Facebook App.
How to remove the App Type
In case your Facebook app already has a typeset, which is indicated by the fact that on the Top Bar, it shows App Type: Business - as an example:
We must remove that App Type before using the App in Monarch. To do so, from the App's Dashboard, scroll down and click on the Remove App Type option:
Complete the quick survey, and you're done.