How to create an API key for Facebook

In this article, we will go thru with you on how to create an API key for your Facebook.

1. First of all, you will need a Facebook user account.

2. Go to https://developers.facebook.com/

3. Click on 

4. Register and Verify your account

5. Enter a name for your Facebook app (you may choose a name that refers to your platform, like “Penguin Apps Builder”). This name will be displayed to the app users when they would want to create an account in the mobile app through Facebook connect.

6. On the page “Select a Scenario“, select “Integrate Facebook Login

7. Go to Settings > Basic in the left menu.

Here are the App ID and the Secret you will use in Penguin Apps Builder. There is how you use the Facebook API key in Penguin Apps Builder:

In the app Editor > Settings > APIs
This one will be specific to the app. The advantage is that you can choose a name for your Facebook app that matches the name of your app, with the same icon. This way, when an app user uses the Facebook login, Facebook will display an app asking for users consent that has the same name as the app. The disadvantage is that you have to create an API key per app.

8. In the case you create a Facebook key for one app, in your Penguin Apps Builder Editor, go to Settings > APIs and copy the Callback URLs.

9. From the Facebook settings left menu, click on “Facebook Login” > “Settings” and paste the Urls  then click on “Save changes” (in the case of a key for your backoffice, just enter https://localhost/callback):

  • https://localhost/callback is used on phone and tablets. So the API key from backoffice > settings > API will work for all your apps on a phone or a tablet.
  • https://apps.penguinapps.biz/5c4cf8c78e55b?login_fb=true is specific to the html5 website of your app.
    So, if you want to have the Facebook login in your apps’ html5 website, you will have to create a new Facebook API and add it to the editor API settings.

10. Go back to Settings > Basic menu. In the App Domains field, left it blank.  For Category, select “Utility & Productivity“.

11. Add a Privacy Policy URL. 

12. Click on “+Add Platform” and choose “Website“:

13. In the Site URL field enter the address of your platform (aka Penguin Apps Builder) and this time with “http://”, and “www.” if your platform is on your main domain. If it’s on a subdomain, enter your subdomain like http://apps.mydomain.com. Enter also the URL to your domain name, and http://*.yourdomain.com (if your Penguin Apps Builder is at apps.penguinapps.biz enter http://*.penguinapps.biz”. Then save.
(We recommend you to set both “http” and “https” address, and so 6 entries)

Screen Shot 2016-03-22 at 21.55.25

Example for http://apps.penguinapps.biz:  http://apps.penguinapps.biz, https://penguinapps.biz, http://*.penguinapps.biz, https://apps.penguinapps.biz, https://penguinapps.biz, https://*.penguinapps.biz

14. You can also add an app icon for your app. It’s not mandatory but your Facebook app will be more professional with an icon when the user will be invited to connect with his Facebook account. Click on “Save Changes“.

15. From the top menu, click on 

16.  Click on Confirm.

17. You’re done!