Wordpress themes, login using Facebook not working on localhost

Question

I am using wordpress themes on localhost on a mac device. I tried on two different themes the Facebook login feature that they integrate in their settings and on both I get the same error: Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings. Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

Just to mention that earlier I have written a simple AngularJS project and tested the Facebook Login on localhost and it worked fine. I mentioned local.foo.com as the website on facebook developer when creating new App and I edited the /etc/hosts file on mac and added the entry: 127.0.0.1 local.foo.com to make it work.

Now, when trying it on the wordpress themes, I created a new App on facebook developer, and I mentioned local.foo.com as the website (same as I did when I created the working AngularJs example). I used the new App Id in the theme settings, and when trying to login I got the error mentioned above on 2 different themes. I used the same settings that I used for the working AngularJS App. The following image shows the settings on facebook.

Note that I tried to enable more options and to fill the Valid OAuth Redirect URIs field with entries like http://localhost/lovestory corresponding to what appears when I open the app in browser (for example http://127.0.0.1:8888/lovestory ), but facebook does not accept anymore URIs with http, since they require only https.

Answer 1

Lately facebook requires https. Therefore, an SSL certificate has to created locally and used. Here is a process to create it: https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec